vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
179 lines • 7.73 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SnapSlideParallax = void 0;
var utils_1 = require("../../../../utils");
var constants_1 = require("./constants");
var globals_1 = require("./globals");
var SnapSlideParallax = /** @class */ (function () {
function SnapSlideParallax(_snap, _slide, _element) {
var _this = this;
this._snap = _snap;
this._slide = _slide;
this._element = _element;
this._types = [];
this._items = [];
this._debounceInit = null;
this._initDebounce();
this._observer = new MutationObserver(function (mutations) {
mutations.forEach(function (_a) {
var attributeName = _a.attributeName;
if (attributeName && constants_1.parallaxAttributes.includes(attributeName)) {
_this._initDebounce();
}
});
});
this._observer.observe(this._element, { attributes: true });
}
/** Initialize parallax with debounce */
SnapSlideParallax.prototype._initDebounce = function () {
var _this = this;
if (this._debounceInit) {
clearTimeout(this._debounceInit);
}
this._debounceInit = setTimeout(function () { return _this._init(); }, 16);
};
/** Initialize parallax */
SnapSlideParallax.prototype._init = function () {
this._updateItems();
this.render();
};
/** Update parallax items */
SnapSlideParallax.prototype._updateItems = function () {
var _this = this;
var element = this._element;
var defaultScope = this._getScope(this._element, "".concat(globals_1.parallaxAttrPrefix, "scope"), [-1, 1]);
this._types = constants_1.parallaxTypes.filter(function (_a) {
var n = _a.n;
return element.hasAttribute(n);
});
this._items = this._types.map(function (_a) {
var _b;
var n = _a.n, p = _a.p, defaultUnit = _a.u, isAbsProp = _a.isAbs, modifier = _a.modifier;
var group = constants_1.parallaxGroups.find(
// eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
function (_a) {
var types = _a.types;
return types.find(function (type) { return type.n === n; });
});
var scopeAttr = "".concat(n, "-scope");
var scope = element.hasAttribute(scopeAttr)
? _this._getScope(element, scopeAttr, [-1, 1])
: defaultScope;
var attrValue = _this._getAttr(element, n);
var unit = attrValue.replace(/[-\d.]+/g, '') || defaultUnit;
var target = _this._getFloatAttr(element, n, 0);
var offset = _this._getFloatAttr(element, "".concat(n, "-offset"), 0);
var min = _this._getFloatAttr(element, "".concat(n, "-min"), -Infinity);
var max = _this._getFloatAttr(element, "".concat(n, "-max"), Infinity);
var influenceAttr = "".concat(n, "-influence");
var influence = element.hasAttribute(influenceAttr)
? _this._getFloatAttr(element, "".concat(n, "-influence"), 1)
: 0;
var directionalAttr = "".concat(n, "-directional");
var isDirectional = element.hasAttribute(directionalAttr);
var absAttr = "".concat(n, "-abs");
var isAbs = isAbsProp || element.hasAttribute(absAttr);
return {
n: n,
p: p,
u: unit,
group: (_b = group === null || group === void 0 ? void 0 : group.name) !== null && _b !== void 0 ? _b : '',
modifier: modifier,
scope: scope,
progress: 0,
target: target,
value: 0,
offset: offset,
min: min,
max: max,
influence: influence,
isDirectional: isDirectional,
isAbs: isAbs,
};
});
};
/** Get parallax attribute */
SnapSlideParallax.prototype._getAttr = function (element, name) {
var _a;
return (_a = element.getAttribute(name)) !== null && _a !== void 0 ? _a : '';
};
/** Get parallax float attribute */
SnapSlideParallax.prototype._getFloatAttr = function (element, name, defaultValue) {
var float = parseFloat(this._getAttr(element, name));
return Number.isNaN(float) ? defaultValue : float;
};
/** Get parallax scope */
SnapSlideParallax.prototype._getScope = function (element, name, defaultValue) {
var attrValue = this._getAttr(element, name);
var attrStringValue = attrValue.trim().toLowerCase();
if (attrStringValue === 'none') {
return [-Infinity, Infinity];
}
if (attrStringValue === 'const') {
return [1, 1];
}
var cleanValue = attrValue.replace(/[\s\\[\]]+/g, '');
var minMax = cleanValue.split(',');
var minRaw = parseFloat(minMax[0]);
var maxRaw = parseFloat(minMax[1]);
var min = Number.isNaN(minRaw) ? defaultValue[0] : minRaw;
var max = Number.isNaN(maxRaw) ? defaultValue[1] : maxRaw;
return [min, max];
};
/** Render parallax */
SnapSlideParallax.prototype.render = function () {
var _a = this, snap = _a._snap, element = _a._element, items = _a._items, slide = _a._slide;
var globalProgress = slide.progress;
// Calculate parallax values
items.forEach(function (item) {
var progress = utils_1.clamp.apply(void 0, __spreadArray([globalProgress], item.scope, false));
if (Math.abs(item.influence) > 0) {
progress *= Math.abs(snap.influence) * item.influence;
}
if (item.isDirectional) {
progress = Math.abs(progress) * Math.sign(snap.influence);
}
if (item.isAbs) {
progress = Math.abs(progress);
}
item.progress = progress;
item.value = item.offset + progress * item.target;
if (item.modifier) {
item.value = item.modifier(item.value);
}
item.value = (0, utils_1.clamp)(item.value, item.min, item.max);
});
constants_1.parallaxGroups.forEach(function (_a) {
var groupName = _a.name;
var groupItems = items.filter(function (item) { return item.group === groupName; });
var styles = groupItems.map(function (_a) {
var value = _a.value, p = _a.p, u = _a.u;
if (groupName === 'opacity') {
return "".concat(value);
}
return "".concat(p, "(").concat(value).concat(u, ")");
});
var styleString = styles.join(' ');
element.style[groupName] = styleString;
});
};
/** Destroy parallax */
SnapSlideParallax.prototype.destroy = function () {
this._observer.disconnect();
if (this._debounceInit) {
clearTimeout(this._debounceInit);
}
};
return SnapSlideParallax;
}());
exports.SnapSlideParallax = SnapSlideParallax;
//# sourceMappingURL=index.js.map