vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
323 lines • 11.6 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SnapSlide = void 0;
var utils_1 = require("../../../../utils");
var Parallax_1 = require("./Parallax");
var constants_1 = require("./Parallax/constants");
var SnapSlide = /** @class */ (function () {
function SnapSlide(_element, initProps) {
if (initProps === void 0) { initProps = {}; }
this._element = _element;
/** Current coordinate */
this._coord = 0;
/** If the slide is appended */
this._isAppended = false;
/** If the slide is visible */
this._isVisible = false;
/** Static coordinate without alignment (as if the slide was never moved) */
this._staticCoord = 0;
/** Current progress of slide movement: from -1 to 1 */
this._progress = 0;
this._index = 0;
this._parallax = [];
var defaultProps = {
virtual: false,
size: null,
};
this._props = __assign(__assign({}, defaultProps), initProps);
if (this._props.virtual && (!initProps.size || initProps.size === 'auto')) {
throw new Error('Virtual slide must have a defined size');
}
}
Object.defineProperty(SnapSlide.prototype, "ctx", {
/** Snap component */
get: function () {
return this._ctx;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "props", {
/** Slide properties */
get: function () {
return this._props;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "sizeProp", {
/** Size property */
get: function () {
var _a, _b, _c;
return (_c = (_a = this.props.size) !== null && _a !== void 0 ? _a : (_b = this.ctx) === null || _b === void 0 ? void 0 : _b.props.slideSize) !== null && _c !== void 0 ? _c : 'auto';
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "element", {
/** Slide element */
get: function () {
return this._element;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "index", {
/** Slide index */
get: function () {
return this._index;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "coord", {
/** Current coordinate */
get: function () {
return this._coord;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "staticCoord", {
/** Static coordinate without alignment (as if the slide was never moved) */
get: function () {
return this._staticCoord;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "progress", {
/** Current progress of slide movement: from -1 to 1 */
get: function () {
return this._progress;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "size", {
/** Slide size in pixels */
get: function () {
var _a;
var _b = this, ctx = _b.ctx, sizeProp = _b.sizeProp;
if (!ctx) {
return 0;
}
if (sizeProp === 'stretch') {
return ctx.containerSize;
}
if (sizeProp === 'auto') {
return (_a = this._domSize) !== null && _a !== void 0 ? _a : ctx.containerSize;
}
return (0, utils_1.toPixels)(sizeProp);
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSlide.prototype, "isVisible", {
/** Check if the slide is visible relative to the container */
get: function () {
return this._isVisible;
},
enumerable: false,
configurable: true
});
/** Resize the slide & trigger snap reflow */
SnapSlide.prototype.resize = function (isManual) {
if (isManual === void 0) { isManual = true; }
var _a = this, element = _a.element, ctx = _a.ctx;
if (!ctx) {
return;
}
if (element) {
this._domSize =
ctx.axis === 'x' ? element.offsetWidth : element.offsetHeight;
}
// Re-flow
ctx.resize(isManual);
};
/**
* Attach the slide to the Snap class.
* For internal use only
*/
SnapSlide.prototype.$_attach = function (ctx, index) {
var _this = this;
this.$_detach();
this._ctx = ctx;
this._index = index;
this._parallax = this._getParallaxNodes().map(function (node) { return new Parallax_1.SnapSlideParallax(_this, node, function () { return ctx.impulse; }); });
if (this.element && this.sizeProp === 'auto') {
this._resizer = (0, utils_1.onResize)({
element: this.element,
viewportTarget: 'width',
callback: function () { return _this.resize(false); },
name: 'Snap Slide',
});
}
};
/**
* Detach the slide from the Snap class.
* For internal use only
*/
SnapSlide.prototype.$_detach = function () {
var _a, _b;
this._ctx = undefined;
(_a = this._resizer) === null || _a === void 0 ? void 0 : _a.remove();
(_b = this._parallax) === null || _b === void 0 ? void 0 : _b.forEach(function (parallax) { return parallax.destroy(); });
};
/**
* Static coordinate (as if the slide was never moved).
* For internal use only
*/
SnapSlide.prototype.$_setStaticCoord = function (value) {
this._staticCoord = value;
};
/**
* Render the slide.
* For internal use only
*/
SnapSlide.prototype.$_render = function () {
var _a;
this._toggleAppend();
(_a = this._parallax) === null || _a === void 0 ? void 0 : _a.forEach(function (parallax) { return parallax.render(); });
};
/** Get list of parallax nodes */
SnapSlide.prototype._getParallaxNodes = function () {
var element = this.element;
if (!element) {
return [];
}
var selector = constants_1.PARALLAX_ATTRIBUTES.map(function (attr) { return "[".concat(attr, "]"); }).join(',');
var nodeList = element.querySelectorAll(selector);
return Array.from(nodeList);
};
/** Toggle slide append/remove */
SnapSlide.prototype._toggleAppend = function () {
if (!this.props.virtual || !this.element || !this.ctx) {
return;
}
var _a = this, element = _a.element, ctx = _a.ctx;
if (this.isVisible && !this._isAppended) {
this._isAppended = true;
ctx.container.appendChild(element);
}
else if (!this.isVisible && this._isAppended) {
this._isAppended = false;
ctx.container.removeChild(element);
}
};
Object.defineProperty(SnapSlide.prototype, "magnets", {
/** Get magnets with static coordinates but dynamic alignment */
get: function () {
if (!this.ctx) {
return [];
}
var _a = this, ctx = _a.ctx, staticCoord = _a.staticCoord, size = _a.size, index = _a.index;
var containerSize = ctx.containerSize, origin = ctx.origin;
var points = [];
if (index === 0 && ctx.props.loop) {
points.push(ctx.max);
}
if (origin === 'center') {
var point = staticCoord + size / 2 - ctx.firstSlideSize / 2;
if (size > containerSize) {
points.push(point);
points.push(point + (containerSize - size) / 2);
points.push(point - (containerSize - size) / 2);
}
else {
points.push(point);
}
}
else if (origin === 'end') {
var point = staticCoord + size - ctx.firstSlideSize;
points.push(point);
if (size > containerSize) {
points.push(point + (containerSize - size));
}
}
else {
points.push(staticCoord);
if (size > containerSize) {
points.push(staticCoord + (size - containerSize));
}
if (!ctx.canLoop) {
points = points.map(function (point) { return (0, utils_1.clamp)(point, 0, ctx.max); });
}
}
return points;
},
enumerable: false,
configurable: true
});
/**
* Update slide progress.
* For internal use only
*/
SnapSlide.prototype.$_updateProgress = function () {
var ctx = this.ctx;
if (!ctx) {
return;
}
var _a = this, coord = _a.coord, size = _a.size;
var containerSize = ctx.containerSize, origin = ctx.origin;
if (origin === 'center') {
var center = containerSize / 2 - size / 2;
this._progress = (0, utils_1.scoped)(coord, center, center - size);
return;
}
if (origin === 'end') {
var end = containerSize - size;
this._progress = (0, utils_1.scoped)(coord, end, end - size);
return;
}
this._progress = (0, utils_1.scoped)(coord, 0, -size);
};
/**
* Update slide values.
* For internal use only
*/
SnapSlide.prototype.$_updateCoords = function (offset) {
var ctx = this.ctx;
if (!ctx) {
return;
}
var _a = this, staticCoord = _a.staticCoord, size = _a.size;
var origin = ctx.origin;
if (!ctx.canLoop) {
this._setCoord(staticCoord + offset - ctx.current);
return;
}
if (origin === 'center') {
this._setCoord((0, utils_1.loop)(staticCoord + offset - ctx.current, -ctx.max / 2 + offset, ctx.max / 2 + offset));
return;
}
if (origin === 'end') {
this._setCoord((0, utils_1.loop)(staticCoord + offset - ctx.current, -size, ctx.max - size));
return;
}
this._setCoord((0, utils_1.loop)(staticCoord - ctx.current, -size, ctx.max - size));
};
/** Set slide coordinate */
SnapSlide.prototype._setCoord = function (value) {
var _a, _b;
this._coord = value;
this._isVisible =
this.size > 0 &&
this._coord > -this.size &&
this._coord < ((_b = (_a = this.ctx) === null || _a === void 0 ? void 0 : _a.containerSize) !== null && _b !== void 0 ? _b : 0);
};
return SnapSlide;
}());
exports.SnapSlide = SnapSlide;
//# sourceMappingURL=index.js.map