@get-set/gs-zoom 0.0.4 → 0.0.6

package/README.md

@@ -1 +1,129 @@
-# Get-Set Zoom
+# Get-Set Zoom
+
+A lightbox & magnifier zoom plugin with drag, pinch, autoplay, fullscreen and keyboard navigation.  
+One codebase — builds both a **vanilla JS bundle** and a **React component**.
+
+---
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+| Command              | Output                        | Use for           |
+|----------------------|-------------------------------|-------------------|
+| `npm run build`      | both outputs below            | everything        |
+| `npm run build:js`   | `dist-js/bundle.js`           | vanilla JS / CDN  |
+| `npm run build:react`| `dist/components/GSZoom.js`   | React / npm       |
+
+---
+
+## Vanilla JS
+
+```html
+<link rel="stylesheet" href="dist-js/GSZoom.css" />
+<script src="dist-js/bundle.js"></script>
+
+<!-- Lightbox on a collection -->
+<div class="gallery">
+  <img src="photo1.jpg" data-gstitle="Photo 1" />
+  <img src="photo2.jpg" />
+</div>
+
+<script>
+  new GSZoom(document.querySelectorAll('.gallery img'), {
+    type: 'lightbox',
+    arrows: true,
+    navigateWithKeys: true,
+    maxZoom: 5,
+    autoplaySpeed: 4000,
+    responsive: [
+      { windowSize: 768, params: { arrows: false } },
+    ],
+    afterLightBoxOpen: () => console.log('opened'),
+  });
+</script>
+```
+
+jQuery and `HTMLElement.prototype` shortcuts are also available:
+
+```js
+// jQuery
+$('.gallery img').GSZoom({ type: 'lightbox' });
+
+// Prototype
+document.querySelector('img').GSZoom({ type: 'magnifier' });
+```
+
+---
+
+## React
+
+The CSS is injected automatically when the component mounts — no manual stylesheet import needed.
+
+```jsx
+import GSZoom from '@get-set/gs-zoom';
+
+// Lightbox — collection mode (wrap multiple images)
+<GSZoom type="lightbox" arrows navigateWithKeys maxZoom={5}>
+  <img src="photo1.jpg" data-gstitle="Photo one" data-gssubtitle="Subtitle" />
+  <img src="photo2.jpg" />
+</GSZoom>
+
+// Lightbox — single image mode
+<GSZoom type="lightbox" src="photo1.jpg" data-gstitle="Photo one" />
+
+// Magnifier
+<GSZoom
+  type="magnifier"
+  src="product.jpg"
+  magnifier={{ zoom: 4, form: 'circle', size: 180 }}
+/>
+```
+
+---
+
+## Parameters
+
+| Param                           | Type                    | Default       | Description                                      |
+|---------------------------------|-------------------------|---------------|--------------------------------------------------|
+| `reference`                     | `string`                | auto          | Unique key. Auto-generated if omitted.           |
+| `type`                          | `'lightbox'\|'magnifier'` | `'lightbox'` | Plugin mode.                                    |
+| `arrows`                        | `boolean`               | `true`        | Show prev/next arrow buttons.                    |
+| `navigateWithKeys`              | `boolean`               | `true`        | Enable ← → keyboard navigation.                 |
+| `showAdditionals`               | `boolean`               | `true`        | Show thumbnail strip in lightbox.                |
+| `zoomOnWheel`                   | `boolean`               | `true`        | Zoom with mouse wheel.                           |
+| `maxZoom`                       | `number`                | `5`           | Maximum zoom multiplier.                         |
+| `disableFullScreen`             | `boolean`               | `false`       | Prevent fullscreen API call on open.             |
+| `imgLoading`                    | `string`                | `''`          | HTML string shown while image loads.             |
+| `autoplaySpeed`                 | `number`                | `5000`        | Autoplay interval in ms.                         |
+| `mainImageQueryParameters`      | `string`                | `''`          | Query string appended to main image src.         |
+| `additionalImageQueryParameters`| `string`                | `''`          | Query string appended to thumbnail src.          |
+| `magnifier`                     | `MagnifierParams`       | see below     | Magnifier mode settings.                         |
+| `responsive`                    | `ResponsiveOption[]`    | `[]`          | Breakpoint overrides (sorted automatically).     |
+| `beforeInit`                    | `() => void`            | —             | Callback before plugin initialises.              |
+| `afterInit`                     | `() => void`            | —             | Callback after plugin initialises.               |
+| `beforeLightBoxOpen`            | `() => void`            | —             | Callback before lightbox opens.                  |
+| `afterLightBoxOpen`             | `() => void`            | —             | Callback after lightbox opens.                   |
+| `beforeLightBoxClose`           | `() => void`            | —             | Callback before lightbox closes.                 |
+| `afterLightBoxClose`            | `() => void`            | —             | Callback after lightbox closes.                  |
+| `afterChange`                   | `() => void`            | —             | Callback after slide changes.                    |
+
+### MagnifierParams
+
+| Prop   | Type               | Default    | Description                   |
+|--------|--------------------|------------|-------------------------------|
+| `zoom` | `number`           | `3`        | Zoom multiplier inside lens.  |
+| `form` | `'circle'\|'square'` | `'circle'` | Shape of the magnifier lens. |
+| `size` | `number`           | `150`      | Lens diameter/side in px.     |
+
+### Image data attributes
+
+| Attribute          | Description                                  |
+|--------------------|----------------------------------------------|
+| `data-gstitle`     | Title text shown below the image in lightbox.|
+| `data-gssubtitle`  | Subtitle text.                               |
+| `data-gsdescription` | Description text.                          |
+| `data-gszoomsrc`   | Alternative high-res src for the magnifier.  |

