roomkit-web-vue3/lib/components/common/base/Swiper.vue3.js

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const utils = require("../../../utils/utils.js");
const _hoisted_1 = {
  key: 0,
  class: "swiper-dot-container"
};
const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
  __name: "Swiper",
  props: {
    activeIndex: {}
  },
  emits: ["change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const activeSwiperIndex = Vue.ref(0);
    const swiperItemNumber = Vue.ref(0);
    const swiperRef = Vue.ref();
    const translateX = Vue.ref(0);
    Vue.watch(
      () => props.activeIndex,
      (val) => {
        activeSwiperIndex.value = val;
        translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
      }
    );
    Vue.watch(activeSwiperIndex, () => {
      emits("change", activeSwiperIndex.value);
    });
    const swiperMounted = Vue.ref(false);
    Vue.onMounted(() => {
      swiperMounted.value = true;
    });
    Vue.onUnmounted(() => {
      swiperMounted.value = false;
    });
    Vue.provide("swiper", {
      activeSwiperIndex,
      swiperRef,
      addSwiperItem,
      removeSwiperItem
    });
    const touchData = {
      x: 0,
      y: 0
    };
    function isActiveDot(index) {
      return index === activeSwiperIndex.value;
    }
    function addSwiperItem() {
      swiperItemNumber.value += 1;
    }
    function removeSwiperItem() {
      swiperItemNumber.value -= 1;
    }
    const swiperStyle = Vue.computed(() => {
      return { transform: `translateX(${translateX.value}px)` };
    });
    let isInOnceTouch = false;
    function handleTouchStart(event) {
      if (event.touches.length > 1 || isInOnceTouch) {
        return;
      }
      isInOnceTouch = true;
      touchData.x = event.changedTouches[0].pageX;
      touchData.y = event.changedTouches[0].pageY;
    }
    function handleMouseStart(event) {
      isInOnceTouch = true;
      touchData.x = event.pageX;
      touchData.y = event.pageY;
    }
    const handleTouchMoveThrottle = utils.throttle(handleTouchMove, 200);
    const handleMouseMoveThrottle = utils.throttle(handleMouseMove, 100);
    function handleTouchMove(event) {
      if (event.touches.length > 1 || !isInOnceTouch) {
        isInOnceTouch = false;
        translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
        return;
      }
      const offsetX = event.changedTouches[0].pageX - touchData.x;
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
    }
    function handleMouseMove(event) {
      if (!isInOnceTouch) {
        return;
      }
      const offsetX = event.pageX - touchData.x;
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
    }
    function handleTouchEnd(event) {
      if (!isInOnceTouch) {
        return;
      }
      isInOnceTouch = false;
      const offsetX = event.changedTouches[0].pageX - touchData.x;
      if (Math.abs(event.changedTouches[0].pageX - touchData.x) > swiperRef.value.offsetWidth / 5) {
        if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
          activeSwiperIndex.value = activeSwiperIndex.value + 1;
        }
        if (offsetX > 0 && activeSwiperIndex.value >= 1) {
          activeSwiperIndex.value = activeSwiperIndex.value - 1;
        }
      }
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
    }
    function handleMouseEnd(event) {
      if (!isInOnceTouch) {
        return;
      }
      isInOnceTouch = false;
      const offsetX = event.pageX - touchData.x;
      if (Math.abs(event.pageX - touchData.x) > swiperRef.value.offsetWidth / 5) {
        if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
          activeSwiperIndex.value = activeSwiperIndex.value + 1;
        }
        if (offsetX > 0 && activeSwiperIndex.value >= 1) {
          activeSwiperIndex.value = activeSwiperIndex.value - 1;
        }
      }
      translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
    }
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        class: "swiper",
        ref_key: "swiperRef",
        ref: swiperRef
      }, [
        Vue.createElementVNode("div", {
          class: "swiper-item-container",
          style: Vue.normalizeStyle(swiperStyle.value),
          onTouchstart: handleTouchStart,
          onMousedown: handleMouseStart,
          onTouchmove: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => Vue.unref(handleTouchMoveThrottle) && Vue.unref(handleTouchMoveThrottle)(...args)),
          onMousemove: _cache[1] || (_cache[1] = //@ts-ignore
          (...args) => Vue.unref(handleMouseMoveThrottle) && Vue.unref(handleMouseMoveThrottle)(...args)),
          onTouchend: handleTouchEnd,
          onMouseup: handleMouseEnd
        }, [
          swiperMounted.value ? Vue.renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : Vue.createCommentVNode("", true)
        ], 36),
        swiperItemNumber.value > 1 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(swiperItemNumber.value, (item, index) => {
            return Vue.openBlock(), Vue.createElementBlock("div", {
              key: item,
              class: Vue.normalizeClass(["swiper-dots", [isActiveDot(index) ? "swiper-current-dots" : ""]])
            }, null, 2);
          }), 128))
        ])) : Vue.createCommentVNode("", true)
      ], 512);
    };
  }
});
exports.default = _sfc_main;