@michaelyagi/shoji 0.1.0-beta.14 → 0.1.0-beta.16

package/dist/core/shoji-core.js

@@ -542,14 +542,34 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return origin.getBoundingClientRect();
   }
-  function computeTransform(origin, target, aspectRatio, naturalSize) {
+  const ASPECT_MISMATCH_THRESHOLD = 2;
+  function hasRealTargetContent(target) {
+    const child = target.firstElementChild;
+    const isPlaceholder = child instanceof HTMLElement && (child.classList.contains("shoji-slide-spinner") || child.classList.contains("shoji-slide-open-placeholder"));
+    if (!(child instanceof HTMLElement) || isPlaceholder) return false;
+    const rect = child.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  }
+  function computeTransformOutcome(origin, target, aspectRatio, naturalSize) {
     const originRect = effectiveOriginBox(origin);
     const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
     if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
-      return null;
+      return { kind: "none" };
+    }
+    const transform = transformBetween(targetRect, originRect);
+    const unknownTargetSize = !naturalSize && !hasRealTargetContent(target);
+    if (unknownTargetSize) {
+      return { kind: "fade", transform };
+    }
+    const originRatio = originRect.width / originRect.height;
+    const targetRatio = targetRect.width / targetRect.height;
+    const ratioOfRatios = Math.max(originRatio, targetRatio) / Math.min(originRatio, targetRatio);
+    if (ratioOfRatios > ASPECT_MISMATCH_THRESHOLD) {
+      return { kind: "fade", transform };
     }
-    return transformBetween(targetRect, originRect);
+    return { kind: "zoom", transform };
   }
