vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
243 lines • 8.54 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.SnapSwipe = void 0;
var Swipe_1 = require("../../../components/Swipe");
var utils_1 = require("../../../utils");
var SnapSwipe = /** @class */ (function () {
function SnapSwipe(snap) {
var _this = this;
this.snap = snap;
snap.on('destroy', function () { return _this._destroy(); }, { protected: true });
this._startIndex = snap.activeIndex;
this._startTime = 0;
this._swipe = new Swipe_1.Swipe({
container: snap.eventsEmitter,
enabled: snap.props.swipe,
grabCursor: snap.props.grabCursor,
minTime: snap.props.swipeMinTime,
threshold: snap.props.swipeThreshold,
axis: this.axis,
inertia: snap.props.freemode,
inertiaDuration: snap.props.swipeInertiaDuration,
inertiaRatio: snap.props.swipeInertiaRatio,
velocityModifier: function (source) {
var _a;
if (snap.props.freemode) {
return source;
}
var _b = snap.activeSlide, coord = _b.coord, slideSize = _b.size;
snap.track.target = snap.track.current;
var output = __assign(__assign({}, source), (_a = {}, _a[_this.axis] = (0, utils_1.clamp)(source[_this.axis], -coord, snap.domSize - slideSize - coord), _a));
return output;
},
});
this._swipe.on('start', function (data) { return _this._handleSwipeStart(data); });
this._swipe.on('move', function (data) { return _this._handleSwipeMove(data); });
this._swipe.on('end', function (data) { return _this._handleSwipeEnd(data); });
// on props change
snap.on('props', function () {
_this._swipe.updateProps({
enabled: snap.props.swipe,
grabCursor: snap.props.grabCursor,
minTime: snap.props.swipeMinTime,
threshold: snap.props.swipeThreshold,
axis: _this.axis,
inertia: snap.props.freemode,
});
}, { protected: true });
}
Object.defineProperty(SnapSwipe.prototype, "axis", {
/** Axis name depending on swipe direction */
get: function () {
var snap = this.snap;
return snap.props.swipeAxis === 'auto' ? snap.axis : snap.props.swipeAxis;
},
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 inertia is active */
get: function () {
return this._swipe.hasInertia;
},
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 () {
return this.axis === 'x' ? this._swipe.diff.x : this._swipe.diff.y;
},
enumerable: false,
configurable: true
});
/**
* 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 snap = this.snap;
var _a = snap.props, swipeSpeed = _a.swipeSpeed, shouldFollow = _a.followSwipe;
if (!shouldFollow &&
!snap.props.followSwipe &&
!snap.track.isSlideScrolling) {
return;
}
// Normalize wheel data
var swipeDelta = this.axis === 'x' ? coords.step.x : coords.step.y;
var delta = swipeDelta * -swipeSpeed;
// Update track target
snap.track.iterateTarget(delta);
// Clamp target if inertia active
if (this._swipe.hasInertia) {
snap.track.clampTarget();
}
// Emit move callbacks
snap.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);
};
/** End swipe action */
SnapSwipe.prototype._end = function () {
var _a = this, snap = _a.snap, swipe = _a._swipe;
var props = snap.props, track = snap.track;
// handle freemode
if (props.freemode) {
if (!track.canLoop &&
(track.target < track.min || track.target > track.max)) {
swipe.cancelInertia();
snap.stick();
}
return;
}
// enable inertia if active slide is being scrolled
if (track.isSlideScrolling) {
this._swipe.updateProps({ inertia: true });
return;
}
// disable inertia
this._swipe.updateProps({ inertia: false });
// return if followSwipe is disabled
if (!props.followSwipe) {
this._endNoFollow();
return;
}
// stick to target slide
if (this.isShort) {
this._endShort();
}
else {
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) * Math.sign(props.swipeSpeed);
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();
}
};
/** Destroy swipe */
SnapSwipe.prototype._destroy = function () {
this._swipe.destroy();
};
return SnapSwipe;
}());
exports.SnapSwipe = SnapSwipe;
//# sourceMappingURL=index.js.map