@zoom-image/core/dist/createZoomImageClick.global.js

A core implementation of zoom image

var ZoomImage = (function (exports) {
  'use strict';

  // ../../node_modules/.pnpm/@namnode+store@0.1.0/node_modules/@namnode/store/dist/chunk-TZNK2OF3.mjs
  function f(o) {
    let r = /* @__PURE__ */ new Set(), s = false, a = o, e, c = (t = {}) => {
      e = { ...e, ...t }, i();
    }, i = () => {
      if (s)
        return;
      let t = false;
      if (e) {
        for (let n in e)
          if (a[n] !== e[n]) {
            t = true;
            break;
          }
      }
      t && (a = { ...a, ...e }, r.forEach((n) => n({ state: a, updatedProperties: e })), e = void 0);
    };
    return { subscribe: (t) => (r.add(t), () => {
      r.delete(t);
    }), cleanup: () => r.clear(), getState: () => a, setState: c, batch: (t) => {
      s = true, t(), s = false, i();
    } };
  }

  // src/imageLoader.ts
  var THRESHOLD = 50;
  var makeImageLoader = () => {
    const createZoomImage = (img, src, store) => {
      if (img.src === src)
        return;
      img.src = src;
      let complete = false;
      img.onload = () => {
        complete = true;
        store.setState({ zoomedImgStatus: "loaded" });
      };
      img.onerror = () => {
        complete = true;
        store.setState({ zoomedImgStatus: "error" });
      };
      setTimeout(() => {
        if (!complete)
          store.setState({ zoomedImgStatus: "loading" });
      }, THRESHOLD);
    };
    return {
      createZoomImage
    };
  };
  var imageLoader = makeImageLoader();

  // src/utils.ts
  function noop() {
  }
  function preventDefault(event) {
    event.preventDefault();
  }
  var keySet = /* @__PURE__ */ new Set(["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"]);
  function preventDefaultForScrollKeys(event) {
    if (keySet.has(event.key)) {
      preventDefault(event);
      return false;
    }
  }
  var controller = new AbortController();
  var signal = controller.signal;
  function disableScroll() {
    window.addEventListener("DOMMouseScroll", preventDefault, { signal });
    window.addEventListener("wheel", preventDefault, { passive: false, signal });
    window.addEventListener("touchmove", preventDefault, { passive: false, signal });
    window.addEventListener("keydown", preventDefaultForScrollKeys, { signal });
  }
  function enableScroll() {
    controller?.abort();
  }
  function getSourceImage(container) {
    if (!container) {
      throw new Error("Please specify a container for the zoom image");
    }
    const sourceImgElement = container.querySelector("img");
    if (!sourceImgElement) {
      throw new Error("Please place an image inside the container");
    }
    return sourceImgElement;
  }

  // src/createZoomImageClick.ts
  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 = f({
      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 controller2 = new AbortController();
    const { signal: signal2 } = controller2;
    container.addEventListener("pointerdown", handlePointerDown, { signal: signal2 });
    container.addEventListener("pointerenter", disableScrollLock ? noop : disableScroll, { signal: signal2 });
    container.addEventListener("pointerleave", disableScrollLock ? noop : enableScroll, { signal: signal2 });
    container.addEventListener("pointermove", handlePointerMove, { signal: signal2 });
    container.addEventListener("touchend", enableScroll, { signal: signal2 });
    return {
      cleanup: () => {
        controller2.abort();
        container.contains(zoomedImg) && container.removeChild(zoomedImg);
        store.cleanup();
      },
      subscribe: store.subscribe,
      getState: store.getState
    };
  }

  exports.createZoomImageClick = createZoomImageClick;

  return exports;

})({});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=createZoomImageClick.global.js.map