@get-set/gs-zoom 0.0.1

package/dist/actions/initAdjust.js

@@ -0,0 +1,107 @@
+import { getTranslateCoord } from './general';
+import getAdjustTransform from './getAdjustTransform';
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import setStyles from './setStyles';
+
+const initAdjust = (ref, $container, $img, withAnimation = true) => {
+  if ($img.classList.contains('gs-zoom-isdragging') || !withAnimation) {
+    const params = ref.currentParams;
+    let needAdjust = false;
+    if (withAnimation) {
+      $img.classList.remove('gs-zoom-isdragging');
+    }
+
+    let scale = $img.dataset.scale != null ? parseFloat($img.dataset.scale) : 1;
+    let isOverzoomed = false;
+    const oldScale = scale;
+
+    if (scale < 1) {
+      scale = 1;
+      needAdjust = true;
+    } else if (scale > params.maxZoom) {
+      isOverzoomed = true;
+      scale = params.maxZoom;
+      needAdjust = true;
+    }
+    $img.dataset.scale = scale;
+    const actualWidth = $img.clientWidth * scale;
+    const actualHeight = $img.clientHeight * scale;
+    const containerWidth = $container.clientWidth;
+    const containerHeight = $container.clientHeight;
+    const coords = getTranslateCoord($img);
+    const translatex = coords.x;
+    const translatey = coords.y;
+    const maxTranslateXValue = (actualWidth - containerWidth) / 2;
+    const maxTranslateYValue = (actualHeight - containerHeight) / 2;
+    const minTranslateXValue = (containerWidth - actualWidth) / 2;
+    const minTranslateYValue = (containerHeight - actualHeight) / 2;
+    let newTranslateXValue = translatex / scale;
+    let newTranslateYValue = translatey / scale;
+    if (actualWidth <= containerWidth) {
+      if (translatex != 0) {
+        needAdjust = true;
+        newTranslateXValue = 0;
+      }
+    } else {
+      if (translatex > maxTranslateXValue) {
+        needAdjust = true;
+        newTranslateXValue = maxTranslateXValue / scale;
+      } else if (translatex < minTranslateXValue) {
+        needAdjust = true;
+        newTranslateXValue = minTranslateXValue / scale;
+      }
+    }
+    if (actualHeight <= containerHeight) {
+      if (translatex != 0) {
+        needAdjust = true;
+        newTranslateYValue = 0;
+      }
+    } else {
+      if (translatey > maxTranslateYValue) {
+        needAdjust = true;
+        newTranslateYValue = maxTranslateYValue / scale;
+      } else if (translatey < minTranslateYValue) {
+        needAdjust = true;
+        newTranslateYValue = minTranslateYValue / scale;
+      }
+    }
+    if (isOverzoomed) {
+      const clientCenterX = (window.clientX + window.clientX2) / 2;
+      const clientCenterY = (window.clientY + window.clientY2) / 2;
+      let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+        $img,
+        $container,
+        oldScale,
+        scale,
+        clientCenterX,
+        clientCenterY
+      );
+      [newTranslatex, newTranslatey] = getAdjustTransform(
+        scale,
+        newTranslatex,
+        newTranslatey,
+        $img,
+        $container
+      );
+      newTranslateXValue = newTranslatex;
+      newTranslateYValue = newTranslatey;
+    }
+    if (needAdjust) {
+      if (withAnimation) {
+        $img.classList.add('gs-zoom-is-adjusting');
+      }
+      setStyles(ref, $img, {
+        transform: `scale(${scale}) translate(${newTranslateXValue}px, ${newTranslateYValue}px)`,
+      });
+      $img.dataset.translatex = newTranslateXValue * scale;
+      $img.dataset.translatey = newTranslateYValue * scale;
+      if (withAnimation) {
+        setTimeout(function () {
+          $img.classList.remove('gs-zoom-is-adjusting');
+        }, 400);
+      }
+    }
+  }
+};
+
+export default initAdjust;

package/dist/actions/initAdjustAdditionalActive.js

