@get-set/gs-zoom 0.0.4 → 0.0.6

package/actions/initDrawItem.ts

@@ -0,0 +1,77 @@
+import initDraggle from './initDraggle';
+import initWheel from './initWheel';
+import { Ref } from '../types/ref';
+
+const initDrawItem = (ref: Ref, index: number): void => {
+  const params = ref.currentParams;
+  const $imgList = ref.$imgList!;
+  const $mainImg = $imgList.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`,
+  ) as HTMLElement;
+
+  $mainImg.innerHTML = '';
+
+  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);
+
+  // Title / subtitle / description — sourced from data attributes on the original img element
+  if (
+    (item.dataset.gstitle?.trim().length ?? 0) > 0 ||
+    (item.dataset.gssubtitle?.trim().length ?? 0) > 0 ||
+    (item.dataset.gsdescription?.trim().length ?? 0) > 0
+  ) {
+    const $txtarea = document.createElement('div');
+    $txtarea.classList.add('gs-zoom-hide-inzoomed');
+    $txtarea.classList.add('gs-zoom-info-data');
+
+    if ((item.dataset.gstitle?.trim().length ?? 0) > 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?.trim().length ?? 0) > 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?.trim().length ?? 0) > 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);
+  initDraggle(ref, index);
+};
+
+export default initDrawItem;

package/actions/initFullScreen.ts

@@ -0,0 +1,30 @@
+import { fullscreenchange } from './general';
+import initClose from './initClose';
+import { Ref } from '../types/ref';
+
+export const initFullScreen = (ref: Ref): void => {
+  const $html = document.querySelector('html') as any;
+  if (!ref.currentParams.disableFullScreen) {
+    if ($html.requestFullscreen) {
+      $html.requestFullscreen();
+    } else if ($html.webkitRequestFullscreen) {
+      $html.webkitRequestFullscreen();
+    } else if ($html.msRequestFullscreen) {
+      $html.msRequestFullscreen();
+    }
+  }
+  document.removeEventListener('fullscreenchange', fullscreenchange);
+  document.addEventListener('fullscreenchange', fullscreenchange);
+};
+
+export const exitFullScreen = (): void => {
+  const doc = document as any;
+  if (doc.exitFullscreen) {
+    doc.exitFullscreen();
+  } else if (doc.webkitExitFullscreen) {
+    doc.webkitExitFullscreen();
+  } else if (doc.msExitFullscreen) {
+    doc.msExitFullscreen();
+  }
+  initClose();
+};

package/actions/initLightBox.ts

@@ -0,0 +1,13 @@
+import initOpen from './initOpen';
+import { Ref } from '../types/ref';
+
+const initLightBox = (ref: Ref): void => {
+  ref.list.forEach((item, index) => {
+    item.dataset.index = String(index);
+    item.addEventListener('click', () => {
+      initOpen(ref, index);
+    });
+  });
+};
+
+export default initLightBox;

package/actions/initMagnifier.ts

@@ -0,0 +1,53 @@
+import { Ref } from '../types/ref';
+
+const initMagnifier = (ref: Ref, images?: HTMLImageElement[]): void => {
+  const params = ref.currentParams.magnifier!;
+  const targets = images ?? ref.list;
+
+  targets.forEach((item) => {
+    item.classList.add('gs-zoom-magnifier-instance');
+
+    item.onmouseenter = (e: MouseEvent) => {
+      const $magnifier = document.createElement('div');
+      $magnifier.dataset.type = params.form;
+
+      const $img = document.createElement('img');
+      $img.src = 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);
+
+      $magnifier.style.width = `${params.size}px`;
+      $magnifier.style.top = `${e.clientY - params.size / 2}px`;
+      $magnifier.style.left = `${e.clientX - params.size / 2}px`;
+
+      ref.$magnifier = $magnifier;
+      ref.$img = $img;
+      document.querySelector('body')!.append($magnifier);
+    };
+
+    item.onmousemove = (e: MouseEvent) => {
+      const $img = ref.$img!;
+      const imgRect = item.getBoundingClientRect();
+      const distanceFromTop = e.clientY - imgRect.top;
+      const distanceFromLeft = e.clientX - imgRect.left;
+      const $magnifier = ref.$magnifier!;
+
+      $magnifier.style.top = `${e.clientY - params.size / 2}px`;
+      $magnifier.style.left = `${e.clientX - params.size / 2}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 = () => {
+      ref.$magnifier?.remove();
+    };
+  });
+};
+
+export default initMagnifier;

package/actions/initNavigateWithKeys.ts

@@ -0,0 +1,22 @@
+import initChange from './initChange';
+import { Ref } from '../types/ref';
+
+const initNavigateWithKeys = (ref: Ref): void => {
+  const params = ref.currentParams;
+
+  if (params.navigateWithKeys && ref.list.length > 1) {
+    document.onkeyup = (e: KeyboardEvent) => {
+      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;

package/actions/initOpen.ts

@@ -0,0 +1,29 @@
+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';
+import { Ref } from '../types/ref';
+
+const initOpen = (ref: Ref, index: number): void => {
+  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;

package/actions/initWheel.ts

@@ -0,0 +1,44 @@
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import initAdjust from './initAdjust';
+import setStyles from './setStyles';
+import { Ref } from '../types/ref';
+
+const initWheel = (ref: Ref, index: number): void => {
+  const params = ref.currentParams;
+  const $container = ref.$container!;
+  const item = ref.$imgList!.querySelector(
+    `.gs-zoom-main-img[data-index='${index}']`,
+  ) as HTMLElement;
+
+  if (item != null && params.zoomOnWheel) {
+    item.addEventListener('wheel', function (e: WheelEvent) {
+      const $img = this.querySelector('.gs-zoom-img') as HTMLElement;
+      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;

package/actions/setStyles.ts

@@ -0,0 +1,28 @@
+import { stopAutoplay } from './initAutoplay';
+import { Ref } from '../types/ref';
+
+const setStyles = (ref: Ref, $img: HTMLElement, styles: Record<string, string>): void => {
+  const $container = ref.$container!;
+
+  for (const style in styles) {
+    ($img.style as any)[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;

package/components/GSZoom.tsx

@@ -0,0 +1,178 @@
+import React, { 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';
+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;
+}
+
+const GSZoom: React.FC<GSZoomProps> = ({ children, ...rest }) => {
+  const params: GSZoomProps = { ...rest };
+  const [componentKey, setComponentKey] = useState<string | null>(null);
+  const [indexes, setIndexes] = useState<number[]>([]);
+  const zoomRef = useRef<HTMLDivElement | null>(null);
+  const singleImageRef = useRef<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    if (componentKey != null) {
+      // Initialise the global registry once
+      if (typeof window.GSZoomConfigue === 'undefined') {
+        window.GSZoomConfigue = {
+          references: [],
+          openedZoom: undefined,
+          instance: (ref: string) => {
+            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 as 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<HTMLImageElement>('img')];
+        const newIndexes: number[] = [];
+
+        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 (
+    <>
+      {params.src != undefined && params.src !== '' ? (
+        <img
+          ref={singleImageRef}
+          {...(indexes[0] !== undefined ? { 'data-index': indexes[0] } : {})}
+          {...domProps}
+          src={params.src}
+        />
+      ) : (
+        <div className="gs-zoom-collection" ref={zoomRef}>
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+GSZoom.displayName = 'GSZoom';
+
+export default GSZoom;