+  const FADE_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-duration) var(--shoji-easing)";
   function waitForTransitionEnd(target, cb, property = "transform") {
     const durationMs = parseCssTime$1(getComputedStyle(target).transitionDuration);
     let done = false;
@@ -574,15 +594,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function zoomIn({ origin, target, aspectRatio, naturalSize }) {
     if (prefersReducedMotion$1()) return;
-    const transform = computeTransform(origin, target, aspectRatio, naturalSize);
-    if (!transform) return;
+    const outcome = computeTransformOutcome(origin, target, aspectRatio, naturalSize);
+    if (outcome.kind === "none") return;
+    const { transform } = outcome;
+    const isFade = outcome.kind === "fade";
     target.style.transition = "none";
     target.style.transformOrigin = "center";
-    target.style.willChange = "transform";
+    target.style.willChange = isFade ? "transform, opacity" : "transform";
     target.style.transform = transform;
+    if (isFade) target.style.opacity = "0";
     void target.offsetHeight;
-    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     target.style.transform = "none";
+    if (isFade) target.style.opacity = "1";
     waitForTransitionEnd(target, () => clearInlineTransform$1(target, "none"));
   }
   function zoomOut({ origin, target, aspectRatio, naturalSize, dragStart, zoomStart }, onComplete) {
@@ -590,13 +614,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onComplete();
       return;
     }
-    const transform = computeTransform(origin, target, aspectRatio, naturalSize);
-    if (!transform) {
+    const outcome = computeTransformOutcome(origin, target, aspectRatio, naturalSize);
+    if (outcome.kind === "none") {
       onComplete();
       return;
     }
+    const { transform } = outcome;
+    const isFade = outcome.kind === "fade";
     target.style.transformOrigin = "center";
-    target.style.willChange = "transform";
+    target.style.willChange = isFade ? "transform, opacity" : "transform";
     if (dragStart) {
       target.style.transition = "none";
       target.style.transform = `translate3d(0px, ${dragStart.translateY}px, 0px) scale3d(${dragStart.scale}, ${dragStart.scale}, 1)`;
@@ -612,9 +638,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         void target.offsetHeight;
       }
     }
-    target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     void target.offsetHeight;
     target.style.transform = transform;
+    if (isFade) target.style.opacity = "0";
     const appliedTransform = target.style.transform;
     waitForTransitionEnd(target, () => {
       clearInlineTransform$1(target, appliedTransform);
@@ -831,7 +858,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const n = Number(raw);
     return Number.isFinite(n) ? n : void 0;
   }
-  const NO_OWN_DATA_FIELD = /* @__PURE__ */ new Set(["no-drag", "video-id", "video-provider"]);
+  const NO_OWN_DATA_FIELD = /* @__PURE__ */ new Set([
+    "no-drag",
+    "video-id",
+    "video-provider",
+    "thumbnail-width",
+    "thumbnail-height"
+  ]);
   function applyCommon(element, item, src) {
     const caption = attr(element, "data-shoji-caption");
     if (caption) item.caption = caption;
@@ -857,6 +890,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (width !== void 0) item.width = width;
     const height = numAttr(element, "data-shoji-height");
     if (height !== void 0) item.height = height;
+    const thumbnailWidth = numAttr(element, "data-shoji-thumbnail-width");
+    if (thumbnailWidth !== void 0) item.thumbnailWidth = thumbnailWidth;
+    const thumbnailHeight = numAttr(element, "data-shoji-thumbnail-height");
+    if (thumbnailHeight !== void 0) item.thumbnailHeight = thumbnailHeight;
     const srcset = attr(element, "data-shoji-srcset");
     if (srcset) item.srcset = srcset;
     const sizes = attr(element, "data-shoji-sizes");
@@ -2943,7 +2980,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.focusTrap.activate(this.dom.dialog);
       this.scheduleAutoHide();
       const media = (_b = this.slides) == null ? void 0 : _b.getActiveMedia();
-      if (media && origin && naturalSize) {
+      if (media && origin) {
         zoomIn({
           origin,
           target: media,
@@ -3127,9 +3164,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       (_a = this.dom) == null ? void 0 : _a.dialog.classList.toggle("shoji-controls-hidden-for-drag", hidden);
       this.bus.emit("dragCloseThreshold", { hidden });
     }
-    /** `item.width`/`height`, else origin's `naturalWidth`/`naturalHeight` (accurate when `item.thumb` is unset). Feeds `computeTransform`'s letterbox-aware sizing. */
+    /** `item.thumbnailWidth`/`thumbnailHeight` (the thumbnail's own true shape) first, else `item.width`/`height` (the photo's), else origin's live `naturalWidth`/`naturalHeight`. Shape only — see `resolveNaturalSize` for why the size cap below uses the opposite order. DESIGN.md §2.3b (sixteenth/seventeenth entries). */
     resolveAspectRatio(index, origin) {
       const item = this.itemList[index];
+      if ((item == null ? void 0 : item.thumbnailWidth) && item.thumbnailHeight) {
+        return item.thumbnailWidth / item.thumbnailHeight;
+      }
       if ((item == null ? void 0 : item.width) && item.height) return item.width / item.height;
       const thumbImg = origin == null ? void 0 : origin.querySelector("img");
       if ((thumbImg == null ? void 0 : thumbImg.naturalWidth) && thumbImg.naturalHeight) {
@@ -3137,18 +3177,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return void 0;
     }
-    /**
-     * `item.width`/`height` only — deliberately never a thumbnail's own
-     * `naturalWidth`/`naturalHeight` the way `resolveAspectRatio` above will:
-     * that's a fine stand-in for *shape*, but using it as the real photo's
-     * true pixel size would under-cap a genuinely large photo down to
-     * thumbnail resolution. `undefined` here just means "genuinely unknown,"
-     * not "assume small" — `zoomTransition.ts`'s `containedBox` already
-     * treats it that way (no cap applied at all).
-     */
+    /** `item.width`/`height` (the real photo) first, `item.thumbnailWidth`/`thumbnailHeight` only once that's unknown too — opposite priority from `resolveAspectRatio` on purpose: this only caps the placeholder's *size*, never its shape, so preferring the real (usually larger) photo size is never a distortion risk, and is what lets the placeholder grow to a properly large size instead of the thumbnail's own tiny one. DESIGN.md §2.3b (seventeenth entry) has the real bug this fixed. */
     resolveNaturalSize(index) {
       const item = this.itemList[index];
-      return (item == null ? void 0 : item.width) && item.height ? { width: item.width, height: item.height } : void 0;
+      if ((item == null ? void 0 : item.width) && item.height) return { width: item.width, height: item.height };
+      if ((item == null ? void 0 : item.thumbnailWidth) && item.thumbnailHeight) {
+        return { width: item.thumbnailWidth, height: item.thumbnailHeight };
+      }
+      return void 0;
     }
     /**
      * Idempotent on purpose: a pending zoom-out's `transitionend`/fallback