vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
190 lines • 6.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SnapSwipe = void 0;
var Swipe_1 = require("../../../components/Swipe");
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.container,
enabled: snap.props.swipe,
grabCursor: snap.props.grabCursor,
minTime: snap.props.swipeMinTime,
threshold: snap.props.swipeThreshold,
axis: this.axis,
inertia: snap.props.freemode,
});
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, "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.container.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) {
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.container.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;
if (!props.followSwipe) {
this._endNoFollow();
return;
}
if (props.freemode) {
if (!track.canLoop &&
(track.target < track.min || track.target > track.max)) {
swipe.cancelInertia();
snap.stick();
}
return;
}
if (snap.track.isSlideScrolling) {
return;
}
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;
if (Math.abs(diff) < props.shortSwipesThreshold ||
this._startIndex !== snap.activeIndex) {
snap.stick();
return;
}
if (Math.sign(diff) < 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