package/actions/general.ts

@@ -0,0 +1,29 @@
+import initClose from './initClose';
+
+export const getScale = (element: HTMLElement): number => {
+  const style = window.getComputedStyle(element);
+  const transform = style.transform;
+
+  if (transform !== 'none') {
+    const values = transform.match(/matrix.*\((.+)\)/)?.[1].split(', ');
+    if (values) {
+      return parseFloat(values[0]);
+    }
+  }
+  return 1;
+};
+
+export const getTranslateCoord = (element: HTMLElement): { x: number; y: number } => {
+  const style = window.getComputedStyle(element);
+  const matrix = new DOMMatrix(style.transform);
+  return {
+    x: matrix.e,
+    y: matrix.f,
+  };
+};
+
+export const fullscreenchange = (): void => {
+  if (!document.fullscreenElement) {
+    initClose();
+  }
+};

package/actions/getAdjustTransform.ts

@@ -0,0 +1,46 @@
+const getAdjustTransform = (
+  scale: number,
+  translatex: number,
+  translatey: number,
+  $img: HTMLElement,
+  $container: HTMLElement,
+): [number, number] => {
+  const actualWidth = $img.clientWidth * scale;
+  const actualHeight = $img.clientHeight * scale;
+  const containerWidth = $container.clientWidth;
+  const containerHeight = $container.clientHeight;
+  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) {
+      newTranslateXValue = 0;
+    }
+  } else {
+    if (translatex > maxTranslateXValue) {
+      newTranslateXValue = maxTranslateXValue / scale;
+    } else if (translatex < minTranslateXValue) {
+      newTranslateXValue = minTranslateXValue / scale;
+    }
+  }
+
+  if (actualHeight <= containerHeight) {
+    if (translatey !== 0) {
+      newTranslateYValue = 0;
+    }
+  } else {
+    if (translatey > maxTranslateYValue) {
+      newTranslateYValue = maxTranslateYValue / scale;
+    } else if (translatey < minTranslateYValue) {
+      newTranslateYValue = minTranslateYValue / scale;
+    }
+  }
+
+  return [newTranslateXValue, newTranslateYValue];
+};
+
+export default getAdjustTransform;

package/actions/getCurrentParams.ts

