@zoom-image/core/dist/chunk-2REYVJQJ.mjs

A core implementation of zoom image

import { imageLoader } from './chunk-XAQU5VJO.mjs';
import { getSourceImage, noop, disableScroll, enableScroll } from './chunk-5KET5YPV.mjs';
import { createStore } from '@namnode/store';

function createZoomImageClick(container, options = {}) {
  const sourceImgElement = getSourceImage(container);
  const finalOptions = {
    zoomFactor: options.zoomFactor ?? 4,
    zoomImageSource: options.zoomImageSource ?? sourceImgElement.src,
    disableScrollLock: options.disableScrollLock ?? false
  };
  const { zoomFactor, zoomImageSource, disableScrollLock } = finalOptions;
  let isOnMove = false;
  const store = createStore({
    zoomedImgStatus: "idle"
  });
  const zoomedImgWidth = sourceImgElement.clientWidth * zoomFactor;
  const zoomedImgHeight = sourceImgElement.clientHeight * zoomFactor;
  const zoomedImg = container.appendChild(document.createElement("img"));
  zoomedImg.alt = options.zoomImageProps?.alt || "";
  zoomedImg.style.maxWidth = "none";
  zoomedImg.style.display = "none";
  zoomedImg.style.width = `${zoomedImgWidth}px`;
  zoomedImg.style.height = `${zoomedImgHeight}px`;
  zoomedImg.style.position = "absolute";
  zoomedImg.style.top = "0";
  zoomedImg.style.left = "0";
  function handlePointerMove(event) {
    if (!isOnMove) {
      return;
    }
    processZoom(event);
  }
  const calculatePositionX = (newPositionX) => {
    const width = container.clientWidth;
    if (newPositionX > 0)
      return 0;
    if (newPositionX + width * zoomFactor < width)
      return -width * (zoomFactor - 1);
    return newPositionX;
  };
  const calculatePositionY = (newPositionY) => {
    const height = container.clientHeight;
    if (newPositionY > 0)
      return 0;
    if (newPositionY + height * zoomFactor < height)
      return -height * (zoomFactor - 1);
    return newPositionY;
  };
  function processZoom(event) {
    zoomedImg.style.display = "block";
    imageLoader.createZoomImage(zoomedImg, zoomImageSource, store);
    const containerRect = container.getBoundingClientRect();
    const zoomPointX = event.clientX - containerRect.left;
    const zoomPointY = event.clientY - containerRect.top;
    const currentPositionX = calculatePositionX(-zoomPointX * zoomFactor + zoomPointX);
    const currentPositionY = calculatePositionY(-zoomPointY * zoomFactor + zoomPointY);
    zoomedImg.style.transform = `translate(${currentPositionX}px, ${currentPositionY}px)`;
  }
  function handlePointerDown(event) {
    if (isOnMove) {
      isOnMove = false;
      zoomedImg.style.display = "none";
      return;
    }
    processZoom(event);
    isOnMove = true;
  }
  const controller = new AbortController();
  const { signal } = controller;
  container.addEventListener("pointerdown", handlePointerDown, { signal });
  container.addEventListener("pointerenter", disableScrollLock ? noop : disableScroll, { signal });
  container.addEventListener("pointerleave", disableScrollLock ? noop : enableScroll, { signal });
  container.addEventListener("pointermove", handlePointerMove, { signal });
  container.addEventListener("touchend", enableScroll, { signal });
  return {
    cleanup: () => {
      controller.abort();
      container.contains(zoomedImg) && container.removeChild(zoomedImg);
      store.cleanup();
    },
    subscribe: store.subscribe,
    getState: store.getState
  };
}

export { createZoomImageClick };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=chunk-2REYVJQJ.mjs.map