@@ -0,0 +1,33 @@
+import { getTranslateCoord } from "./general";
+
+const initAdjustAdditionalActive = (ref) => {
+  if (ref.currentParams.showAdditionals && ref.list.length > 1) {
+    const $container = ref.$container;
+    const $active = $container.querySelector(
+      `.gs-add-list .gs-add-item.active`
+    );
+    if ($active != null) {
+      const $list = $container.querySelector(".gs-add-list");
+      const tranlateLeft = getTranslateCoord($list).x;
+      const offsetLeft = $active.offsetLeft;
+      const containerWidth = $container.clientWidth;
+      const itemWidth = $active.clientWidth;
+      const listWidth = $list.clientWidth;
+      const offsetContainer = offsetLeft + tranlateLeft;
+      const gap = parseFloat(getComputedStyle($list).columnGap);
+      if (offsetContainer < itemWidth + gap) {
+        $list.style.transform = `translateX(${Math.min(
+          itemWidth + gap - offsetLeft,
+          0
+        )}px)`;
+      } else if (offsetContainer > containerWidth - (2 * itemWidth + gap)) {
+        $list.style.transform = `translateX(${Math.max(
+          containerWidth - offsetLeft - 2 * itemWidth - gap,
+          containerWidth - listWidth
+        )}px)`;
+      }
+    }
+  }
+};
+
+export default initAdjustAdditionalActive;

package/dist/actions/initArrows.js

@@ -0,0 +1,44 @@
+import icons from "../constants/icons";
+import initChange from "./initChange";
+
+const initArrows = (ref) => {
+  const params = ref.currentParams;
+  const $container = ref.$container;
+
+  if (params.arrows && ref.list.length > 1) {
+    const $btnNavigations = document.createElement("div");
+    const $btnNext = document.createElement("button");
+    const $btnPrev = document.createElement("button");
+    $btnPrev.innerHTML = icons.arrPrev;
+    $btnNext.innerHTML = icons.arrNext;
+    $btnNavigations.classList.add("gs-zoom-navigations");
+    $btnNext.classList.add("gs-zoom-next");
+    $btnNext.classList.add("gs-zoom-hide-inzoomed");
+    $btnPrev.classList.add("gs-zoom-prev");
+    $btnPrev.classList.add("gs-zoom-hide-inzoomed");
+    $btnNavigations.append($btnPrev);
+    $btnNavigations.append($btnNext);
+    $container.append($btnNavigations);
+
+    $btnNext.addEventListener("click", () => {
+      let newIndex = 0;
+      if (ref.currentIndex < ref.list.length - 1) {
+        newIndex = ref.currentIndex + 1;
+      } else {
+        newIndex = 0;
+      }
+      initChange(ref, newIndex);
+    });
+    $btnPrev.addEventListener("click", () => {
+      let newIndex = 0;
+      if (ref.currentIndex == 0) {
+        newIndex = ref.list.length - 1;
+      } else {
+        newIndex = ref.currentIndex - 1;
+      }
+      initChange(ref, newIndex);
+    });
+  }
+};
+
+export default initArrows;

package/dist/actions/initAutoplay.js

