vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
307 lines • 12 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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.SnapSwipe = void 0;
var Swipe_1 = require("../../../../components/Swipe");
var __1 = require("..");
var SnapSwipe = /** @class */ (function (_super) {
__extends(SnapSwipe, _super);
function SnapSwipe(ctx) {
var _this = _super.call(this, ctx) || this;
_this._startIndex = ctx.activeIndex;
_this._startTime = 0;
var swipe = new Swipe_1.Swipe(__assign({ container: _this.eventsEmitter, inertia: false, inertiaThreshold: 3, recalculateBoundsOnInertia: false, overflow: function () { return ctx.containerSize * (1 - ctx.props.edgeFriction); }, canBounce: function () { return !_this.isTransitioning; }, bounds: _this._getBounds.bind(_this), inertiaDistanceModifier: _this._modifyInertiaDistance.bind(_this) }, _this.swipeProps));
_this.swipe = swipe;
_this.addDestructor(function () { return swipe.destroy(); });
swipe.on('start', function (data) { return _this._handleStart(data); });
swipe.on('move', function (data) { return _this._handleMove(data); });
swipe.on('end', function (data) { return _this._handleEnd(data); });
swipe.on('inertiaStart', function () { return _this._handleInertiaStart(); });
swipe.on('inertiaEnd', function () { return _this._handleInertiaEnd(); });
swipe.on('inertiaFail', function () { return _this._handleInertiaFail(); });
swipe.on('inertiaCancel', function () { return _this._handleInertiaCancel(); });
// handle props change
_this.callbacks.on('props', function () { return swipe.updateProps(_this.swipeProps); }, {
protected: true,
});
return _this;
}
Object.defineProperty(SnapSwipe.prototype, "swipeProps", {
/** Get swipe properties */
get: function () {
var props = this.props;
return {
enabled: props.swipe,
grabCursor: props.grabCursor,
minTime: props.swipeMinTime,
threshold: props.swipeThreshold,
axis: this.axis === 'angle' ? null : this.axis,
relative: this.axis === 'angle',
ratio: props.swipeSpeed,
inertiaRatio: props.swipeInertiaRatio,
};
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "axis", {
/** Axis name depending on swipe direction */
get: function () {
var _a = this, props = _a.props, snapAxis = _a.snapAxis;
return props.swipeAxis === 'auto' ? snapAxis : props.swipeAxis;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "isShort", {
/** Detect if swipe is short */
get: function () {
var props = this.props;
if (!props.shortSwipes) {
return false;
}
var diff = +new Date() - this._startTime;
return diff <= props.shortSwipesDuration;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "diff", {
/** Swipe difference between start and current coordinates */
get: function () {
var initialDiff = this.swipe.diff[this.axis];
return initialDiff * Math.sign(this.props.swipeSpeed);
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "isStickyFreemode", {
/** Check if sticky freemode is enabled */
get: function () {
return this.props.freemode === 'sticky' && this.axis !== 'angle';
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "isSwiping", {
/** Check if swiping in action */
get: function () {
return this.swipe.isSwiping;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "hasInertia", {
/** Check if swipe has inertia */
get: function () {
return this.swipe.hasInertia;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "allowFriction", {
/** Checks if resistance is allowed */
get: function () {
return !this.isShort && this.props.swipeFriction;
},
enumerable: false,
configurable: true
});
/** Get swipe bounds */
SnapSwipe.prototype._getBounds = function () {
var _a, _b;
var _c = this.props, freemode = _c.freemode, loop = _c.loop;
var _d = this, isSlideScrolling = _d.isSlideScrolling, track = _d.track;
if (!freemode && isSlideScrolling) {
var _e = this, activeSlide = _e.activeSlide, containerSize = _e.containerSize, track_1 = _e.track;
var staticCoord = activeSlide.staticCoord, size = activeSlide.size;
var loopOffset = Math.abs(track_1.max - track_1.min) * track_1.loopCount;
return _a = {},
_a[this.axis] = [
-staticCoord - track_1.offset - loopOffset,
-staticCoord - (size - containerSize) - loopOffset - track_1.offset,
],
_a;
}
if (loop) {
return null;
}
return _b = {}, _b[this.axis] = [-track.min, -track.max], _b;
};
/** Modify inertia distance */
SnapSwipe.prototype._modifyInertiaDistance = function (dist) {
var _a;
var track = this.track;
var loopedTarget = track.loopCoord(track.target);
var virtualCoord = loopedTarget - dist[this.axis];
var magnet = this.getNearestMagnet(virtualCoord);
if (!this.isStickyFreemode) {
return null;
}
if (!track.canLoop &&
(track.target < track.min || track.target > track.max)) {
return null;
}
if (!magnet) {
return null;
}
var diff = loopedTarget - virtualCoord - magnet.diff;
return __assign(__assign({}, dist), (_a = {}, _a[this.axis] = diff, _a.angle = 0, _a));
};
/** Handles swipe `start` event */
SnapSwipe.prototype._handleStart = function (coords) {
var _a = this, eventsEmitter = _a.eventsEmitter, props = _a.props, activeIndex = _a.activeIndex, callbacks = _a.callbacks;
this._startIndex = activeIndex;
this._startTime = +new Date();
// disable pointer events
eventsEmitter.style.pointerEvents = 'none';
// cancel sticky behavior
if (props.followSwipe) {
this.track.cancelTransition();
}
this.swipe.setMovement({ x: -this.track.target, y: -this.track.target });
// Emit callbacks
callbacks.emit('swipeStart', coords);
};
/** Handles swipe `move` event */
SnapSwipe.prototype._handleMove = function (coords) {
var _a = this, track = _a.track, axis = _a.axis, props = _a.props, callbacks = _a.callbacks;
if (!props.followSwipe) {
return;
}
var swipeDelta = coords.prevMovement[axis] - coords.movement[axis];
if (axis === 'angle') {
var trackLength = track.max - track.min;
swipeDelta = trackLength * (swipeDelta / 360);
track.updateTarget(track.target + swipeDelta);
}
else {
track.updateTarget(track.target + swipeDelta);
}
// Emit move callbacks
callbacks.emit('swipe', coords);
};
/** Handles swipe `end` event */
SnapSwipe.prototype._handleEnd = function (coords) {
this._end();
// Enable pointer events
this.eventsEmitter.style.pointerEvents = '';
// Emit end callbacks
this.callbacks.emit('swipeEnd', coords);
};
/** Handles swipe inertia start */
SnapSwipe.prototype._handleInertiaStart = function () {
this.callbacks.emit('swipeInertiaStart', undefined);
};
/** Handles swipe inertia end */
SnapSwipe.prototype._handleInertiaEnd = function () {
this.callbacks.emit('swipeInertiaEnd', undefined);
};
/** Handles swipe inertia fail */
SnapSwipe.prototype._handleInertiaFail = function () {
this.callbacks.emit('swipeInertiaFail', undefined);
if (this.isStickyFreemode) {
this.stick();
}
};
/** Handles swipe inertia cancel */
SnapSwipe.prototype._handleInertiaCancel = function () {
this.callbacks.emit('swipeInertiaCancel', undefined);
};
/** End swipe action */
SnapSwipe.prototype._end = function () {
var _a = this, swipe = _a.swipe, props = _a.props;
swipe.updateProps({ inertia: false });
if (!props.followSwipe) {
this._endNoFollow();
return;
}
if (props.freemode) {
if (this.isStickyFreemode && this.isShort && !this.isSlideScrolling) {
this._endShort();
return;
}
swipe.updateProps({ inertia: true });
return;
}
if (this.isSlideScrolling) {
swipe.updateProps({ inertia: true });
return;
}
swipe.updateProps({ inertia: false });
if (this.isShort) {
this._endShort();
return;
}
this.stick();
};
/** End action when `followSwipe` is disabled */
SnapSwipe.prototype._endNoFollow = function () {
var diff = this.diff;
if (Math.abs(diff) < 20) {
this.stick();
return;
}
if (diff < 0) {
this.next();
}
else {
this.prev();
}
};
/** End short swipe */
SnapSwipe.prototype._endShort = function () {
var _a = this, diff = _a.diff, activeIndex = _a.activeIndex, props = _a.props, activeSlide = _a.activeSlide;
if (Math.abs(diff) < props.shortSwipesThreshold) {
this.stick();
return;
}
var normalizedDiff = Math.sign(diff);
if (this._startIndex !== activeIndex) {
if (normalizedDiff < 0 && activeSlide.progress > 0) {
this.next();
}
else if (normalizedDiff > 0 && activeSlide.progress < 0) {
this.prev();
}
else {
this.stick();
}
return;
}
if (normalizedDiff < 0) {
this.next();
}
else {
this.prev();
}
};
return SnapSwipe;
}(__1.SnapLogic));
exports.SnapSwipe = SnapSwipe;
//# sourceMappingURL=index.js.map