@@ -0,0 +1,42 @@
+import _defaultParams from '../constants/defaultParams';
+import magnifierDefaultProps from '../constants/magnifierDefaultProps';
+import { Params } from '../types/params';
+
+const getCurrentParams = (params: Params): Params => {
+  const defaultParams: Params = { ..._defaultParams };
+  let finalParams: Params = {
+    ...defaultParams,
+    ...params,
+  };
+
+  if (finalParams.responsive && finalParams.responsive.length > 0) {
+    finalParams.responsive.sort((a, b) => b.windowSize - a.windowSize);
+  }
+
+  if (finalParams.responsive && finalParams.responsive.length > 0) {
+    const windowSize = window.innerWidth;
+    const availableResponsives = finalParams.responsive.filter(
+      (resp) => resp.windowSize >= windowSize,
+    );
+
+    availableResponsives.forEach((resp) => {
+      finalParams = {
+        ...finalParams,
+        ...resp.params,
+        magnifier: {
+          ...magnifierDefaultProps,
+          ...resp.magnifier,
+        },
+      };
+    });
+  } else {
+    finalParams.magnifier = {
+      ...magnifierDefaultProps,
+      ...finalParams.magnifier,
+    };
+  }
+
+  return finalParams;
+};
+
+export default getCurrentParams;

package/actions/getTranslateCoordToPoint.ts

@@ -0,0 +1,37 @@
+import { getTranslateCoord } from './general';
+
+const getTranslateCoordToPoint = (
+  $img: HTMLElement,
+  $container: HTMLElement,
+  scale: number,
+  newScale: number,
+  clientX: number,
+  clientY: number,
+): [number, number] => {
+  const coords = getTranslateCoord($img);
+  const translatex = coords.x;
+  const translatey = coords.y;
+  const actualWidth = $img.clientWidth * scale;
+  const actualHeight = $img.clientHeight * scale;
+  const containerWidth = $container.clientWidth;
+  const containerHeight = $container.clientHeight;
+
+  const mouseDirectionY =
+    (clientY - (containerHeight - actualHeight) / 2 - translatey) / actualHeight;
+  const mouseDirectionX =
+    (clientX - (containerWidth - actualWidth) / 2 - translatex) / actualWidth;
+
+  const newActualWidth = (actualWidth * newScale) / scale;
+  const newActualHeight = (actualHeight * newScale) / scale;
+
+  const newTranslatex =
+    (newActualWidth - containerWidth) / 2 -
+    (newActualWidth * mouseDirectionX - clientX);
+  const newTranslatey =
+    (newActualHeight - containerHeight) / 2 -
+    (newActualHeight * mouseDirectionY - clientY);
+
+  return [newTranslatex, newTranslatey];
+};
+
+export default getTranslateCoordToPoint;

package/actions/init.ts

@@ -0,0 +1,25 @@
+import types from '../constants/types';
+import initLightBox from './initLightBox';
+import initMagnifier from './initMagnifier';
+import { Ref } from '../types/ref';
+
+const init = (ref: Ref): void => {
+  if (typeof ref.currentParams.beforeInit === 'function') {
+    ref.currentParams.beforeInit();
+  }
+
+  switch (ref.currentParams.type) {
+    case types.lightbox:
+      initLightBox(ref);
+      break;
+    case types.magnifier:
+      initMagnifier(ref);
+      break;
+  }
+
+  if (typeof ref.currentParams.afterInit === 'function') {
+    ref.currentParams.afterInit();
+  }
+};
+
+export default init;

package/actions/initActionEvents.ts