@@ -0,0 +1,81 @@
+import icons from "../constants/icons";
+import initChange from "./initChange";
+
+export const initAutoplay = (ref) => {
+  const $container = ref.$container;
+  const params = ref.currentParams;
+  const $autoplayLine = document.createElement("div");
+  if ($container.querySelector(".gs-zoom-autoplayline") != null) {
+    $container.querySelector(".gs-zoom-autoplayline").remove();
+  }
+  setTimeout(() => {
+    $autoplayLine.classList.add("gs-zoom-autoplayline");
+    $container.prepend($autoplayLine);
+    $autoplayLine.style.width = "0px";
+    setTimeout(() => {
+      $autoplayLine.style.transition = `${params.autoplaySpeed}ms all linear`;
+      $autoplayLine.style.width = "100vw";
+      clearTimeout(ref.autoplay);
+      ref.autoplay = setTimeout(() => {
+        if ($container.querySelector(".gs-zoom-autoplayline") != null) {
+          $container.querySelector(".gs-zoom-autoplayline").remove();
+        }
+        if (ref.currentIndex == [...ref.list].length - 1) {
+          initChange(ref, 0, true);
+        } else {
+          initChange(ref, ref.currentIndex + 1, true);
+        }
+      }, params.autoplaySpeed - 100);
+    }, 100);
+  }, 0);
+};
+
+export const pauseAutoplay = (ref) => {
+  if (ref.autoplay != undefined) {
+    const $container = ref.$container;
+    const $loader = $container.querySelector(".gs-zoom-autoplayline");
+    const loaded = $loader.clientWidth;
+    const all = $container.clientWidth;
+    const loadedPercent = loaded / all;
+    $loader.transition = "unset";
+    $loader.style.width = loaded + "px";
+    $loader.dataset.loaded = loadedPercent;
+    clearTimeout(ref.autoplay);
+    ref.autoplay = undefined;
+    ref.autoplayStoped = true;
+  }
+};
+
+export const resumeAutoplay = (ref) => {
+  if (ref.autoplayStoped) {
+    ref.autoplayStoped = false;
+    const params = ref.currentParams;
+    const $container = ref.$container;
+    const $loader = $container.querySelector(".gs-zoom-autoplayline");
+    if ($loader != null) {
+      const loaded = +$loader.dataset.loaded;
+      const timeLeft = params.autoplaySpeed * (1 - loaded);
+      $loader.style.transition = `${timeLeft}ms all linear`;
+      $loader.style.width = "100vw";
+      clearTimeout(ref.autoplay);
+      ref.autoplay = setTimeout(() => {
+        if (ref.currentIndex == [...ref.list].length - 1) {
+          initChange(ref, 0, true);
+        } else {
+          initChange(ref, ref.currentIndex + 1, true);
+        }
+      }, timeLeft);
+    }
+  }
+};
+
+export const stopAutoplay = (ref) => {
+  const $container = ref.$container;
+  $container.querySelector(".gs-zoom-btn-autoplay").innerHTML = icons.autoplay;
+  if ($container.querySelector(".gs-zoom-autoplayline") != null) {
+    $container.querySelector(".gs-zoom-autoplayline").remove();
+    clearTimeout(ref.autoplay);
+    ref.autoplay = undefined;
+    ref.autoplayStoped = false;
+  }
+};

package/dist/actions/initChange.js

@@ -0,0 +1,73 @@
+import initAdjustAdditionalActive from "./initAdjustAdditionalActive";
+import { initAutoplay, stopAutoplay } from "./initAutoplay";
+import initDraggle from "./initDraggle";
+import initDrawItem from "./initDrawItem";
+import initWheel from "./initWheel";
+import setStyles from "./setStyles";
+
+const initChange = (ref, index, isAutoplay = false) => {
+  if (!ref.inProcess) {
+    ref.inProcess = true;
+    const params = ref.currentParams;
+    const $img = ref.$img;
+    const $container = ref.$container;
+    const $imgList = ref.$imgList;
+    $img.dataset.scale = 1;
+    $img.dataset.translatex = 0;
+    $img.dataset.translatey = 0;
+
+    $container.classList.remove("gs-zoom-is-zoomed");
+    $imgList.style.transition = ".3s ease-in-out";
+    $imgList.style.transform = `translateX(-${
+      $container.clientWidth * index
+    }px)`;
+
+    if (params.showAdditionals && ref.list.length > 1) {
+      const $active = $container.querySelector(
+        ".gs-zoom-additionals .gs-add-list .gs-add-item.active"
+      );
+      if ($active != null) {
+        $active.classList.remove("active");
+      }
+      $container
+        .querySelector(
+          `.gs-zoom-additionals .gs-add-list .gs-add-item[data-index='${index}']`
+        )
+        .classList.add("active");
+    }
+    initAdjustAdditionalActive(ref);
+    setTimeout(() => {
+      ref.isZoomed = false;
+      $imgList.style.transition = "unset";
+      setStyles(ref, $img, {
+        transform: "scale(1) translate(0, 0)",
+      });
+      ref.$mainImg = [...$imgList.querySelectorAll(".gs-zoom-main-img")][index];
+      ref.$imgTouch = ref.$mainImg.querySelector(".gs-zoom-img-touch");
+      ref.$img = ref.$mainImg.querySelector(".gs-zoom-img");
+      ref.currentIndex = index;
+      [...$imgList.querySelectorAll(".gs-zoom-main-img")].map((item, i) => {
+        if (i <= index + 1 && i >= index - 1) {
+          initDrawItem(ref, i);
+        } else {
+          item.innerHTML = "";
+        }
+      });
+      ref.inProcess = false;
+      if (typeof params.afterChange === "function") {
+        params.afterChange();
+      }
+
+      initDraggle(ref, index);
+    }, 300);
+    $imgList.classList.remove("gs-zoom-listisdragging");
+
+    if (isAutoplay) {
+      initAutoplay(ref);
+    } else {
+      stopAutoplay(ref);
+    }
+  }
+};
+
+export default initChange;

