TaroTime/app/ui-tarot-lightbox.js

(function () {
  "use strict";

  let overlayEl = null;
  let imageEl = null;
  let zoomed = false;

  const LIGHTBOX_ZOOM_SCALE = 6.66;

  function resetZoom() {
    if (!imageEl) {
      return;
    }

    zoomed = false;
    imageEl.style.transform = "scale(1)";
    imageEl.style.transformOrigin = "center center";
    imageEl.style.cursor = "zoom-in";
  }

  function updateZoomOrigin(clientX, clientY) {
    if (!zoomed || !imageEl) {
      return;
    }

    const rect = imageEl.getBoundingClientRect();
    if (!rect.width || !rect.height) {
      return;
    }

    const x = Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100));
    const y = Math.min(100, Math.max(0, ((clientY - rect.top) / rect.height) * 100));
    imageEl.style.transformOrigin = `${x}% ${y}%`;
  }

  function isPointOnCard(clientX, clientY) {
    if (!imageEl) {
      return false;
    }

    const rect = imageEl.getBoundingClientRect();
    const naturalWidth = imageEl.naturalWidth;
    const naturalHeight = imageEl.naturalHeight;

    if (!rect.width || !rect.height || !naturalWidth || !naturalHeight) {
      return true;
    }

    const frameAspect = rect.width / rect.height;
    const imageAspect = naturalWidth / naturalHeight;

    let renderWidth = rect.width;
    let renderHeight = rect.height;
    if (imageAspect > frameAspect) {
      renderHeight = rect.width / imageAspect;
    } else {
      renderWidth = rect.height * imageAspect;
    }

    const left = rect.left + (rect.width - renderWidth) / 2;
    const top = rect.top + (rect.height - renderHeight) / 2;
    const right = left + renderWidth;
    const bottom = top + renderHeight;

    return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
  }

  function ensure() {
    if (overlayEl && imageEl) {
      return;
    }

    overlayEl = document.createElement("div");
    overlayEl.setAttribute("aria-hidden", "true");
    overlayEl.style.position = "fixed";
    overlayEl.style.inset = "0";
    overlayEl.style.background = "rgba(0, 0, 0, 0.82)";
    overlayEl.style.display = "none";
    overlayEl.style.alignItems = "center";
    overlayEl.style.justifyContent = "center";
    overlayEl.style.zIndex = "9999";
    overlayEl.style.padding = "0";

    imageEl = document.createElement("img");
    imageEl.alt = "Tarot card enlarged image";
    imageEl.style.maxWidth = "100vw";
    imageEl.style.maxHeight = "100vh";
    imageEl.style.width = "100vw";
    imageEl.style.height = "100vh";
    imageEl.style.objectFit = "contain";
    imageEl.style.borderRadius = "0";
    imageEl.style.boxShadow = "none";
    imageEl.style.border = "none";
    imageEl.style.cursor = "zoom-in";
    imageEl.style.transform = "scale(1)";
    imageEl.style.transformOrigin = "center center";
    imageEl.style.transition = "transform 120ms ease-out";
    imageEl.style.userSelect = "none";

    overlayEl.appendChild(imageEl);

    const close = () => {
      if (!overlayEl || !imageEl) {
        return;
      }
      overlayEl.style.display = "none";
      overlayEl.setAttribute("aria-hidden", "true");
      imageEl.removeAttribute("src");
      resetZoom();
    };

    overlayEl.addEventListener("click", (event) => {
      if (event.target === overlayEl) {
        close();
      }
    });

    imageEl.addEventListener("click", (event) => {
      event.stopPropagation();
      if (!isPointOnCard(event.clientX, event.clientY)) {
        close();
        return;
      }

      if (!zoomed) {
        zoomed = true;
        imageEl.style.transform = `scale(${LIGHTBOX_ZOOM_SCALE})`;
        imageEl.style.cursor = "zoom-out";
        updateZoomOrigin(event.clientX, event.clientY);
        return;
      }

      resetZoom();
    });

    imageEl.addEventListener("mousemove", (event) => {
      updateZoomOrigin(event.clientX, event.clientY);
    });

    imageEl.addEventListener("mouseleave", () => {
      if (zoomed) {
        imageEl.style.transformOrigin = "center center";
      }
    });

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        close();
      }
    });

    document.body.appendChild(overlayEl);
  }

  function open(src, altText) {
    if (!src) {
      return;
    }

    ensure();
    if (!overlayEl || !imageEl) {
      return;
    }

    imageEl.src = src;
    imageEl.alt = altText || "Tarot card enlarged image";
    resetZoom();
    overlayEl.style.display = "flex";
    overlayEl.setAttribute("aria-hidden", "false");
  }

  window.TarotUiLightbox = {
    ...(window.TarotUiLightbox || {}),
    open
  };
})();