vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
172 lines • 7.45 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 utils_2 = require("./utils");
var SnapSlideParallax = /** @class */ (function () {
function SnapSlideParallax(_slide, _element, _getImpulse) {
var _this = this;
this._slide = _slide;
this._element = _element;
this._getImpulse = _getImpulse;
this._items = [];
this._debounceInit = null;
this._initDebounce();
this._observer = new MutationObserver(function (mutations) {
mutations.forEach(function (_a) {
var attributeName = _a.attributeName;
if (attributeName && (0, utils_2.isParallaxAttr)(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._fetchItems();
this.render();
};
/** Fetch parallax items */
SnapSlideParallax.prototype._fetchItems = function () {
var _this = this;
var element = this._element;
var defaultScope = this._getScope(this._element, "scope", [-1, 1]);
var types = constants_1.PARALLAX_TYPES.filter(function (_a) {
var attr = _a.attr;
return element.hasAttribute(attr);
});
this._items = types.map(function (_a) {
var _b;
var attr = _a.attr, prop = _a.prop, defaultUnit = _a.unit, isAbsProp = _a.isAbs, modifier = _a.modifier;
var group = constants_1.PARALLAX_GROUPS.find(function (_a) {
var types = _a.types;
return types.find(function (type) { return type.attr === attr; });
});
var scopeAttr = "".concat(attr, "-scope");
var scope = element.hasAttribute(scopeAttr)
? _this._getScope(element, scopeAttr, [-1, 1])
: defaultScope;
var attrValue = (0, utils_2.getAttr)(element, attr);
var unit = attrValue.replace(/[-\d.]+/g, '') || defaultUnit;
var target = (0, utils_2.getFloatAttr)(element, attr, 0);
var offset = (0, utils_2.getFloatAttr)(element, "".concat(attr, "-offset"), 0);
var min = (0, utils_2.getFloatAttr)(element, "".concat(attr, "-min"), -Infinity);
var max = (0, utils_2.getFloatAttr)(element, "".concat(attr, "-max"), Infinity);
var impulseAttr = "".concat(attr, "-impulse");
var impulse = element.hasAttribute(impulseAttr)
? (0, utils_2.getFloatAttr)(element, impulseAttr, 1)
: 0;
// legacy influence
var influenceAttr = "".concat(attr, "-influence");
var influence = element.hasAttribute(influenceAttr)
? (0, utils_2.getFloatAttr)(element, influenceAttr, 1)
: 0;
var directionalAttr = "".concat(attr, "-directional");
var isDirectional = element.hasAttribute(directionalAttr);
var absAttr = "".concat(attr, "-abs");
var isAbs = isAbsProp || element.hasAttribute(absAttr);
return {
attr: attr,
prop: prop,
unit: unit,
group: (_b = group === null || group === void 0 ? void 0 : group.prop) !== null && _b !== void 0 ? _b : '',
modifier: modifier,
scope: scope,
progress: 0,
target: target,
value: 0,
offset: offset,
min: min,
max: max,
impulse: impulse || influence,
isDirectional: isDirectional,
isAbs: isAbs,
};
});
};
/** Get parallax scope */
SnapSlideParallax.prototype._getScope = function (element, suffix, defaultValue) {
var attrValue = (0, utils_2.getAttr)(element, suffix);
var stringValue = attrValue.toLowerCase();
if (stringValue === 'none') {
return [-Infinity, Infinity];
}
if (stringValue === '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, element = _a._element, items = _a._items, slide = _a._slide;
var impulse = this._getImpulse();
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.impulse) > 0) {
progress *= Math.abs(impulse) * item.impulse;
}
if (item.isDirectional) {
progress = Math.abs(progress) * Math.sign(impulse);
}
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.PARALLAX_GROUPS.forEach(function (_a) {
var groupProp = _a.prop;
var groupItems = items.filter(function (item) { return item.group === groupProp; });
var styles = groupItems.map(function (_a) {
var value = _a.value, prop = _a.prop, unit = _a.unit;
if (groupProp === 'opacity') {
return "".concat(value);
}
return "".concat(prop, "(").concat(value).concat(unit, ")");
});
var styleString = styles.join(' ');
element.style[groupProp] = 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