vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
326 lines • 12.4 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 utils_1 = require("../../../../utils");
var SnapLogic_1 = require("../SnapLogic");
var SnapSwipe = /** @class */ (function (_super) {
__extends(SnapSwipe, _super);
function SnapSwipe(snap) {
var _this = _super.call(this, snap) || this;
_this._startIndex = snap.activeIndex;
_this._startTime = 0;
var swipe = new Swipe_1.Swipe(__assign({ container: snap.eventsEmitter, inertia: false, velocityModifier: _this._handleVelocityModifier.bind(_this), inertiaDistanceThreshold: 5 }, _this.swipeProps));
_this.swipe = swipe;
_this.addDestructor(function () { return swipe.destroy(); });
swipe.on('start', function (data) { return _this._handleSwipeStart(data); });
swipe.on('move', function (data) { return _this._handleSwipeMove(data); });
swipe.on('end', function (data) { return _this._handleSwipeEnd(data); });
swipe.on('inertiaStart', function () { return _this._handleSwipeInertiaStart(); });
swipe.on('inertiaEnd', function () { return _this._handleSwipeInertiaEnd(); });
swipe.on('inertiaFail', function () { return _this._handleSwipeInertiaFail(); });
swipe.on('inertiaCancel', function () { return _this._handleSwipeInertiaCancel(); });
// handle props change
snap.on('props', function () { return swipe.updateProps(_this.swipeProps); }, {
protected: true,
});
return _this;
}
Object.defineProperty(SnapSwipe.prototype, "isSwiping", {
/** Check if swiping in action */
get: function () {
return this.swipe.isSwiping;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "hasIntertia", {
/** Check if swipe has inertia */
get: function () {
return this.swipe.hasInertia;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "track", {
/** Snap track */
get: function () {
// @ts-ignore
// eslint-disable-next-line no-underscore-dangle
return this.snap._track;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "axis", {
/** Axis name depending on swipe direction */
get: function () {
var _a = this.snap, props = _a.props, axis = _a.axis;
return props.swipeAxis === 'auto' ? axis : props.swipeAxis;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "isShort", {
/** Detect if swipe is short */
get: function () {
var props = this.snap.props;
if (!props.shortSwipes) {
return false;
}
var diff = +new Date() - this._startTime;
return diff <= props.shortSwipesDuration;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "allowFriction", {
/** Checks if resistance is allowed */
get: function () {
return !this.isShort && this.snap.props.swipeFriction;
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "diff", {
/** Swipe difference between start and current coordinates */
get: function () {
var diff = this.swipe.diff;
var initialDiff = diff[this.axis];
return initialDiff / Math.abs(this.snap.props.swipeSpeed);
},
enumerable: false,
configurable: true
});
Object.defineProperty(SnapSwipe.prototype, "swipeProps", {
/** Get swipe properties */
get: function () {
var props = this.snap.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: this.axis === 'angle' ? 1 : props.swipeSpeed,
inertiaDuration: props.swipeInertiaDuration,
inertiaRatio: props.swipeInertiaRatio,
};
},
enumerable: false,
configurable: true
});
/** Modify swipe velocity */
SnapSwipe.prototype._handleVelocityModifier = function (source) {
var _a, _b;
var _c = this, snap = _c.snap, track = _c.track;
var _d = snap.activeSlide, slideCoord = _d.coord, slideSize = _d.size;
// Simple freemode
if (snap.props.freemode === true) {
return source;
}
// Update target coordinate
track.target = track.current;
// Sticky freemode
if (snap.props.freemode === 'sticky' && !snap.isSlideScrolling) {
var virtualCoord = track.loopedCurrent - source[this.axis];
var magnet = snap.getNearestMagnet(virtualCoord);
if (!magnet) {
return source;
}
var newVelocity = track.loopedCurrent - virtualCoord - magnet.diff;
return __assign(__assign({}, source), (_a = {}, _a[this.axis] = newVelocity, _a));
}
// Freemode: false, when slides are scrolled
var value = (0, utils_1.clamp)(source[this.axis], -slideCoord, snap.containerSize - slideSize - slideCoord);
var output = __assign(__assign({}, source), (_b = {}, _b[this.axis] = value, _b));
return output;
};
/** Handles swipe `start` event */
SnapSwipe.prototype._handleSwipeStart = function (coords) {
var snap = this.snap;
this._startIndex = snap.activeIndex;
this._startTime = +new Date();
// disable pointer events
snap.eventsEmitter.style.pointerEvents = 'none';
// cancel sticky behavior
if (snap.props.followSwipe) {
snap.cancelTransition();
}
// Emit callbacks
snap.callbacks.emit('swipeStart', coords);
};
/** Handles swipe `move` event */
SnapSwipe.prototype._handleSwipeMove = function (coords) {
var _a = this, snap = _a.snap, track = _a.track, swipe = _a.swipe, axis = _a.axis;
var props = snap.props, callbacks = snap.callbacks;
var shouldFollow = props.followSwipe;
if (!shouldFollow && !snap.isSlideScrolling) {
return;
}
// Normalize swipe delta
var swipeDelta = coords.step[axis];
if (axis === 'angle') {
var trackLength = snap.max - snap.min;
swipeDelta = trackLength * (swipeDelta / 360);
}
var delta = swipeDelta * -1;
// Update track target
track.iterateTarget(delta);
// Clamp target if inertia is animating
if (swipe.hasInertia) {
track.clampTarget();
}
// Emit move callbacks
callbacks.emit('swipe', coords);
};
/** Handles swipe `end` event */
SnapSwipe.prototype._handleSwipeEnd = function (coords) {
this._end();
// Enable pointer events
this.snap.eventsEmitter.style.pointerEvents = '';
// Emit end callbacks
this.snap.callbacks.emit('swipeEnd', coords);
};
/** Handles swipe inertia start */
SnapSwipe.prototype._handleSwipeInertiaStart = function () {
this.snap.callbacks.emit('swipeInertiaStart', undefined);
};
/** Handles swipe inertia end */
SnapSwipe.prototype._handleSwipeInertiaEnd = function () {
this.snap.callbacks.emit('swipeInertiaEnd', undefined);
};
/** Handles swipe inertia fail */
SnapSwipe.prototype._handleSwipeInertiaFail = function () {
var snap = this.snap;
if (snap.props.freemode === 'sticky' && !snap.isSlideScrolling) {
if (this.isShort) {
this._endShort();
}
else {
snap.stick();
}
}
else {
this.snap.render();
}
this.snap.callbacks.emit('swipeInertiaFail', undefined);
};
/** Handles swipe inertia cancel */
SnapSwipe.prototype._handleSwipeInertiaCancel = function () {
this.snap.callbacks.emit('swipeInertiaCancel', undefined);
};
/** End swipe action */
SnapSwipe.prototype._end = function () {
var _a = this, snap = _a.snap, swipe = _a.swipe, track = _a.track;
var props = snap.props;
// Handle freemode
if (props.freemode) {
swipe.updateProps({ inertia: true });
// Clamp & stick if out of bounds
if (!track.canLoop &&
(track.target < track.min || track.target > track.max)) {
swipe.cancelInertia();
snap.stick();
}
// End short swipe
if (this.isShort && props.freemode === 'sticky') {
swipe.updateProps({ inertia: false });
swipe.cancelInertia();
this._endShort();
}
return;
}
// Enable inertia if active slide is being scrolled
if (snap.isSlideScrolling) {
swipe.updateProps({ inertia: true });
return;
}
// Disable inertia
swipe.updateProps({ inertia: false });
// Return if followSwipe is disabled
if (!props.followSwipe) {
this._endNoFollow();
return;
}
// Short swipe
if (this.isShort) {
this._endShort();
return;
}
// Or just stick to the nearest slide
snap.stick();
};
/** End short swipe */
SnapSwipe.prototype._endShort = function () {
var _a = this, diff = _a.diff, snap = _a.snap;
var props = snap.props, activeSlide = snap.activeSlide;
if (Math.abs(diff) < props.shortSwipesThreshold) {
snap.stick();
return;
}
var normalizedDiff = Math.sign(diff);
if (this._startIndex !== snap.activeIndex) {
if (normalizedDiff < 0 && activeSlide.progress > 0) {
snap.next();
}
else if (normalizedDiff > 0 && activeSlide.progress < 0) {
snap.prev();
}
else {
snap.stick();
}
return;
}
if (normalizedDiff < 0) {
snap.next();
}
else {
snap.prev();
}
};
/** End action when `followSwipe` is disabled */
SnapSwipe.prototype._endNoFollow = function () {
var _a = this, diff = _a.diff, snap = _a.snap;
if (Math.abs(diff) < 20) {
snap.stick();
return;
}
if (diff < 0) {
snap.next();
}
else {
snap.prev();
}
};
return SnapSwipe;
}(SnapLogic_1.SnapLogic));
exports.SnapSwipe = SnapSwipe;
//# sourceMappingURL=index.js.map