@@ -0,0 +1,102 @@
+import icons from '../constants/icons';
+import getAdjustTransform from './getAdjustTransform';
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import { initAutoplay, stopAutoplay } from './initAutoplay';
+import { exitFullScreen } from './initFullScreen';
+import setStyles from './setStyles';
+import { Ref } from '../types/ref';
+
+const initActionEvents = (ref: Ref): void => {
+  const params = ref.currentParams;
+  const $container = ref.$container!;
+  const $btnAdditionals = ref.$btnAdditionals;
+  const $btnAutoplay = ref.$btnAutoplay;
+  const $btnClose = ref.$btnClose;
+  const $btnZoomIn = ref.$btnZoomIn;
+  const $btnZoomOut = ref.$btnZoomOut;
+
+  if ($btnAdditionals != null) {
+    $btnAdditionals.addEventListener('click', () => {
+      $container
+        .querySelector('.gs-zoom-additionals')
+        ?.classList.toggle('gs-zoom-hidden');
+    });
+  }
+
+  if ($btnAutoplay != null) {
+    $btnAutoplay.addEventListener('click', () => {
+      if (ref.autoplay === undefined) {
+        initAutoplay(ref);
+        $btnAutoplay.innerHTML = icons.autoplayPause;
+      } else {
+        stopAutoplay(ref);
+      }
+    });
+  }
+
+  if ($btnClose != null) {
+    $btnClose.addEventListener('click', () => {
+      exitFullScreen();
+    });
+  }
+
+  if ($btnZoomIn != null) {
+    $btnZoomIn.addEventListener('click', () => {
+      const $img = ref.$img!;
+      const scale =
+        $img.dataset.scale !== undefined ? parseFloat($img.dataset.scale) : 1;
+
+      if (scale < params.maxZoom!) {
+        clearTimeout(ref.zoomButtonTimeout);
+        const newScale = Math.min(scale + 0.4, params.maxZoom!);
+        $img.dataset.scale = String(newScale);
+        let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+          $img, $container, scale, newScale,
+          $container.clientWidth / 2,
+          $container.clientHeight / 2,
+        );
+        [newTranslatex, newTranslatey] = getAdjustTransform(
+          newScale, newTranslatex, newTranslatey, $img, $container,
+        );
+        setStyles(ref, $img, {
+          transition: '.3s ease-in-out',
+          transform: `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`,
+        });
+        ref.zoomButtonTimeout = setTimeout(() => {
+          setStyles(ref, $img, { transition: 'unset' });
+        }, 300);
+      }
+    });
+  }
+
+  if ($btnZoomOut != null) {
+    $btnZoomOut.addEventListener('click', () => {
+      const $img = ref.$img!;
+      const scale =
+        $img.dataset.scale !== undefined ? parseFloat($img.dataset.scale) : 1;
+
+      if (scale > 1) {
+        clearTimeout(ref.zoomButtonTimeout);
+        const newScale = Math.max(1, scale - 0.4);
+        $img.dataset.scale = String(newScale);
+        let [newTranslatex, newTranslatey] = getTranslateCoordToPoint(
+          $img, $container, scale, newScale,
+          $container.clientWidth / 2,
+          $container.clientHeight / 2,
+        );
+        [newTranslatex, newTranslatey] = getAdjustTransform(
+          newScale, newTranslatex, newTranslatey, $img, $container,
+        );
+        setStyles(ref, $img, {
+          transition: '.3s ease-in-out',
+          transform: `scale(${newScale}) translate(${newTranslatex}px, ${newTranslatey}px)`,
+        });
+        ref.zoomButtonTimeout = setTimeout(() => {
+          setStyles(ref, $img, { transition: 'unset' });
+        }, 300);
+      }
+    });
+  }
+};
+
+export default initActionEvents;

package/actions/initAdditionals.ts

