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

A core implementation of zoom image

'use strict';

var store = require('@namnode/store');

// src/createZoomImageClick.ts

// 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$1 = 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$1);
    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$1.cleanup();
    },
    subscribe: store$1.subscribe,
    getState: store$1.getState
  };
}

exports.createZoomImageClick = createZoomImageClick;
//# sourceMappingURL=out.js.map
//# sourceMappingURL=createZoomImageClick.js.map