@maz-ui/utils
Version:
Utils of maz-ui for JavaScript/TypeScript users
81 lines (80 loc) • 3.68 kB
JavaScript
const s = {
preventDefaultOnTouchMove: !1,
preventDefaultOnMouseWheel: !1,
threshold: 50,
immediate: !1,
triggerOnEnd: !1
};
class n {
constructor(t) {
this.inputOption = t, this.options = { ...s, ...t }, this.onToucheStartCallback = this.toucheStartHandler.bind(this), this.onToucheMoveCallback = this.handleTouchMove.bind(this), this.onToucheEndCallback = this.handleTouchEnd.bind(this), this.onMouseWheelCallback = this.handleMouseWheel.bind(this), this.start = this.startListening.bind(this), this.stop = this.stopListening.bind(this), this.options.element && this.setElement(this.options.element), this.options.immediate && this.start();
}
element;
xStart;
yStart;
xEnd;
yEnd;
xDiff;
yDiff;
onToucheStartCallback;
onToucheMoveCallback;
onToucheEndCallback;
onMouseWheelCallback;
start;
stop;
options;
startListening() {
this.setElement(this.options.element), this.element?.addEventListener("touchstart", this.onToucheStartCallback, { passive: !0 }), this.element?.addEventListener("touchmove", this.onToucheMoveCallback, { passive: !0 }), this.options.triggerOnEnd && this.element?.addEventListener("touchend", this.onToucheEndCallback, { passive: !0 }), this.options.preventDefaultOnMouseWheel && this.element?.addEventListener("mousewheel", this.onMouseWheelCallback, { passive: !1 });
}
stopListening() {
this.element?.removeEventListener("touchstart", this.onToucheStartCallback), this.element?.removeEventListener("touchmove", this.onToucheMoveCallback), this.element?.removeEventListener("touchend", this.onToucheEndCallback), this.options.preventDefaultOnMouseWheel && this.element?.removeEventListener("mousewheel", this.onMouseWheelCallback);
}
setElement(t) {
if (!t) {
console.error(
"[maz-ui][SwipeHandler](setElement) Element should be provided. Its can be a string selector or an HTMLElement"
);
return;
}
if (typeof t == "string") {
const e = document.querySelector(t);
if (!(e instanceof HTMLElement)) {
console.error("[maz-ui][SwipeHandler](setElement) String selector for element is not found");
return;
}
this.element = e;
} else
this.element = t;
}
handleMouseWheel(t) {
t.preventDefault();
}
toucheStartHandler(t) {
this.xStart = t.touches[0].clientX, this.yStart = t.touches[0].clientY, this.emitValuesChanged();
}
emitValuesChanged() {
this.options.onValuesChanged?.({
xStart: this.xStart,
yStart: this.yStart,
xEnd: this.xEnd,
yEnd: this.yEnd,
xDiff: this.xDiff,
yDiff: this.yDiff
});
}
handleTouchMove(t) {
this.options.preventDefaultOnTouchMove && t.cancelable && t.preventDefault(), this.xEnd = t.touches[0].clientX, this.yEnd = t.touches[0].clientY, !(!this.xStart || !this.yStart) && (this.xDiff = this.xStart - this.xEnd, this.yDiff = this.yStart - this.yEnd, this.emitValuesChanged(), this.options.triggerOnEnd || this.runCallbacks(t));
}
handleTouchEnd(t) {
this.runCallbacks(t), this.emitValuesChanged();
}
runCallbacks(t) {
typeof this.xDiff != "number" || typeof this.yDiff != "number" || Math.abs(this.xDiff) < this.options.threshold && Math.abs(this.yDiff) < this.options.threshold || (Math.abs(this.xDiff) > Math.abs(this.yDiff) ? this.xDiff > 0 ? this.options.onLeft?.(t) : this.options.onRight?.(t) : this.yDiff > 0 ? this.options.onUp?.(t) : this.options.onDown?.(t), this.resetValues());
}
resetValues() {
this.xStart = void 0, this.yStart = void 0, this.xEnd = void 0, this.yEnd = void 0, this.xDiff = void 0, this.yDiff = void 0, this.emitValuesChanged();
}
}
export {
n as Swipe
};