vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
245 lines • 7.83 kB
JavaScript
import { clamp, loop, onResize, scoped, toPixels } from '../../../../utils';
import { SnapSlideParallax } from '../SlideParallax';
import { parallaxAttributes } from '../SlideParallax/constants';
export class SnapSlide {
constructor(_element, 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 (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 = [];
const defaultProps = {
virtual: false,
};
this._props = Object.assign(Object.assign({}, defaultProps), initProps);
if (this.props.virtual && (!initProps.size || initProps.size === 'auto')) {
throw new Error('Virtual slide must have a defined size');
}
}
/** Snap component */
get snap() {
return this._snap;
}
/** Slide properties */
get props() {
return this._props;
}
/** Slide element */
get element() {
return this._element;
}
/** Slide index */
get index() {
return this._index;
}
/** Current coordinate */
get coord() {
return this._coord;
}
/** Static coordinate (as if the slide was never moved) */
get staticCoord() {
return this._staticCoord;
}
/** Current progress of slide movement: from -1 to 1 */
get progress() {
return this._progress;
}
/** Size property */
get sizeProp() {
var _a, _b, _c;
return (_c = (_a = this.props.size) !== null && _a !== void 0 ? _a : (_b = this.snap) === null || _b === void 0 ? void 0 : _b.props.slideSize) !== null && _c !== void 0 ? _c : 'auto';
}
/** Slide size in pixels */
get size() {
var _a;
const { snap, sizeProp } = this;
if (!snap) {
return 0;
}
if (sizeProp === 'stretch') {
return snap.containerSize;
}
if (sizeProp === 'auto') {
return (_a = this._domSize) !== null && _a !== void 0 ? _a : snap.containerSize;
}
return toPixels(sizeProp);
}
/** Check if the slide is visible */
get isVisible() {
return this._isVisible;
}
/** Resize the slide & trigger snap reflow */
resize(isManual = true) {
const { element, snap } = this;
if (!snap) {
return;
}
// Update DOM size
if (element) {
this._domSize =
snap.axis === 'x' ? element.offsetWidth : element.offsetHeight;
}
// Re-flow
snap.resize(isManual);
}
/**
* Attach the slide to the Snap class.
* For internal use only
*/
$_attach(snap, index) {
this.$_detach();
this._snap = snap;
this._index = index;
this._parallax = this._getParallaxNodes().map((node) => new SnapSlideParallax(snap, this, node));
if (this.element && this.sizeProp === 'auto') {
this._resizer = onResize({
element: this.element,
viewportTarget: 'width',
callback: () => this.resize(false),
name: 'Snap Slide',
});
}
}
/**
* Detach the slide from the Snap class.
* For internal use only
*/
$_detach() {
var _a, _b;
this._snap = undefined;
(_a = this._resizer) === null || _a === void 0 ? void 0 : _a.remove();
(_b = this._parallax) === null || _b === void 0 ? void 0 : _b.forEach((parallax) => parallax.destroy());
}
/**
* Static coordinate (as if the slide was never moved).
* For internal use only
*/
$_setStaticCoord(value) {
this._staticCoord = value;
}
/**
* Render the slide.
* For internal use only
*/
$_render() {
var _a;
this._toggleAppend();
(_a = this._parallax) === null || _a === void 0 ? void 0 : _a.forEach((parallax) => parallax.render());
}
/** Get list of parallax nodes */
_getParallaxNodes() {
const { element } = this;
if (!element) {
return [];
}
const selector = parallaxAttributes.map((attr) => `[${attr}]`).join(',');
const nodeList = element.querySelectorAll(selector);
return Array.from(nodeList);
}
/** Toggle slide append/remove */
_toggleAppend() {
if (!this.props.virtual || !this.element || !this.snap) {
return;
}
const { element } = this;
const { container } = this.snap;
if (this.isVisible && !this._isAppended) {
this._isAppended = true;
container.appendChild(element);
}
else if (!this.isVisible && this._isAppended) {
this._isAppended = false;
container.removeChild(element);
}
}
/** Get magnets with static coordinates but dynamic alignment */
get magnets() {
if (!this.snap) {
return [];
}
const { snap, staticCoord, size, index } = this;
const { containerSize } = snap;
let points = [];
if (index === 0 && snap.props.loop) {
points.push(snap.max);
}
if (snap.props.centered) {
const point = staticCoord + size / 2 - snap.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 {
points.push(staticCoord);
if (size > containerSize) {
points.push(staticCoord + (size - containerSize));
}
}
if (!snap.canLoop && !snap.props.centered) {
points = points.map((point) => clamp(point, 0, snap.max));
}
return points;
}
/**
* Update slide progress.
* For internal use only
*/
$_updateProgress() {
const { snap } = this;
if (!snap) {
return;
}
const { coord, size } = this;
const { props, containerSize } = snap;
if (props.centered) {
const center = containerSize / 2 - size / 2;
this._progress = scoped(coord, center, center - size);
return;
}
this._progress = scoped(coord, 0, -size);
}
/**
* Update slide values.
* For internal use only
*/
$_updateCoords(offset) {
const { snap } = this;
if (!snap) {
return;
}
const { staticCoord, size } = this;
const { centered: isCentered } = snap.props;
if (!snap.canLoop) {
this._setCoord(staticCoord + offset - snap.current);
return;
}
if (isCentered) {
this._setCoord(loop(staticCoord + offset - snap.current, -snap.max / 2 + offset, snap.max / 2 + offset));
return;
}
this._setCoord(loop(staticCoord - snap.current, -size, snap.max - size));
}
/** Set slide coordinate */
_setCoord(value) {
var _a, _b;
this._coord = value;
this._isVisible =
this.size > 0 &&
this.coord > -this.size &&
this.coord < ((_b = (_a = this.snap) === null || _a === void 0 ? void 0 : _a.containerSize) !== null && _b !== void 0 ? _b : 0);
}
}
//# sourceMappingURL=index.js.map