@get-set/gs-zoom 0.0.4 → 0.0.6

package/dist/actions/initNavigateWithKeys.js

@@ -1,27 +1,18 @@
-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;
+import initChange from './initChange';
+const initNavigateWithKeys = (ref) => {
+    const params = ref.currentParams;
+    if (params.navigateWithKeys && ref.list.length > 1) {
+        document.onkeyup = (e) => {
+            if (e.key === 'ArrowRight') {
+                const newIndex = ref.currentIndex < ref.list.length - 1 ? ref.currentIndex + 1 : 0;
+                initChange(ref, newIndex);
+            }
+            else if (e.key === 'ArrowLeft') {
+                const newIndex = ref.currentIndex === 0 ? ref.list.length - 1 : ref.currentIndex - 1;
+                initChange(ref, newIndex);
+            }
+        };
+    }
+};
+export default initNavigateWithKeys;
+//# sourceMappingURL=initNavigateWithKeys.js.map

package/dist/actions/initNavigateWithKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initNavigateWithKeys.js","sourceRoot":"","sources":["../../actions/initNavigateWithKeys.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,MAAM,oBAAoB,GAAG,CAAC,GAAQ,EAAQ,EAAE;IAC9C,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;IAEjC,IAAI,MAAM,CAAC,gBAAgB,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACnD,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;gBAC3B,MAAM,QAAQ,GACZ,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpE,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACjC,MAAM,QAAQ,GACZ,GAAG,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtE,UAAU,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/actions/initOpen.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from '../types/ref';
+declare const initOpen: (ref: Ref, index: number) => void;
+export default initOpen;
+//# sourceMappingURL=initOpen.d.ts.map

package/dist/actions/initOpen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initOpen.d.ts","sourceRoot":"","sources":["../../actions/initOpen.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,QAAA,MAAM,QAAQ,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,KAAG,IAiB3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/actions/initOpen.js

