@get-set/gs-zoom 0.0.1

package/dist/actions/initDraw.js

@@ -0,0 +1,79 @@
+import icons from "../constants/icons";
+import initDrawItem from "./initDrawItem";
+
+const initDraw = (ref) => {
+  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;
+
+  //$imgList.style.width = `${2 * window.innerWidth}px`;
+
+  list.map((_, index) => {
+    const $mainImg = document.createElement("div");
+    $mainImg.classList.add("gs-zoom-main-img");
+    $mainImg.dataset.index = index;
+    $imgList.append($mainImg);
+    if (index <= ref.currentIndex + 1 && index >= ref.currentIndex - 1) {
+      initDrawItem(ref, index);
+    }
+  });
+
+  //#region Actions
+  const $actions = document.createElement("div");
+  $actions.classList.add("gs-zoom-actions");
+  $header.append($actions);
+
+  if (params.showAdditionals && ref.list.length > 1) {
+    const $btnAdditionals = document.createElement("button");
+    $btnAdditionals.classList.add("gs-zoom-btn-toggleadditionals");
+    $btnAdditionals.classList.add("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");
+  $btnZoomIn.classList.add("gs-zoom-action");
+  $btnZoomIn.innerHTML = icons.zoomIn;
+  $actions.append($btnZoomIn);
+  ref.$btnZoomIn = $btnZoomIn;
+
+  const $btnZoomOut = document.createElement("button");
+  $btnZoomOut.classList.add("gs-zoom-btn-in");
+  $btnZoomOut.classList.add("gs-zoom-action");
+  $btnZoomOut.innerHTML = icons.zoomOut;
+  $actions.append($btnZoomOut);
+  ref.$btnZoomOut = $btnZoomOut;
+
+  if (ref.list.length > 1) {
+    const $btnAutoplay = document.createElement("button");
+    $btnAutoplay.classList.add("gs-zoom-btn-autoplay");
+    $btnAutoplay.classList.add("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");
+  $btnClose.classList.add("gs-zoom-action");
+  $btnClose.innerHTML = icons.close;
+  $actions.append($btnClose);
+  ref.$btnClose = $btnClose;
+
+  //#endregion Actions
+};
+
+export default initDraw;

package/dist/actions/initDrawItem.js

@@ -0,0 +1,83 @@
+import initDraggle from "./initDraggle";
+import initWheel from "./initWheel";
+
+const initDrawItem = (ref, index) => {
+  const params = ref.currentParams;
+  const $imgList = ref.$imgList;
+  const $mainImg = $imgList.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`
+  );
+  if ($mainImg.querySelector("img") === null) {
+    const $imgTouch = document.createElement("div");
+    const $imgloading = document.createElement("div");
+    const $img = document.createElement("img");
+    const item = [...ref.list][index];
+    $imgloading.classList.add("gz-zoom-loading-container");
+    $img.src = item.src.split("?")[0] + params.mainImageQueryParameters;
+    $img.classList.add("gs-zoom-img");
+    $img.dataset.scale = 1;
+    $img.dataset.translatex = 0;
+    $img.dataset.translatey = 0;
+    $imgTouch.classList.add("gs-zoom-img-touch");
+    $img.onload = () => {
+      $mainImg.classList.remove("gz-zoom-is-loading");
+    };
+    $mainImg.classList.add("gz-zoom-is-loading");
+    $mainImg.append($img);
+    $imgloading.innerHTML = params.imgLoading;
+    $mainImg.append($imgloading);
+    $mainImg.append($imgTouch);
+    $imgList.style.transform = `translateX(-${
+      ref.currentIndex * window.innerWidth
+    }px)`;
+    if (
+      (item.dataset.gstitle != undefined &&
+        item.dataset.gstitle.trim().length > 0) ||
+      (item.dataset.gssubtitle != undefined &&
+        item.dataset.gssubtitle.trim().length > 0) ||
+      (item.dataset.gsdescription != undefined &&
+        item.dataset.gsdescription.trim().length > 0)
+    ) {
+      const $txtarea = document.createElement("div");
+      $txtarea.classList.add("gs-zoom-hide-inzoomed");
+      $txtarea.classList.add("gs-zoom-info-data");
+      if (
+        item.dataset.gstitle != undefined &&
+        item.dataset.gstitle.trim().length > 0
+      ) {
+        const $title = document.createElement("div");
+        $title.classList.add("gs-zoom-info-title");
+        $title.innerHTML = item.dataset.gstitle;
+        $txtarea.append($title);
+      }
+      if (
+        item.dataset.gssubtitle != undefined &&
+        item.dataset.gssubtitle.trim().length > 0
+      ) {
+        const $subtitle = document.createElement("div");
+        $subtitle.classList.add("gs-zoom-info-subtitle");
+        $subtitle.innerHTML = item.dataset.gssubtitle;
+        $txtarea.append($subtitle);
+      }
+      if (
+        item.dataset.gsdescription != undefined &&
+        item.dataset.gsdescription.trim().length > 0
+      ) {
+        const $description = document.createElement("div");
+        $description.classList.add("gs-zoom-info-description");
+        $description.innerHTML = item.dataset.gsdescription;
+        $txtarea.append($description);
+      }
+      $mainImg.append($txtarea);
+    }
+
+    if (index == ref.currentIndex) {
+      ref.$mainImg = $mainImg;
+      ref.$imgTouch = $imgTouch;
+      ref.$img = $img;
+    }
+    initWheel(ref, index);
+  }
+};
+
+export default initDrawItem;

package/dist/actions/initFullScreen.js

@@ -0,0 +1,32 @@
+import { fullscreenchange } from "./general";
+import initClose from "./initClose";
+
+export const initFullScreen = (ref) => {
+  const $html = document.querySelector("html");
+  if (!ref.currentParams.disableFullScreen) {
+    if ($html.requestFullscreen) {
+      $html.requestFullscreen();
+    } else if ($html.webkitRequestFullscreen) {
+      // Safari
+      $html.webkitRequestFullscreen();
+    } else if ($html.msRequestFullscreen) {
+      // IE/Edge
+      $html.msRequestFullscreen();
+    }
+  }
+  document.removeEventListener("fullscreenchange", fullscreenchange);
+  document.addEventListener("fullscreenchange", fullscreenchange);
+};
+
+export const exitFullScreen = () => {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    // Safari
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    // IE/Edge
+    document.msExitFullscreen();
+  }
+  initClose();
+};

package/dist/actions/initLightBox.js

@@ -0,0 +1,33 @@
+import initActionEvents from "./initActionEvents";
+import initAdditionals from "./initAdditionals";
+import initArrows from "./initArrows";
+import initDraggle from "./initDraggle";
+import initDraw from "./initDraw";
+import { initFullScreen } from "./initFullScreen";
+import initNavigateWithKeys from "./initNavigateWithKeys";
+
+const initLightBox = (ref) => {
+  [...ref.list].map((item, index) => {
+    item.dataset.index = index;
+    item.addEventListener("click", function () {
+      window.GSZoomConfigue.openedZoom = ref.currentParams.reference;
+      if (typeof ref.currentParams.beforeLightBoxOpen === "function") {
+        ref.currentParams.beforeLightBoxOpen();
+      }
+      ref.currentIndex = index;
+      document.querySelector("html").classList.add("gs-zoom-opened");
+      initDraw(ref);
+      initAdditionals(ref);
+      initFullScreen(ref);
+      initNavigateWithKeys(ref);
+      initArrows(ref);
+      initActionEvents(ref);
+      if (typeof ref.currentParams.afterLightBoxOpen === "function") {
+        ref.currentParams.afterLightBoxOpen();
+      }
+      initDraggle(ref, index);
+    });
+  });
+};
+
+export default initLightBox;

package/dist/actions/initMagnifier.js

@@ -0,0 +1,54 @@
+const initMagnifier = (ref) => {
+  [...ref.list].map((item, index) => {
+    item.classList.add('gs-zoom-magnifier-instance');
+    const params = ref.currentParams.magnifier;
+    item.onmouseenter = (e) => {
+      const clientX = e.clientX;
+      const clientY = e.clientY;
+      const $magnifier = document.createElement('div');
+      $magnifier.dataset.type = params.form;
+      const $img = document.createElement('img');
+      $img.src =
+        item.dataset.gszoomsrc != undefined ? item.dataset.gszoomsrc : item.src;
+      $img.width = item.clientWidth;
+      $img.height = item.clientHeight;
+      $img.style.objectFit = window
+        .getComputedStyle(item)
+        .getPropertyValue('object-fit');
+      $img.style.transform = `scale(${params.zoom})`;
+      $magnifier.classList.add('gs-zoom-magnifier');
+      $magnifier.append($img);
+      const top = clientY - params.size / 2;
+      const left = clientX - params.size / 2;
+      $magnifier.style.width = `${params.size}px`;
+      $magnifier.style.top = `${top}px`;
+      $magnifier.style.left = `${left}px`;
+      ref.$magnifier = $magnifier;
+      ref.$img = $img;
+      document.querySelector('body').append($magnifier);
+    };
+    item.onmousemove = (e) => {
+      const $img = ref.$img;
+      const imgRect = item.getBoundingClientRect();
+      const clientX = e.clientX;
+      const clientY = e.clientY;
+      const distanceFromTop = clientY - imgRect.top;
+      const distanceFromLeft = clientX - imgRect.left;
+      const $magnifier = ref.$magnifier;
+      const top = clientY - params.size / 2;
+      const left = clientX - params.size / 2;
+      $magnifier.style.top = `${top}px`;
+      $magnifier.style.left = `${left}px`;
+      $img.style.top = `${params.size / 2 - distanceFromTop * params.zoom}px`;
+      $img.style.left = `${params.size / 2 - distanceFromLeft * params.zoom}px`;
+      $img.style.transform = `scale(${params.zoom})`;
+    };
+    item.onmouseleave = (e) => {
+      if (ref.$magnifier != null) {
+        ref.$magnifier.remove();
+      }
+    };
+  });
+};
+
+export default initMagnifier;

package/dist/actions/initNavigateWithKeys.js

@@ -0,0 +1,27 @@
+import initChange from "./initChange";
+
+const initNavigateWithKeys = (ref) => {
+  const params = ref.currentParams;
+
+  if (params.navigateWithKeys && ref.list.length > 1) {
+    document.onkeyup = (e) => {
+      let newIndex = 0;
+      if (e.key === "ArrowRight") {
+        if (ref.currentIndex < ref.list.length - 1) {
+          newIndex = ref.currentIndex + 1;
+        } else {
+          newIndex = 0;
+        }
+      } else if (e.key === "ArrowLeft") {
+        if (ref.currentIndex == 0) {
+          newIndex = ref.list.length - 1;
+        } else {
+          newIndex = ref.currentIndex - 1;
+        }
+      }
+      initChange(ref, newIndex);
+    };
+  }
+};
+
+export default initNavigateWithKeys;

package/dist/actions/initWheel.js

@@ -0,0 +1,51 @@
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import initAdjust from './initAdjust';
+import setStyles from './setStyles';
+
+const initWheel = (ref, index) => {
+  const params = ref.currentParams;
+  const $container = ref.$container;
+  //[...ref.$imgList.querySelectorAll(".gs-zoom-main-img")].map((item) => {
+  const item = ref.$imgList.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`
+  );
+  if (item != null) {
+    const $mainImg = item;
+    const $img = $mainImg.querySelector('.gs-zoom-img');
+
+    if (params.zoomOnWheel) {
+      $mainImg.addEventListener('wheel', (e) => {
+        const scale =
+          $img.dataset.scale != undefined ? parseFloat($img.dataset.scale) : 1;
+
+        const newScale =
+          e.deltaY < 0 && scale < params.maxZoom
+            ? Math.min(scale + 0.1, params.maxZoom)
+            : e.deltaY > 0 && scale > 1
+            ? Math.max(1, scale - 0.1)
+            : scale;
+
+        const [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+          $img,
+          $container,
+          scale,
+          newScale,
+          e.pageX,
+          e.pageY
+        );
+
+        $img.dataset.scale = newScale;
+        const transform = `scale(${newScale}) translate(${
+          newTranslatex / newScale
+        }px, ${newTranslatey / newScale}px)`;
+        setStyles(ref, $img, {
+          transform: transform,
+        });
+        initAdjust(ref, $container, $img, false);
+      });
+    }
+  }
+  //});
+};
+
+export default initWheel;

package/dist/actions/setStyles.js

@@ -0,0 +1,24 @@
+import { stopAutoplay } from "./initAutoplay";
+
+const setStyles = (ref, $img, styles) => {
+  const $container = ref.$container;
+  for (var style in styles) {
+    $img.style[style] = styles[style];
+  }
+  const scale =
+    $img.dataset.tempscale != undefined
+      ? $img.dataset.tempscale
+      : $img.dataset.scale;
+  if (scale == 1) {
+    $container.classList.remove("gs-zoom-is-zoomed");
+    ref.isZoomed = false;
+  } else {
+    $container.classList.add("gs-zoom-is-zoomed");
+    ref.isZoomed = true;
+    if (ref.autoplay != undefined) {
+      stopAutoplay(ref);
+    }
+  }
+};
+
+export default setStyles;

package/dist/components/GSZoom.js

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import NewGuid from '../helpers/uihelpers';
+import getCurrentParams from '../actions/getCurrentParams';
+import init from '../actions/init';
+import PropTypes from 'prop-types';
+import '../GSZoom.css';
+
+const zoomParams = {
+  reference: PropTypes.string,
+  arrows: PropTypes.bool,
+  navigateWithKeys: PropTypes.bool,
+  showAdditionals: PropTypes.bool,
+  zoomOnWheel: PropTypes.bool,
+  maxZoom: PropTypes.number,
+  disableFullScreen: PropTypes.bool,
+  imgLoading: PropTypes.string,
+  autoplaySpeed: PropTypes.number,
+  mainImageQueryParameters: PropTypes.string,
+  additionalImageQueryParameters: PropTypes.string,
+  type: PropTypes.oneOf(['lightbox', 'magnifier']),
+};
+
+/**
+ * GSZoom component to display a customizable zoom.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {'lightbox' | 'magnifier'} props.type - Type of zoom effect.
+ * @param {string} props.reference - Unique key for each slideshow.
+ * @param {boolean} props.arrows - Allows to control arrows visiblity.
+ * @param {boolean} props.navigateWithKeys - Enable or disable control via keys.
+ * @param {boolean} props.showAdditionals - Control additionla images visibility.
+ * @param {boolean} props.zoomOnWheel - Control zoom via mousewheel.
+ * @param {number} props.maxZoom - Shows zoom max percent.
+ * @param {boolean} props.disableFullScreen - Control fullscreen accessibility.
+ * @param {string} props.imgLoading - Allows to set custom loading.
+ * @param {number} props.autoplaySpeed - Shows autoplay speed.
+ * @param {string} props.mainImageQueryParameters - Additional query params for main image.
+ * @param {string} props.additionalImageQueryParameters - Additional query params for additional images.
+ * @param {Array<Object>} [props.responsive] - Array of responsive configurations based on window size.
+ * @param {number} props.responsive[].windowSize - Minimum window size for this configuration.
+ * @param {Object} props.responsive[].params - The responsive configuration for the zoom.
+ * @returns {JSX.Element} The rendered zoom component.
+ */
+
+const GSZoom = ({ list, ...rest }) => {
+  const params = { ...rest };
+  const [componentKey, setComponentKey] = useState(null);
+
+  useEffect(() => {
+    if (componentKey != null) {
+      if (typeof window.GSZoomConfigue === 'undefined') {
+        window.GSZoomConfigue = {
+          references: [],
+          instance: ref => {
+            if (ref != undefined && ref != '') {
+              const instance = window.GSZoomConfigue.references.find(
+                x => x.key === ref,
+              );
+              if (instance != undefined) {
+                return instance.ref;
+              }
+            }
+            return `GSZoomInstance by '${ref}' reference not found`;
+          },
+        };
+      }
+      if (
+        window.GSZoomConfigue.references.find(x => x.key == componentKey) ==
+        undefined
+      ) {
+        const currentParams = getCurrentParams(params);
+
+        window.GSZoomConfigue.references.push({
+          key: componentKey,
+          ref: {
+            list,
+            currentParams,
+          },
+        });
+
+        init(
+          window.GSZoomConfigue.references.find(x => x.key === componentKey)
+            .ref,
+        );
+      }
+    }
+  }, [componentKey]);
+
+  useEffect(() => {
+    setComponentKey(
+      params.reference != undefined ? params.reference : NewGuid(),
+    );
+    return () => {
+      if (window.GSZoomConfigue != undefined) {
+        window.GSZoomConfigue.references =
+          window.GSZoomConfigue.references.filter(x => x.key !== componentKey);
+      }
+    };
+  }, []);
+};
+
+GSZoom.propTypes = {
+  ...zoomParams,
+  responsive: PropTypes.arrayOf(
+    PropTypes.shape({
+      windowSize: PropTypes.number,
+      params: PropTypes.shape({
+        ...zoomParams,
+      }),
+    }),
+  ),
+};
+
+export default GSZoom;