package/dist/actions/initClose.js

@@ -0,0 +1,28 @@
+import { stopAutoplay } from "./initAutoplay";
+
+const initClose = () => {
+  const ref =
+    window.GSZoomConfigue.openedZoom !== undefined
+      ? window.GSZoomConfigue.references.find(
+          (x) => x.key === window.GSZoomConfigue.openedZoom
+        ).ref
+      : null;
+  if (ref != null) {
+    if (typeof ref.currentParams.beforeLightBoxClose === "function") {
+      ref.currentParams.beforeLightBoxClose();
+    }
+    document.onkeyup = null;
+    ref.$container.remove();
+    if (ref.autoplay != undefined) {
+      clearTimeout(ref.autoplay);
+      stopAutoplay(ref);
+    }
+    document.querySelector("html").classList.remove("gs-zoom-opened");
+    if (typeof ref.currentParams.afterLightBoxClose === "function") {
+      ref.currentParams.afterLightBoxClose();
+    }
+    window.GSZoomConfigue.openedZoom = undefined;
+  }
+};
+
+export default initClose;

package/dist/actions/initDraggle.js

@@ -0,0 +1,303 @@
+import { getTranslateCoord } from "./general";
+import getAdjustTransform from "./getAdjustTransform";
+import getTranslateCoordToPoint from "./getTranslateCoordToPoint";
+import initAdjust from "./initAdjust";
+import { pauseAutoplay, resumeAutoplay } from "./initAutoplay";
+import initChange from "./initChange";
+import setStyles from "./setStyles";
+
+const initDraggle = (ref, index) => {
+  const params = ref.currentParams;
+  const $container = ref.$container;
+  const $imgList = ref.$imgList;
+
+  [
+    ...ref.$imgList.querySelectorAll(
+      `.gs-zoom-main-img:not([data-index='${index}']) .gs-zoom-img-touch`
+    ),
+  ].map(($touch) => {
+    $touch.onclick = null;
+    $touch.ontouchstart = null;
+    $touch.onmousedown = null;
+    $touch.ontouchmove = null;
+    $touch.onmousemove = null;
+    $touch.onmouseleave = null;
+    $touch.onmouseup = null;
+    $touch.ontouchend = null;
+  });
+  const item = ref.$imgList.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`
+  );
+  if (item != null) {
+    const $imgTouch = item.querySelector(".gs-zoom-img-touch");
+    const $img = item.querySelector(".gs-zoom-img");
+
+    $imgTouch.onclick = (e) => {
+      const timeNow = new Date().getTime();
+      const timeDifference = timeNow - window.lastClickTime;
+      if (timeDifference < 300) {
+        const scale =
+          $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
+        let newScale = 1;
+        if (scale < params.maxZoom) {
+          newScale = params.maxZoom;
+        }
+        const clientX =
+          e.targetTouches !== null &&
+          typeof e.targetTouches !== "undefined" &&
+          e.targetTouches.length > 0
+            ? e.targetTouches[0].clientX
+            : e.clientX;
+        const clientY =
+          e.targetTouches !== null &&
+          typeof e.targetTouches !== "undefined" &&
+          e.targetTouches.length > 0
+            ? e.targetTouches[0].clientY
+            : e.clientY;
+
+        let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+          $img,
+          $container,
+          scale,
+          newScale,
+          clientX,
+          clientY
+        );
+        [newTranslatex, newTranslatey] = getAdjustTransform(
+          newScale,
+          newTranslatex,
+          newTranslatey,
+          $img,
+          $container
+        );
+        const transform = `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`;
+        $img.dataset.scale = newScale;
+        setStyles(ref, $img, {
+          transition: "4s ease-in-out",
+          transform: transform,
+        });
+        $img.classList.add("gs-zoom-is-adjusting");
+        setTimeout(() => {
+          $img.classList.remove("gs-zoom-is-adjusting");
+          setStyles(ref, $img, {
+            transition: "unset",
+          });
+        }, 400);
+      }
+      window.lastClickTime = timeNow;
+    };
+    $imgTouch.ontouchstart = (e) => {
+      pauseAutoplay(ref);
+      if (e.targetTouches.length > 1) {
+        document
+          .querySelector("html")
+          .classList.add("gs-disable-apple-touchzoom");
+      }
+      if (!ref.isZoomed && e.targetTouches.length == 1) {
+        const coords = getTranslateCoord($imgList);
+        window.initListX = e.targetTouches[0].clientX;
+        window.initListY = e.targetTouches[0].clientY;
+        window.initListTranslateX = parseFloat(coords.x);
+        window.initListTranslateY = parseFloat(coords.y);
+        $imgList.classList.add("gs-zoom-listisdragging");
+      } else {
+        if (!$img.classList.contains("gs-zoom-is-adjusting")) {
+          const coords = getTranslateCoord($img);
+          $img.dataset.translatex = coords.x;
+          $img.dataset.translatey = coords.y;
+          window.initX = e.targetTouches[0].clientX;
+          window.initY = e.targetTouches[0].clientY;
+          if (e.targetTouches.length > 1) {
+            window.initX2 = e.targetTouches[1].clientX;
+            window.initY2 = e.targetTouches[1].clientY;
+            window.touchDistance = Math.sqrt(
+              Math.pow(window.initX2 - window.initX, 2) +
+                Math.pow(window.initY2 - window.initY, 2)
+            );
+            window.initCenterX = (window.initX2 + window.initX) / 2;
+            window.initCenterY = (window.initY2 + window.initY) / 2;
+          }
+          window.initTranslateX = parseFloat($img.dataset.translatex);
+          window.initTranslateY = parseFloat($img.dataset.translatey);
+          $img.classList.add("gs-zoom-isdragging");
+        }
+      }
+    };
+    $imgTouch.onmousedown = (e) => {
+      pauseAutoplay(ref);
+      if (!ref.isZoomed) {
+        const coords = getTranslateCoord($imgList);
+        window.initListX = e.clientX;
+        window.initListTranslateX = parseFloat(coords.x);
+        window.initListY = e.clientY;
+        window.initListTranslateY = parseFloat(coords.y);
+        $imgList.classList.add("gs-zoom-listisdragging");
+      } else {
+        if (!$img.classList.contains("gs-zoom-is-adjusting")) {
+          const coords = getTranslateCoord($img);
+          $img.dataset.translatex = coords.x;
+          $img.dataset.translatey = coords.y;
+          window.initX = e.clientX;
+          window.initTranslateX = parseFloat($img.dataset.translatex);
+          window.initY = e.clientY;
+          window.initTranslateY = parseFloat($img.dataset.translatey);
+          $img.classList.add("gs-zoom-isdragging");
+        }
+      }
+    };
+    $imgTouch.ontouchmove = (e) => {
+      const towTouchPoints = e.targetTouches.length > 1;
+      window.clientX = e.targetTouches[0].clientX;
+      window.clientY = e.targetTouches[0].clientY;
+      if (towTouchPoints) {
+        window.clientX2 = e.targetTouches[1].clientX;
+        window.clientY2 = e.targetTouches[1].clientY;
+      }
+      if (!ref.isZoomed && !towTouchPoints) {
+        ref.listMoved = true;
+        if ($imgList.classList.contains("gs-zoom-listisdragging")) {
+          const movedX = window.clientX - window.initListX;
+          const newTranslateX = window.initListTranslateX + movedX;
+          $imgList.style.transform = `translateX(${newTranslateX}px)`;
+          $imgList.dataset.moved = movedX;
+        }
+      } else if (
+        $imgList.dataset.moved === undefined ||
+        $imgList.dataset.moved == 0
+      ) {
+        if ($img.classList.contains("gs-zoom-isdragging")) {
+          if (towTouchPoints) {
+            const clientCenterX = (window.clientX + window.clientX2) / 2;
+            const clientCenterY = (window.clientY + window.clientY2) / 2;
+            let scale =
+              $img.dataset.scale != undefined
+                ? parseFloat($img.dataset.scale)
+                : 1;
+            let oldScale =
+              $img.dataset.tempscale != undefined
+                ? parseFloat($img.dataset.tempscale)
+                : scale;
+            const currentDistance = Math.sqrt(
+              Math.pow(window.clientX - window.clientX2, 2) +
+                Math.pow(window.clientY - window.clientY2, 2)
+            );
+            scale = (scale * currentDistance) / window.touchDistance;
+
+            if (scale < 1) {
+              scale = 1;
+            }
+            $img.dataset.tempscale = scale;
+
+            let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+              $img,
+              $container,
+              oldScale,
+              scale,
+              window.initCenterX,
+              window.initCenterY
+            );
+            const movedX = clientCenterX - window.initCenterX;
+            const movedY = clientCenterY - window.initCenterY;
+            window.initCenterX = clientCenterX;
+            window.initCenterY = clientCenterY;
+            $img.dataset.translatex = newTranslatex + movedX;
+            $img.dataset.translatey = newTranslatey + movedY;
+            const transform = `scale(${scale}) translate(${
+              (newTranslatex + movedX) / scale
+            }px, ${(newTranslatey + movedY) / scale}px)`;
+            setStyles(ref, $img, {
+              transform: transform,
+            });
+          } else {
+            const movedY = window.clientY - window.initY;
+            const movedX = window.clientX - window.initX;
+            $img.dataset.translatex = window.initTranslateX + movedX;
+            $img.dataset.translatey = window.initTranslateY + movedY;
+            let scale =
+              $img.dataset.scale != undefined
+                ? parseFloat($img.dataset.scale)
+                : 1;
+
+            const transform = `scale(${scale}) translate(${
+              (window.initTranslateX + movedX) / scale
+            }px, ${(window.initTranslateY + movedY) / scale}px)`;
+            setStyles(ref, $img, {
+              transform: transform,
+            });
+          }
+        }
+      }
+    };
+    $imgTouch.onmousemove = (e) => {
+      window.clientX = e.clientX;
+      window.clientY = e.clientY;
+      if (!ref.isZoomed) {
+        ref.listMoved = true;
+        if ($imgList.classList.contains("gs-zoom-listisdragging")) {
+          const movedX = window.clientX - window.initListX;
+          const newTranslateX = window.initListTranslateX + movedX;
+          $imgList.style.transform = `translateX(${newTranslateX}px)`;
+          $imgList.dataset.moved = movedX;
+        }
+      } else if (
+        $imgList.dataset.moved === undefined ||
+        $imgList.dataset.moved == 0
+      ) {
+        if ($img.classList.contains("gs-zoom-isdragging")) {
+          const movedY = clientY - window.initY;
+          const movedX = clientX - window.initX;
+          $img.dataset.translatex = window.initTranslateX + movedX;
+          $img.dataset.translatey = window.initTranslateY + movedY;
+          let scale =
+            $img.dataset.scale != undefined
+              ? parseFloat($img.dataset.scale)
+              : 1;
+
+          const transform = `scale(${scale}) translate(${
+            (initTranslateX + movedX) / scale
+          }px, ${(initTranslateY + movedY) / scale}px)`;
+          setStyles(ref, $img, {
+            transform: transform,
+          });
+        }
+      }
+    };
+    $imgTouch.onmouseleave =
+      $imgTouch.onmouseup =
+      $imgTouch.ontouchend =
+        () => {
+          if (
+            $img.classList.contains("gs-zoom-isdragging") &&
+            ($imgList.dataset.moved === undefined ||
+              $imgList.dataset.moved == 0)
+          ) {
+            if ($img.dataset.tempscale != undefined) {
+              $img.dataset.scale = $img.dataset.tempscale;
+              $img.removeAttribute("data-tempscale");
+            }
+
+            initAdjust(ref, $container, $img);
+            resumeAutoplay(ref);
+            $imgList.classList.remove("gs-zoom-listisdragging");
+          } else if ($imgList.classList.contains("gs-zoom-listisdragging")) {
+            $imgList.classList.remove("gs-zoom-listisdragging");
+            if (+$imgList.dataset.moved < 0) {
+              initChange(
+                ref,
+                Math.min(ref.currentIndex + 1, ref.list.length - 1)
+              );
+            } else if (+$imgList.dataset.moved > 0) {
+              initChange(ref, Math.max(ref.currentIndex - 1, 0));
+            } else {
+              resumeAutoplay(ref);
+            }
+            $imgList.dataset.moved = 0;
+          }
+          document
+            .querySelector("html")
+            .classList.remove("gs-disable-apple-touchzoom");
+        };
+  }
+};
+
+export default initDraggle;