@@ -1,28 +1,27 @@
-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 initOpen = (ref, index) => {
-  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 initOpen;
+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 initOpen = (ref, index) => {
+    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 initOpen;
+//# sourceMappingURL=initOpen.js.map

package/dist/actions/initOpen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initOpen.js","sourceRoot":"","sources":["../../actions/initOpen.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAG1D,MAAM,QAAQ,GAAG,CAAC,GAAQ,EAAE,KAAa,EAAQ,EAAE;IACjD,MAAM,CAAC,cAAe,CAAC,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC;IAChE,IAAI,OAAO,GAAG,CAAC,aAAa,CAAC,kBAAkB,KAAK,UAAU,EAAE,CAAC;QAC/D,GAAG,CAAC,aAAa,CAAC,kBAAkB,EAAE,CAAC;IACzC,CAAC;IACD,GAAG,CAAC,YAAY,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAE,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACd,eAAe,CAAC,GAAG,CAAC,CAAC;IACrB,cAAc,CAAC,GAAG,CAAC,CAAC;IACpB,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAC1B,UAAU,CAAC,GAAG,CAAC,CAAC;IAChB,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,OAAO,GAAG,CAAC,aAAa,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;QAC9D,GAAG,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC;IACD,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/actions/initWheel.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from '../types/ref';
+declare const initWheel: (ref: Ref, index: number) => void;
+export default initWheel;
+//# sourceMappingURL=initWheel.d.ts.map

package/dist/actions/initWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"initWheel.d.ts","sourceRoot":"","sources":["../../actions/initWheel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,QAAA,MAAM,SAAS,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,KAAG,IAoC5C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/actions/initWheel.js

@@ -1,49 +1,27 @@
-import getTranslateCoordToPoint from './getTranslateCoordToPoint';
-import initAdjust from './initAdjust';
-import setStyles from './setStyles';
-
-const initWheel = (ref, index) => {
-  const params = ref.currentParams;
-  const $container = ref.$container;
-  const item = ref.$imgList.querySelector(
-    `.gs-zoom-main-img[data-index='${index}']`,
-  );
-  if (item != null) {
-    const $mainImg = item;
-
-    if (params.zoomOnWheel) {
-      $mainImg.addEventListener('wheel', function (e) {
-        const $img = this.querySelector('.gs-zoom-img');
-        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;
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import initAdjust from './initAdjust';
+import setStyles from './setStyles';
+const initWheel = (ref, index) => {
+    const params = ref.currentParams;
+    const $container = ref.$container;
+    const item = ref.$imgList.querySelector(`.gs-zoom-main-img[data-index='${index}']`);
+    if (item != null && params.zoomOnWheel) {
+        item.addEventListener('wheel', function (e) {
+            const $img = this.querySelector('.gs-zoom-img');
+            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.clientX, e.clientY);
+            $img.dataset.scale = String(newScale);
+            setStyles(ref, $img, {
+                transform: `scale(${newScale}) translate(${newTranslatex / newScale}px, ${newTranslatey / newScale}px)`,
+            });
+            initAdjust(ref, $container, $img, false);
+        });
+    }
+};
+export default initWheel;
+//# sourceMappingURL=initWheel.js.map

package/dist/actions/initWheel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initWheel.js","sourceRoot":"","sources":["../../actions/initWheel.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAClE,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,MAAM,SAAS,GAAG,CAAC,GAAQ,EAAE,KAAa,EAAQ,EAAE;IAClD,MAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;IACjC,MAAM,UAAU,GAAG,GAAG,CAAC,UAAW,CAAC;IACnC,MAAM,IAAI,GAAG,GAAG,CAAC,QAAS,CAAC,aAAa,CACtC,iCAAiC,KAAK,IAAI,CAC5B,CAAC;IAEjB,IAAI,IAAI,IAAI,IAAI,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;QACvC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAa;YACpD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAgB,CAAC;YAC/D,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAExE,MAAM,QAAQ,GACZ,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,MAAM,CAAC,OAAQ;gBACrC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,CAAC,OAAQ,CAAC;gBACxC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC;oBAC3B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,GAAG,CAAC;oBAC1B,CAAC,CAAC,KAAK,CAAC;YAEZ,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,wBAAwB,CAC7D,IAAI,EACJ,UAAU,EACV,KAAK,EACL,QAAQ,EACR,CAAC,CAAC,OAAO,EACT,CAAC,CAAC,OAAO,CACV,CAAC;YAEF,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;YACtC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE;gBACnB,SAAS,EAAE,SAAS,QAAQ,eAAe,aAAa,GAAG,QAAQ,OAAO,aAAa,GAAG,QAAQ,KAAK;aACxG,CAAC,CAAC;YACH,UAAU,CAAC,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/actions/setStyles.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from '../types/ref';
+declare const setStyles: (ref: Ref, $img: HTMLElement, styles: Record<string, string>) => void;
+export default setStyles;
+//# sourceMappingURL=setStyles.d.ts.map

package/dist/actions/setStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setStyles.d.ts","sourceRoot":"","sources":["../../actions/setStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,QAAA,MAAM,SAAS,GAAI,KAAK,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAG,IAsBhF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/actions/setStyles.js

@@ -1,24 +1,23 @@
-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;
+import { stopAutoplay } from './initAutoplay';
+const setStyles = (ref, $img, styles) => {
+    const $container = ref.$container;
+    for (const style in styles) {
+        $img.style[style] = styles[style];
+    }
+    const scale = $img.dataset.tempscale !== undefined
+        ? $img.dataset.tempscale
+        : $img.dataset.scale;
+    if (scale === undefined || parseFloat(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;
+//# sourceMappingURL=setStyles.js.map

package/dist/actions/setStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setStyles.js","sourceRoot":"","sources":["../../actions/setStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,SAAS,GAAG,CAAC,GAAQ,EAAE,IAAiB,EAAE,MAA8B,EAAQ,EAAE;IACtF,MAAM,UAAU,GAAG,GAAG,CAAC,UAAW,CAAC;IAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAa,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;IAED,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,CAAC,SAAS,KAAK,SAAS;QAClC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS;QACxB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAEzB,IAAI,KAAK,KAAK,SAAS,IAAI,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACnD,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;QACjD,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;SAAM,CAAC;QACN,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC9C,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC;QACpB,IAAI,GAAG,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/GSZoom.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Params } from '../types/params';
+import { Ref } from '../types/ref';
+declare global {
+    interface Window {
+        GSZoom: any;
+        GSZoomConfigue?: {
+            references: Array<{
+                key: string;
+                ref: Ref;
+            }>;
+            openedZoom: string | undefined;
+            instance: (ref: string) => Ref | undefined;
+        };
+    }
+}
+export interface GSZoomProps extends Params {
+    src?: string;
+    children?: React.ReactNode;
+}
+declare const GSZoom: React.FC<GSZoomProps>;
+export default GSZoom;
+//# sourceMappingURL=GSZoom.d.ts.map

package/dist/components/GSZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GSZoom.d.ts","sourceRoot":"","sources":["../../components/GSZoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE,GAAG,CAAC;QACZ,cAAc,CAAC,EAAE;YACf,UAAU,EAAE,KAAK,CAAC;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,GAAG,EAAE,GAAG,CAAA;aAAE,CAAC,CAAC;YAC7C,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;YAC/B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,GAAG,GAAG,SAAS,CAAC;SAC5C,CAAC;KACH;CACF;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmJjC,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/GSZoom.js

@@ -1,177 +1,122 @@
-import { useEffect, useRef, useState } from 'react';
-import NewGuid from '../helpers/uihelpers';
-import getCurrentParams from '../actions/getCurrentParams';
-import initOpen from '../actions/initOpen';
-import initMagnifier from '../actions/initMagnifier';
-import types from '../constants/types';
-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 {string} props.src - This is the src of image if src has value thet means component return just image.
- * @param {boolean} props.arrows - Allows to control arrows visiblity.
- * @param {boolean} props.navigateWithKeys - Enable or disable control via keys.
- * @param {number} props.magnifier.zoom - magnifier zoom size.
- * @param {'circle' | 'magnifier'} props.magnifier.form - showes magnifier form.
- * @param {number} props.magnifier.size - magnifier size.
- * @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 = ({ children, ...rest }) => {
-  const params = { ...rest };
-  const [componentKey, setComponentKey] = useState(null);
-  const [indexes, setIndexes] = useState([]);
-  const zoomRef = useRef(null);
-  const singleImageRef = useRef(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;
-              }
-            }
-          },
-        };
-      }
-      if (window.GSZoomConfigue.instance(componentKey) === undefined) {
-        const currentParams = getCurrentParams(params);
-        console.log('window.GSZoomConfigue', window.GSZoomConfigue);
-        window.GSZoomConfigue.references.push({
-          key: componentKey,
-          ref: {
-            list: [],
-            currentParams,
-          },
-        });
-      }
-      const instance = window.GSZoomConfigue.instance(componentKey);
-      if (params.src != undefined && params.src != null && params.src != '') {
-        setIndexes([instance.list.length]);
-        instance.list.push({
-          src: params.src,
-          index: instance.list.length,
-        });
-        if (singleImageRef != null) {
-          if (instance.currentParams.type === types.lightbox) {
-            singleImageRef.current.addEventListener('click', () => {
-              initOpen(instance, +singleImageRef.current.dataset.index);
-            });
-          } else if (instance.currentParams.type === types.magnifier) {
-            initMagnifier(instance, [singleImageRef.current]);
-          }
-        }
-      } else {
-        const images = zoomRef.current.querySelectorAll('img');
-        const newList = [];
-        [...images].map(img => {
-          const index = instance.list.length;
-          instance.list.push({
-            src: img.src,
-            index: index,
-          });
-          newList.push(index);
-          img.dataset.index = index;
-          if (instance.currentParams.type == types.lightbox) {
-            img.addEventListener('click', () => {
-              initOpen(instance, index);
-            });
-          }
-        });
-
-        if (instance.currentParams.type == types.magnifier) {
-          initMagnifier(instance, [...images]);
-        }
-        setIndexes(newList);
-        console.log(images);
-      }
-    }
-  }, [componentKey]);
-
-  useEffect(() => {
-    console.log('start');
-    setComponentKey(
-      params.reference != undefined ? params.reference : NewGuid(),
-    );
-  }, []);
-
-  useEffect(() => {
-    if (indexes.length > 0) {
-      return () => {
-        if (window.GSZoomConfigue != undefined) {
-          const instance = window.GSZoomConfigue.instance(componentKey);
-          if (instance != undefined) {
-            instance.list = instance.list.filter(
-              x => !indexes.includes(x.index),
-            );
-          }
-        }
-      };
-    }
-  }, [indexes]);
-
-  return (
-    <>
-      {params.src != undefined && params.src != null && params.src != '' ? (
-        <img ref={singleImageRef} data-index={indexes[0]} {...rest} />
-      ) : (
-        <div className='gs-zoom-collection' ref={zoomRef}>
-          {children}
-        </div>
-      )}
-    </>
-  );
-};
-
-GSZoom.propTypes = {
-  ...zoomParams,
-  responsive: PropTypes.arrayOf(
-    PropTypes.shape({
-      windowSize: PropTypes.number,
-      params: PropTypes.shape({
-        ...zoomParams,
-      }),
-    }),
-  ),
-};
-
-export default GSZoom;
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { NewGuid } from '../helpers/uihelpers';
+import cssContent from './styles/GSZoomCSS';
+import getCurrentParams from '../actions/getCurrentParams';
+import initOpen from '../actions/initOpen';
+import initMagnifier from '../actions/initMagnifier';
+import types from '../constants/types';
+const GSZoom = ({ children, ...rest }) => {
+    const params = { ...rest };
+    const [componentKey, setComponentKey] = useState(null);
+    const [indexes, setIndexes] = useState([]);
+    const zoomRef = useRef(null);
+    const singleImageRef = useRef(null);
+    useEffect(() => {
+        if (componentKey != null) {
+            // Initialise the global registry once
+            if (typeof window.GSZoomConfigue === 'undefined') {
+                window.GSZoomConfigue = {
+                    references: [],
+                    openedZoom: undefined,
+                    instance: (ref) => {
+                        if (ref != undefined && ref !== '') {
+                            const instance = window.GSZoomConfigue.references.find((x) => x.key === ref);
+                            if (instance != undefined) {
+                                return instance.ref;
+                            }
+                        }
+                    },
+                };
+            }
+            // Register this instance if it doesn't exist yet
+            if (window.GSZoomConfigue.instance(componentKey) === undefined) {
+                const currentParams = getCurrentParams(params);
+                window.GSZoomConfigue.references.push({
+                    key: componentKey,
+                    ref: {
+                        list: [],
+                        currentParams,
+                        currentIndex: 0,
+                    },
+                });
+            }
+            const instance = window.GSZoomConfigue.instance(componentKey);
+            // Inject styles once — no external CSS import needed by the consumer
+            const styleId = 'gs-zoom-styles';
+            if (!document.getElementById(styleId)) {
+                const style = document.createElement('style');
+                style.id = styleId;
+                style.textContent = cssContent;
+                document.head.appendChild(style);
+            }
+            if (params.src != undefined && params.src !== '') {
+                // Single-image mode: render an <img> and register it
+                const idx = instance.list.length;
+                setIndexes([idx]);
+                // We push a placeholder first; once the ref is available (next effect tick)
+                // the actual element is in singleImageRef.current
+                if (singleImageRef.current != null) {
+                    instance.list.push(singleImageRef.current);
+                    if (instance.currentParams.type === types.lightbox) {
+                        singleImageRef.current.addEventListener('click', () => {
+                            initOpen(instance, +singleImageRef.current.dataset.index);
+                        });
+                    }
+                    else if (instance.currentParams.type === types.magnifier) {
+                        initMagnifier(instance, [singleImageRef.current]);
+                    }
+                }
+            }
+            else {
+                // Collection mode: grab all <img> elements inside the wrapper
+                const images = [...zoomRef.current.querySelectorAll('img')];
+                const newIndexes = [];
+                images.forEach((img) => {
+                    const idx = instance.list.length;
+                    instance.list.push(img);
+                    newIndexes.push(idx);
+                    img.dataset.index = String(idx);
+                    if (instance.currentParams.type === types.lightbox) {
+                        img.addEventListener('click', () => {
+                            initOpen(instance, idx);
+                        });
+                    }
+                });
+                if (instance.currentParams.type === types.magnifier) {
+                    initMagnifier(instance, images);
+                }
+                setIndexes(newIndexes);
+            }
+        }
+    }, [componentKey]);
+    useEffect(() => {
+        setComponentKey(params.reference ?? NewGuid());
+    }, []);
+    // Cleanup: remove this component's images from the shared list on unmount
+    useEffect(() => {
+        if (indexes.length > 0) {
+            return () => {
+                if (window.GSZoomConfigue != undefined) {
+                    const instance = window.GSZoomConfigue.instance(componentKey);
+                    if (instance != undefined) {
+                        instance.list = instance.list.filter((_, i) => !indexes.includes(i));
+                    }
+                }
+            };
+        }
+    }, [indexes]);
+    // Strip GSZoom-specific props so they don't land on the DOM element
+    const domProps = Object.fromEntries(Object.entries(rest).filter(([key]) => ![
+        'reference', 'arrows', 'navigateWithKeys', 'showAdditionals',
+        'zoomOnWheel', 'maxZoom', 'type', 'mainImageQueryParameters',
+        'additionalImageQueryParameters', 'disableFullScreen', 'imgLoading',
+        'autoplaySpeed', 'magnifier', 'responsive', 'beforeInit', 'afterInit',
+        'beforeLightBoxOpen', 'afterLightBoxOpen', 'beforeLightBoxClose',
+        'afterLightBoxClose', 'afterChange',
+    ].includes(key)));
+    return (_jsx(_Fragment, { children: params.src != undefined && params.src !== '' ? (_jsx("img", { ref: singleImageRef, ...(indexes[0] !== undefined ? { 'data-index': indexes[0] } : {}), ...domProps, src: params.src })) : (_jsx("div", { className: "gs-zoom-collection", ref: zoomRef, children: children })) }));
+};
+GSZoom.displayName = 'GSZoom';
+export default GSZoom;
+//# sourceMappingURL=GSZoom.js.map

package/dist/components/GSZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GSZoom.js","sourceRoot":"","sources":["../../components/GSZoom.tsx"],"names":[],"mappings":"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"}