maz-ui/dist/composables/useSwipe.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { ref, computed, toValue } from "vue";
const defaultOptions = {
  preventDefaultOnTouchMove: !1,
  preventDefaultOnMouseWheel: !1,
  threshold: 50,
  immediate: !1,
  triggerOnEnd: !1
};
class Swipe {
  constructor(inputOption) {
    this.inputOption = inputOption, this.options = { ...defaultOptions, ...inputOption }, 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(element) {
    if (!element) {
      console.error(
        "[maz-ui][SwipeHandler](setElement) Element should be provided. Its can be a string selector or an HTMLElement"
      );
      return;
    }
    if (typeof element == "string") {
      const foundElement = document.querySelector(element);
      if (!(foundElement instanceof HTMLElement)) {
        console.error("[maz-ui][SwipeHandler](setElement) String selector for element is not found");
        return;
      }
      this.element = foundElement;
    } else
      this.element = element;
  }
  handleMouseWheel(event) {
    event.preventDefault();
  }
  toucheStartHandler(event) {
    this.xStart = event.touches[0].clientX, this.yStart = event.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(event) {
    this.options.preventDefaultOnTouchMove && event.cancelable && event.preventDefault(), this.xEnd = event.touches[0].clientX, this.yEnd = event.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(event));
  }
  handleTouchEnd(event) {
    this.runCallbacks(event), this.emitValuesChanged();
  }
  runCallbacks(event) {
    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?.(event) : this.options.onRight?.(event) : this.yDiff > 0 ? this.options.onUp?.(event) : this.options.onDown?.(event), 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();
  }
}
function useSwipe(options) {
  const xDiff = ref(), yDiff = ref(), xStart = ref(), xEnd = ref(), yStart = ref(), yEnd = ref(), element = computed(() => toValue(options.element)), swiper = new Swipe({
    ...options,
    element: element.value,
    onValuesChanged(values) {
      xDiff.value = values.xDiff, yDiff.value = values.yDiff, xStart.value = values.xStart, xEnd.value = values.xEnd, yStart.value = values.yStart, yEnd.value = values.yEnd;
    }
  });
  return {
    xDiff,
    yDiff,
    xStart,
    xEnd,
    yStart,
    yEnd,
    start: () => {
      element.value && (swiper.options.element = element.value), swiper.start();
    },
    stop: swiper.stop
  };
}
export {
  useSwipe
};