@@ -0,0 +1,91 @@
+import { getTranslateCoord } from './general';
+import initChange from './initChange';
+import { Ref } from '../types/ref';
+
+const initAdditionals = (ref: Ref): void => {
+  const params = ref.currentParams;
+
+  if (params.showAdditionals && ref.list.length > 1) {
+    const $container = ref.$container!;
+    const $addContainer = document.createElement('div');
+    const $addList = document.createElement('div');
+    const $addListContainer = document.createElement('div');
+
+    $addContainer.classList.add('gs-zoom-additionals', 'gs-zoom-hide-inzoomed', 'gs-zoom-hidden');
+    $addListContainer.classList.add('gs-add-list-container');
+    $addList.classList.add('gs-add-list');
+    $addList.style.transform = 'translateX(0px)';
+
+    ref.list.forEach((el, index) => {
+      const $item = document.createElement('div');
+      $item.dataset.index = String(index);
+      if (index === ref.currentIndex) {
+        $item.classList.add('active');
+      }
+      const $itemImg = document.createElement('img');
+      $itemImg.src = el.src.split('?')[0] + params.additionalImageQueryParameters;
+      $itemImg.onload = () => {
+        $item.classList.remove('gz-zoom-is-loading');
+      };
+      $item.classList.add('gs-add-item', 'gz-zoom-is-loading');
+      $item.append($itemImg);
+      $addList.append($item);
+      $item.addEventListener('click', () => {
+        initChange(ref, index);
+      });
+    });
+
+    $addListContainer.append($addList);
+    $addContainer.append($addListContainer);
+    $container.append($addContainer);
+
+    const clampTranslate = () => {
+      const translate = getTranslateCoord($addList).x;
+      if (translate > 0) {
+        $addList.style.transform = 'translateX(0px)';
+      } else if (translate < $container.clientWidth - $addList.clientWidth) {
+        $addList.style.transform = `translateX(${$container.clientWidth - $addList.clientWidth}px)`;
+      }
+    };
+
+    $addList.ontouchstart = $addList.onmousedown = (e: MouseEvent | TouchEvent) => {
+      if ($addList.clientWidth > $container.clientWidth) {
+        const te = e as TouchEvent;
+        window.initX =
+          te.targetTouches?.length > 0 ? te.targetTouches[0].clientX : (e as MouseEvent).clientX;
+        window.initListTranslateX = getTranslateCoord($addList).x;
+        $container.classList.add('gs-additional-isdragging');
+      }
+    };
+
+    $container.addEventListener('touchmove', (e: TouchEvent) => {
+      if ($container.classList.contains('gs-additional-isdragging')) {
+        window.clientX = e.targetTouches[0].clientX;
+        $addList.style.transform = `translateX(${window.initListTranslateX + (window.clientX - window.initX)}px)`;
+      }
+    });
+
+    $container.addEventListener('mousemove', (e: MouseEvent) => {
+      if (
+        $container.classList.contains('gs-additional-isdragging') &&
+        $addList.clientWidth > $container.clientWidth
+      ) {
+        window.clientX = e.clientX;
+        $addList.style.transform = `translateX(${window.initListTranslateX + (window.clientX - window.initX)}px)`;
+      }
+    });
+
+    const onDragEnd = () => {
+      if ($container.classList.contains('gs-additional-isdragging')) {
+        $container.classList.remove('gs-additional-isdragging');
+        clampTranslate();
+      }
+    };
+
+    $container.addEventListener('mouseleave', onDragEnd);
+    $container.addEventListener('mouseup', onDragEnd);
+    $container.addEventListener('touchend', onDragEnd);
+  }
+};
+
+export default initAdditionals;

package/actions/initAdjust.ts

@@ -0,0 +1,120 @@
+import { getTranslateCoord } from './general';
+import getAdjustTransform from './getAdjustTransform';
+import getTranslateCoordToPoint from './getTranslateCoordToPoint';
+import setStyles from './setStyles';
+import { Ref } from '../types/ref';
+
+const initAdjust = (
+  ref: Ref,
+  $container: HTMLElement,
+  $img: HTMLElement,
+  withAnimation: boolean = true,
+): void => {
+  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 = String(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 (translatey !== 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 = String(newTranslateXValue * scale);
+      $img.dataset.translatey = String(newTranslateYValue * scale);
+      if (withAnimation) {
+        setTimeout(() => {
+          $img.classList.remove('gs-zoom-is-adjusting');
+        }, 400);
+      }
+    }
+  }
+};
+
+export default initAdjust;

package/actions/initAdjustAdditionalActive.ts

@@ -0,0 +1,31 @@
+import { getTranslateCoord } from './general';
+import { Ref } from '../types/ref';
+
+const initAdjustAdditionalActive = (ref: Ref): void => {
+  if (ref.currentParams.showAdditionals && ref.list.length > 1) {
+    const $container = ref.$container!;
+    const $active = $container.querySelector('.gs-add-list .gs-add-item.active') as HTMLElement;
+
+    if ($active != null) {
+      const $list = $container.querySelector('.gs-add-list') as HTMLElement;
+      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;