@get-set/gs-zoom 0.0.4 → 0.0.6

package/actions/initArrows.ts

@@ -0,0 +1,36 @@
+import icons from '../constants/icons';
+import initChange from './initChange';
+import { Ref } from '../types/ref';
+
+const initArrows = (ref: Ref): void => {
+  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', 'gs-zoom-hide-inzoomed');
+    $btnPrev.classList.add('gs-zoom-prev', 'gs-zoom-hide-inzoomed');
+    $btnNavigations.append($btnPrev, $btnNext);
+    $container.append($btnNavigations);
+
+    $btnNext.addEventListener('click', () => {
+      const newIndex =
+        ref.currentIndex < ref.list.length - 1 ? ref.currentIndex + 1 : 0;
+      initChange(ref, newIndex);
+    });
+
+    $btnPrev.addEventListener('click', () => {
+      const newIndex =
+        ref.currentIndex === 0 ? ref.list.length - 1 : ref.currentIndex - 1;
+      initChange(ref, newIndex);
+    });
+  }
+};
+
+export default initArrows;

package/actions/initAutoplay.ts

@@ -0,0 +1,91 @@
+import icons from '../constants/icons';
+import initChange from './initChange';
+import { Ref } from '../types/ref';
+
+export const initAutoplay = (ref: Ref): void => {
+  const $container = ref.$container!;
+  const params = ref.currentParams;
+
+  if ($container.querySelector('.gs-zoom-autoplayline') != null) {
+    ($container.querySelector('.gs-zoom-autoplayline') as HTMLElement).remove();
+  }
+
+  const $autoplayLine = document.createElement('div');
+
+  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') as HTMLElement).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: Ref): void => {
+  if (ref.autoplay !== undefined) {
+    const $container = ref.$container!;
+    const $loader = $container.querySelector('.gs-zoom-autoplayline') as HTMLElement;
+    if ($loader) {
+      const loaded = $loader.clientWidth;
+      const all = $container.clientWidth;
+      const loadedPercent = loaded / all;
+      $loader.style.transition = 'unset';
+      $loader.style.width = `${loaded}px`;
+      $loader.dataset.loaded = String(loadedPercent);
+      clearTimeout(ref.autoplay);
+      ref.autoplay = undefined;
+      ref.autoplayStoped = true;
+    }
+  }
+};
+
+export const resumeAutoplay = (ref: Ref): void => {
+  if (ref.autoplayStoped) {
+    ref.autoplayStoped = false;
+    const params = ref.currentParams;
+    const $container = ref.$container!;
+    const $loader = $container.querySelector('.gs-zoom-autoplayline') as HTMLElement;
+    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: Ref): void => {
+  const $container = ref.$container!;
+  const $btn = $container.querySelector('.gs-zoom-btn-autoplay');
+  if ($btn) {
+    $btn.innerHTML = icons.autoplay;
+  }
+  if ($container.querySelector('.gs-zoom-autoplayline') != null) {
+    ($container.querySelector('.gs-zoom-autoplayline') as HTMLElement).remove();
+    clearTimeout(ref.autoplay);
+    ref.autoplay = undefined;
+    ref.autoplayStoped = false;
+  }
+};

package/actions/initChange.ts

@@ -0,0 +1,139 @@
+import initAdjustAdditionalActive from './initAdjustAdditionalActive';
+import { initAutoplay, stopAutoplay } from './initAutoplay';
+import initDraggle from './initDraggle';
+import initDrawItem from './initDrawItem';
+import setStyles from './setStyles';
+import { Ref } from '../types/ref';
+
+const initChange = (ref: Ref, index: number, isAutoplay: boolean = false): void => {
+  if (ref.inProcess === undefined || !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';
+
+    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);
+
+    if (ref.currentIndex === index) {
+      const drawed = $imgList.querySelectorAll('.gs-zoom-main-img').length;
+      if (drawed === 1) {
+        $imgList.style.transform = 'translate(0%)';
+      } else if (drawed === 2) {
+        $imgList.style.transform =
+          ref.currentIndex === 0 ? 'translate(0%)' : 'translate(-50%)';
+      } else {
+        $imgList.style.transform = 'translate(-33.3333%)';
+      }
+    } else {
+      if (index > ref.currentIndex) {
+        $imgList.style.transform =
+          $imgList.querySelectorAll('.gs-zoom-main-img').length === 3
+            ? 'translate(-66.6666%)'
+            : 'translate(-50%)';
+      } else {
+        $imgList.style.transform = 'translate(0%)';
+      }
+    }
+
+    if (ref.currentIndex !== index && Math.abs(index - ref.currentIndex) !== 1) {
+      const $el = $imgList.querySelector(
+        `.gs-zoom-main-img[data-index='${
+          ref.currentIndex + (index > ref.currentIndex ? 1 : -1)
+        }']`,
+      ) as HTMLElement;
+      if ($el != null) {
+        $el.dataset.index = String(index);
+        initDrawItem(ref, index);
+      }
+    }
+
+    setTimeout(() => {
+      ref.isZoomed = false;
+      $imgList.style.transition = 'unset';
+      setStyles(ref, $img, { transform: 'scale(1) translate(0, 0)' });
+
+      ref.$mainImg = $imgList.querySelector(
+        `.gs-zoom-main-img[data-index='${index}']`,
+      ) as HTMLElement;
+      ref.$imgTouch = ref.$mainImg.querySelector('.gs-zoom-img-touch') as HTMLElement;
+      ref.$img = ref.$mainImg.querySelector('.gs-zoom-img') as HTMLImageElement;
+
+      if (ref.list.length > 2 && ref.currentIndex !== index) {
+        [
+          ...$imgList.querySelectorAll(
+            `.gs-zoom-main-img:not([data-index='${index}'])`,
+          ),
+        ].forEach((el) => el.remove());
+
+        ref.currentIndex = index;
+
+        if (index < ref.list.length - 1) {
+          const $mainImg = document.createElement('div');
+          $mainImg.classList.add('gs-zoom-main-img');
+          $mainImg.dataset.index = String(index + 1);
+          $imgList.append($mainImg);
+          initDrawItem(ref, index + 1);
+        }
+        if (index > 0) {
+          const $mainImg = document.createElement('div');
+          $mainImg.classList.add('gs-zoom-main-img');
+          $mainImg.dataset.index = String(index - 1);
+          $imgList.prepend($mainImg);
+          initDrawItem(ref, index - 1);
+        }
+      } else {
+        ref.currentIndex = index;
+      }
+
+      const drawed = $imgList.querySelectorAll('.gs-zoom-main-img').length;
+      if (drawed === 1) {
+        $imgList.style.transform = 'translate(0%)';
+      } else if (drawed === 2) {
+        $imgList.style.transform =
+          ref.currentIndex === 0 ? 'translate(0%)' : 'translate(-50%)';
+      } else {
+        $imgList.style.transform = 'translate(-33.3333%)';
+      }
+
+      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/actions/initClose.ts

@@ -0,0 +1,29 @@
+import { stopAutoplay } from './initAutoplay';
+
+const initClose = (): void => {
+  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;
+    if (ref.autoplay !== undefined) {
+      clearTimeout(ref.autoplay);
+      stopAutoplay(ref);
+    }
+    ref.$container?.remove();
+    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/actions/initDraggle.ts

@@ -0,0 +1,258 @@
+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';
+import { Ref } from '../types/ref';
+
+const initDraggle = (ref: Ref, index: number): void => {
+  const params = ref.currentParams;
+  const $container = ref.$container!;
+  const $imgList = ref.$imgList!;
+
+  // Detach old handlers from non-active slides
+  [
+    ...ref.$imgList!.querySelectorAll(
+      `.gs-zoom-main-img:not([data-index='${index}']) .gs-zoom-img-touch`,
+    ),
+  ].forEach(($touch: Element) => {
+    const t = $touch as any;
+    t.onclick = null;
+    t.ontouchstart = null;
+    t.onmousedown = null;
+    t.ontouchmove = null;
+    t.onmousemove = null;
+    t.onmouseleave = null;
+    t.onmouseup = null;
+    t.ontouchend = null;
+  });
+
+  const item = ref.$imgList!.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`,
+  );
+  if (item == null) return;
+
+  const $imgTouch = item.querySelector('.gs-zoom-img-touch') as HTMLElement;
+  const $img = item.querySelector('.gs-zoom-img') as HTMLImageElement;
+
+  // Double-click / double-tap to toggle max zoom
+  $imgTouch.onclick = (e: MouseEvent) => {
+    const timeNow = new Date().getTime();
+    const timeDifference = timeNow - (window.lastClickTime || 0);
+    if (timeDifference < 300) {
+      const scale =
+        $img.dataset.scale !== undefined ? parseFloat($img.dataset.scale) : 1;
+      const newScale = scale < params.maxZoom! ? params.maxZoom! : 1;
+      const te = e as any;
+      const clientX =
+        te.targetTouches?.length > 0 ? te.targetTouches[0].clientX : e.clientX;
+      const clientY =
+        te.targetTouches?.length > 0 ? te.targetTouches[0].clientY : e.clientY;
+
+      let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+        $img, $container, scale, newScale, clientX, clientY,
+      );
+      [newTranslatex, newTranslatey] = getAdjustTransform(
+        newScale, newTranslatex, newTranslatey, $img, $container,
+      );
+      $img.dataset.scale = String(newScale);
+      setStyles(ref, $img, {
+        transition: '4s ease-in-out',
+        transform: `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`,
+      });
+      $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: TouchEvent) => {
+    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 = coords.x;
+      window.initListTranslateY = coords.y;
+      $imgList.classList.add('gs-zoom-listisdragging');
+    } else {
+      if (!$img.classList.contains('gs-zoom-is-adjusting')) {
+        const coords = getTranslateCoord($img);
+        $img.dataset.translatex = String(coords.x);
+        $img.dataset.translatey = String(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: MouseEvent) => {
+    pauseAutoplay(ref);
+    if (!ref.isZoomed) {
+      const coords = getTranslateCoord($imgList);
+      window.initListX = e.clientX;
+      window.initListTranslateX = coords.x;
+      window.initListY = e.clientY;
+      window.initListTranslateY = coords.y;
+      $imgList.classList.add('gs-zoom-listisdragging');
+    } else {
+      if (!$img.classList.contains('gs-zoom-is-adjusting')) {
+        const coords = getTranslateCoord($img);
+        $img.dataset.translatex = String(coords.x);
+        $img.dataset.translatey = String(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: TouchEvent) => {
+    const twoTouchPoints = e.targetTouches.length > 1;
+    window.clientX = e.targetTouches[0].clientX;
+    window.clientY = e.targetTouches[0].clientY;
+    if (twoTouchPoints) {
+      window.clientX2 = e.targetTouches[1].clientX;
+      window.clientY2 = e.targetTouches[1].clientY;
+    }
+    if (!ref.isZoomed && !twoTouchPoints) {
+      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 = String(movedX);
+      }
+    } else if (
+      $imgList.dataset.moved === undefined ||
+      $imgList.dataset.moved === '0'
+    ) {
+      if ($img.classList.contains('gs-zoom-isdragging')) {
+        if (twoTouchPoints) {
+          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;
+          const 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 = String(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 = String(newTranslatex + movedX);
+          $img.dataset.translatey = String(newTranslatey + movedY);
+          setStyles(ref, $img, {
+            transform: `scale(${scale}) translate(${(newTranslatex + movedX) / scale}px, ${(newTranslatey + movedY) / scale}px)`,
+          });
+        } else {
+          const movedY = window.clientY - window.initY;
+          const movedX = window.clientX - window.initX;
+          $img.dataset.translatex = String(window.initTranslateX + movedX);
+          $img.dataset.translatey = String(window.initTranslateY + movedY);
+          const scale =
+            $img.dataset.scale !== undefined ? parseFloat($img.dataset.scale) : 1;
+          setStyles(ref, $img, {
+            transform: `scale(${scale}) translate(${(window.initTranslateX + movedX) / scale}px, ${(window.initTranslateY + movedY) / scale}px)`,
+          });
+        }
+      }
+    }
+  };
+
+  // Bug fix: original used bare `clientX`, `clientY`, `initTranslateX`, `initTranslateY`
+  // (undefined references). Correctly prefixed with `window.` here.
+  $imgTouch.onmousemove = (e: MouseEvent) => {
+    window.clientX = e.clientX;
+    window.clientY = e.clientY;
+    if (!ref.isZoomed) {
+      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 = String(movedX);
+      }
+    } else if (
+      $imgList.dataset.moved === undefined ||
+      $imgList.dataset.moved === '0'
+    ) {
+      if ($img.classList.contains('gs-zoom-isdragging')) {
+        const movedY = window.clientY - window.initY;
+        const movedX = window.clientX - window.initX;
+        $img.dataset.translatex = String(window.initTranslateX + movedX);
+        $img.dataset.translatey = String(window.initTranslateY + movedY);
+        const scale =
+          $img.dataset.scale !== undefined ? parseFloat($img.dataset.scale) : 1;
+        setStyles(ref, $img, {
+          transform: `scale(${scale}) translate(${(window.initTranslateX + movedX) / scale}px, ${(window.initTranslateY + movedY) / scale}px)`,
+        });
+      }
+    }
+  };
+
+  const onDragEnd = () => {
+    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) < 0) {
+        initChange(ref, Math.min(ref.currentIndex + 1, ref.list.length - 1));
+      } else if (+($imgList.dataset.moved ?? 0) > 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');
+  };
+
+  $imgTouch.onmouseleave = onDragEnd;
+  $imgTouch.onmouseup = onDragEnd;
+  $imgTouch.ontouchend = onDragEnd;
+};
+
+export default initDraggle;

package/actions/initDraw.ts

@@ -0,0 +1,83 @@
+import icons from '../constants/icons';
+import initDrawItem from './initDrawItem';
+import { Ref } from '../types/ref';
+
+const initDraw = (ref: Ref): void => {
+  const list = ref.list;
+  const params = ref.currentParams;
+  const $body = document.querySelector('body')!;
+  const $container = document.createElement('div');
+  const $header = document.createElement('div');
+  const $imgList = document.createElement('div');
+
+  $container.classList.add('gs-zoom-container');
+  $imgList.classList.add('gs-zoom-img-list');
+  $header.classList.add('gs-zoom-header');
+  $container.append($imgList);
+  $container.prepend($header);
+  $body.append($container);
+  ref.$container = $container;
+  ref.$imgList = $imgList;
+
+  let drawed = 0;
+  list.forEach((_, index) => {
+    if (index <= ref.currentIndex + 1 && index >= ref.currentIndex - 1) {
+      drawed++;
+      const $mainImg = document.createElement('div');
+      $mainImg.classList.add('gs-zoom-main-img');
+      $mainImg.dataset.index = String(index);
+      $imgList.append($mainImg);
+      initDrawItem(ref, index);
+    }
+  });
+
+  if (drawed === 1) {
+    $imgList.style.transform = 'translate(0%)';
+  } else if (drawed === 2) {
+    $imgList.style.transform =
+      ref.currentIndex === 0 ? 'translate(0%)' : 'translate(-50%)';
+  } else {
+    $imgList.style.transform = 'translate(-33.3333%)';
+  }
+
+  // Actions bar
+  const $actions = document.createElement('div');
+  $actions.classList.add('gs-zoom-actions');
+  $header.append($actions);
+
+  if (params.showAdditionals && list.length > 1) {
+    const $btnAdditionals = document.createElement('button');
+    $btnAdditionals.classList.add('gs-zoom-btn-toggleadditionals', 'gs-zoom-action');
+    $btnAdditionals.innerHTML = icons.toggleadditionals;
+    $actions.append($btnAdditionals);
+    ref.$btnAdditionals = $btnAdditionals;
+  }
+
+  const $btnZoomIn = document.createElement('button');
+  $btnZoomIn.classList.add('gs-zoom-btn-in', 'gs-zoom-action');
+  $btnZoomIn.innerHTML = icons.zoomIn;
+  $actions.append($btnZoomIn);
+  ref.$btnZoomIn = $btnZoomIn;
+
+  const $btnZoomOut = document.createElement('button');
+  $btnZoomOut.classList.add('gs-zoom-btn-out', 'gs-zoom-action');
+  $btnZoomOut.innerHTML = icons.zoomOut;
+  $actions.append($btnZoomOut);
+  ref.$btnZoomOut = $btnZoomOut;
+
+  if (list.length > 1) {
+    const $btnAutoplay = document.createElement('button');
+    $btnAutoplay.classList.add('gs-zoom-btn-autoplay', 'gs-zoom-action');
+    $btnAutoplay.innerHTML = icons.autoplay;
+    $actions.append($btnAutoplay);
+    ref.$btnAutoplay = $btnAutoplay;
+  }
+
+  const $btnClose = document.createElement('button');
+  $btnClose.classList.add('gs-zoom-btn-close', 'gs-zoom-action');
+  $btnClose.innerHTML = icons.close;
+  $actions.append($btnClose);
+  ref.$btnClose = $btnClose;
+};
+
+export default initDraw;