vevet
Version:
Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.
144 lines • 4.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SnapWheel = void 0;
var utils_1 = require("../../../utils");
var SnapWheel = /** @class */ (function () {
function SnapWheel(_snap) {
var _this = this;
this._snap = _snap;
/** Detects if wheel event is started */
this._hasStarted = false;
/** Accummulated wheel value for `followWheel=false` */
this._noFollowAccum = 0;
/** Last time wheel event was fired */
this._lastNoFollowTime = 0;
_snap.on('destroy', function () { return _this._destroy(); }, { protected: true });
this._destructor = (0, utils_1.addEventListener)(_snap.eventsEmitter, 'wheel', function (event) {
return _this._handleWheel(event);
});
}
Object.defineProperty(SnapWheel.prototype, "snap", {
/** Snap component */
get: function () {
return this._snap;
},
enumerable: false,
configurable: true
});
/**
* Handles wheel events
*/
SnapWheel.prototype._handleWheel = function (event) {
var _this = this;
var snap = this.snap;
if (!snap.props.wheel) {
return;
}
event.preventDefault();
var wheelAxis = snap.props.wheelAxis;
// Start callback
if (!this._hasStarted) {
this._hasStarted = true;
snap.callbacks.emit('wheelStart', undefined);
}
// Move callback
snap.callbacks.emit('wheel', event);
// Normalize wheel data
var axis = wheelAxis === 'auto' ? snap.axis : wheelAxis;
var wheelData = (0, utils_1.normalizeWheel)(event);
var wheelDelta = axis === 'x' ? wheelData.pixelX : wheelData.pixelY;
var delta = wheelDelta * snap.props.wheelSpeed;
// Update wheel target
if (snap.props.followWheel) {
this._handleFollow(delta);
}
else {
this._handleNotFollow(delta);
}
// Debounce End
if (this._debounceEnd) {
clearTimeout(this._debounceEnd);
}
// End callback
this._debounceEnd = setTimeout(function () { return _this._handleEnd(); }, 100);
};
/** Handle `followWheel=true` */
SnapWheel.prototype._handleFollow = function (delta) {
var snap = this.snap;
// Cancel snap transition
snap.cancelTransition();
// Update track target
snap.track.iterateTarget(delta);
snap.track.clampTarget();
};
/** Handle `followWheel=false` */
SnapWheel.prototype._handleNotFollow = function (delta) {
var snap = this.snap;
var props = snap.props;
// check wheel throttling by active transition
if (props.wheelThrottle === 'auto' && snap.isTransitioning) {
return;
}
// check wheel throttling by time
var timeDiff = +new Date() - this._lastNoFollowTime;
if (typeof props.wheelThrottle === 'number' &&
timeDiff < props.wheelThrottle) {
return;
}
// scroll slide
if (snap.track.isSlideScrolling) {
this._handleFollow(delta);
this._noFollowAccum = 0;
return;
}
// check minumum wheel threshold
if (Math.abs(delta) < 0.5) {
return;
}
// accumulate wheel value
this._noFollowAccum += Math.abs(delta);
var direction = Math.sign(delta);
// continue if accumulated value is more than threshold
if (Math.abs(this._noFollowAccum) < Math.abs(props.wheelNoFollowThreshold)) {
return;
}
// detect transition direction
if (direction === 1) {
if (!snap.next()) {
return;
}
}
else if (!snap.prev()) {
return;
}
// reset
this._noFollowAccum = 0;
this._lastNoFollowTime = +new Date();
};
/** Handle wheel end */
SnapWheel.prototype._handleEnd = function () {
var snap = this.snap;
var props = this.snap.props;
this._hasStarted = false;
this._noFollowAccum = 0;
if (!props.freemode) {
if (props.followWheel && props.stickOnWheelEnd) {
snap.stick();
}
else if (!props.followWheel && !snap.isTransitioning) {
snap.stick();
}
}
snap.callbacks.emit('wheelEnd', undefined);
};
/** Destroy wheel listeners */
SnapWheel.prototype._destroy = function () {
this._destructor();
if (this._debounceEnd) {
clearTimeout(this._debounceEnd);
}
};
return SnapWheel;
}());
exports.SnapWheel = SnapWheel;
//# sourceMappingURL=index.js.map