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

package/dist/core/shoji-core.js

@@ -519,7 +519,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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) {
-      const rect = child.getBoundingClientRect();
+      const measureTarget = child.classList.contains("shoji-slide-provider-video") ? child.querySelector(".shoji-video-mount, iframe") ?? child : child;
+      const rect = measureTarget.getBoundingClientRect();
       if (rect.width > 0 && rect.height > 0) return rect;
     }
     const containerRect = target.getBoundingClientRect();
@@ -528,11 +529,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return containerRect;
   }
-  function transformBetween(from, to) {
+  function transformBetween(pivot, from, to) {
     const scale = Math.min(to.width / from.width, to.height / from.height);
-    const translateX = to.left + to.width / 2 - (from.left + from.width / 2);
-    const translateY = to.top + to.height / 2 - (from.top + from.height / 2);
-    return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;
+    return transformString(pivot, from, to, scale, scale);
+  }
+  function transformBetweenStretch(pivot, from, to) {
+    return transformString(pivot, from, to, to.width / from.width, to.height / from.height);
+  }
+  function transformString(pivot, from, to, scaleX, scaleY) {
+    const pivotX = pivot.left + pivot.width / 2;
+    const pivotY = pivot.top + pivot.height / 2;
+    const fromX = from.left + from.width / 2;
+    const fromY = from.top + from.height / 2;
+    const toX = to.left + to.width / 2;
+    const toY = to.top + to.height / 2;
+    const translateX = toX - pivotX - scaleX * (fromX - pivotX);
+    const translateY = toY - pivotY - scaleY * (fromY - pivotY);
+    return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scaleX}, ${scaleY}, 1)`;
   }
   function effectiveOriginBox(origin) {
     const img = origin.querySelector("img");
@@ -550,26 +563,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const rect = child.getBoundingClientRect();
     return rect.width > 0 && rect.height > 0;
   }
-  function computeTransformOutcome(origin, target, aspectRatio, naturalSize) {
+  function computeTransformOutcome(origin, target, direction, aspectRatio, naturalSize) {
     const originRect = effectiveOriginBox(origin);
     const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
+    const pivotRect = target.getBoundingClientRect();
     if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
       return { kind: "none" };
     }
-    const transform = transformBetween(targetRect, originRect);
     const unknownTargetSize = !naturalSize && !hasRealTargetContent(target);
     if (unknownTargetSize) {
-      return { kind: "fade", transform };
+      return { kind: "fade", transform: transformBetween(pivotRect, targetRect, originRect) };
     }
     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 { kind: "zoom", transform };
+    const isMismatch = direction === "out" && ratioOfRatios > ASPECT_MISMATCH_THRESHOLD;
+    const transform = direction === "out" ? transformBetweenStretch(pivotRect, targetRect, originRect) : transformBetween(pivotRect, targetRect, originRect);
+    return isMismatch ? { kind: "fade", transform } : { kind: "zoom", transform };
   }
-  const FADE_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-duration) var(--shoji-easing)";
+  const FADE_IN_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-fade-duration, 120ms) var(--shoji-easing)";
+  const FADE_OUT_TRANSITION = "transform var(--shoji-duration) var(--shoji-easing), opacity var(--shoji-fade-duration, 120ms) var(--shoji-easing) calc(var(--shoji-duration) - var(--shoji-fade-duration, 120ms))";
   function waitForTransitionEnd(target, cb, property = "transform") {
     const durationMs = parseCssTime$1(getComputedStyle(target).transitionDuration);
     let done = false;
@@ -594,7 +607,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function zoomIn({ origin, target, aspectRatio, naturalSize }) {
     if (prefersReducedMotion$1()) return;
-    const outcome = computeTransformOutcome(origin, target, aspectRatio, naturalSize);
+    const outcome = computeTransformOutcome(origin, target, "in", aspectRatio, naturalSize);
     if (outcome.kind === "none") return;
     const { transform } = outcome;
     const isFade = outcome.kind === "fade";
@@ -604,7 +617,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     target.style.transform = transform;
     if (isFade) target.style.opacity = "0";
     void target.offsetHeight;
-    target.style.transition = isFade ? FADE_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_IN_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     target.style.transform = "none";
     if (isFade) target.style.opacity = "1";
     waitForTransitionEnd(target, () => clearInlineTransform$1(target, "none"));
@@ -614,7 +627,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       onComplete();
       return;
     }
-    const outcome = computeTransformOutcome(origin, target, aspectRatio, naturalSize);
+    const outcome = computeTransformOutcome(origin, target, "out", aspectRatio, naturalSize);
     if (outcome.kind === "none") {
       onComplete();
       return;
@@ -632,13 +645,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const targetRect = effectiveTargetBox(target, aspectRatio, naturalSize);
       if (targetRect.width > 0 && targetRect.height > 0) {
         const existing = target.style.transform;
-        const jump = transformBetween(targetRect, zoomStart);
+        const jump = transformBetween(target.getBoundingClientRect(), targetRect, zoomStart);
         target.style.transition = "none";
         target.style.transform = existing && existing !== "none" ? `${existing} ${jump}` : jump;
         void target.offsetHeight;
       }
     }
-    target.style.transition = isFade ? FADE_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
+    target.style.transition = isFade ? FADE_OUT_TRANSITION : "transform var(--shoji-duration) var(--shoji-easing)";
     void target.offsetHeight;
     target.style.transform = transform;
     if (isFade) target.style.opacity = "0";
@@ -1149,8 +1162,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         slot.root.style.transform = `translateX(calc(${slot.offset * 100}% + ${this.dragOffsetPx}px))`;
       }
     }
-    /** Re-renders whichever slots need a different item; `onLoad` fires per index once its media settles. `openPlaceholderSrc` (only from `Gallery.open()`) swaps the centerIndex slot's spinner for a low-res placeholder once it decodes, if not already ready. `loop` matches `Gallery.ts`'s own `nextIndex()`/`prevIndex()` wrap-around — without it, the pool slot just past the last (or before the first) item has no item to preload at all, so a boundary drag reveals nothing even though the completed navigation itself already wraps correctly. */
-    render(items, centerIndex, onLoad, openPlaceholderSrc, loop = false) {
+    /** Re-renders whichever slots need a different item; `onLoad` fires per index once its media settles. `openPlaceholderSrc` (only from `Gallery.open()`) swaps the centerIndex slot's spinner for a low-res placeholder once it decodes, if not already ready; `onOpenPlaceholderReady` fires once that swap happens (`Gallery.ts`'s `beginZoom` doc comment explains why). `openPlaceholderAlreadyVisible` (`Gallery.ts`'s own doc comment on it) skips that decode wait entirely when it's not actually needed. `loop` matches `Gallery.ts`'s own `nextIndex()`/`prevIndex()` wrap-around — without it, the pool slot just past the last (or before the first) item has no item to preload at all, so a boundary drag reveals nothing even though the completed navigation itself already wraps correctly. */
+    render(items, centerIndex, onLoad, openPlaceholderSrc, loop = false, onOpenPlaceholderReady, openPlaceholderAlreadyVisible = false) {
       const canWrap = loop && items.length > this.slots.length;
       const targets = this.slots.map((_, i) => {
         const offset = i - this.preload;
@@ -1200,7 +1213,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.applyAspect(slot, item);
         if (index === centerIndex && openPlaceholderSrc) {
           const naturalSize = item.width && item.height ? { width: item.width, height: item.height } : void 0;
-          this.revealOpenPlaceholder(openPlaceholderSrc, slot, index, naturalSize);
+          const aspectRatio = item.thumbnailWidth && item.thumbnailHeight ? item.thumbnailWidth / item.thumbnailHeight : naturalSize && naturalSize.width / naturalSize.height;
+          this.revealOpenPlaceholder(
+            openPlaceholderSrc,
+            slot,
+            index,
+            naturalSize,
+            aspectRatio,
+            onOpenPlaceholderReady,
+            openPlaceholderAlreadyVisible
+          );
         }
         if (((_a = item.video) == null ? void 0 : _a.provider) === "html5") {
           this.renderVideo(item, slot, index, onLoad);
@@ -1301,25 +1323,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * (`.shoji-slide`) fixes it: same box, only ever `translateX`'d for
      * pool-offset positioning, never scaled — a stable read regardless of
      * what its child is mid-animation through.
+     *
+     * A third real bug: `aspectRatio` (the box's *shape*) must come from the
+     * thumbnail's own aspect (`item.thumbnailWidth`/`thumbnailHeight` when
+     * declared, the caller's own doc comment on this call explains the
+     * priority) — this image's actual pixels are the thumbnail's, and sizing
+     * the box to `naturalSize`'s aspect (the real photo's) instead left most
+     * of it transparent whenever the two differ, `object-fit: contain`
+     * letterboxing the real thumbnail content down to a thin strip inside a
+     * wrongly-shaped box (DESIGN.md §2.3b).
      */
-    revealOpenPlaceholder(src, slot, index, naturalSize) {
+    revealOpenPlaceholder(src, slot, index, naturalSize, aspectRatio, onReady, alreadyVisible = false) {
       const img = createOpenPlaceholder(src);
       const reveal = () => {
-        if (slot.assignedIndex !== index || slot.ready) return;
+        if (slot.assignedIndex !== index) return;
+        if (slot.ready) {
+          onReady == null ? void 0 : onReady();
+          return;
+        }
         slot.media.querySelectorAll(".shoji-slide-spinner, .shoji-slide-provider-poster").forEach((el) => el.remove());
         slot.media.appendChild(img);
-        if (naturalSize) {
+        if (aspectRatio) {
           const containerRect = slot.root.getBoundingClientRect();
           const box = containedBox(
             { left: 0, top: 0, width: containerRect.width, height: containerRect.height },
-            naturalSize.width / naturalSize.height,
+            aspectRatio,
             naturalSize
           );
           img.style.width = `${box.width}px`;
           img.style.height = `${box.height}px`;
         }
+        onReady == null ? void 0 : onReady();
       };
-      if (typeof img.decode === "function") {
+      if (alreadyVisible) {
+        queueMicrotask(reveal);
+      } else if (typeof img.decode === "function") {
         img.decode().then(reveal, reveal);
       } else {
         img.addEventListener("load", reveal, { once: true });
@@ -2927,7 +2965,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.onActivity();
       this.bus.emit("captionModalChange", { open: false });
     }
-    renderCurrentSlide(openPlaceholderSrc) {
+    /** `onCenterContentVisible` — only `open()` passes this, to start the zoom-in once something real is actually visible (its own `beginZoom` doc comment). */
+    renderCurrentSlide(openPlaceholderSrc, onCenterContentVisible, openPlaceholderAlreadyVisible = false) {
       if (!this.slides || !this.dom) return;
       const dom = this.dom;
       this.slides.render(
@@ -2938,10 +2977,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             this.bus.emit("slideItemLoad", { index: loadedIndex });
             this.setSlideLoading(false);
             if (!this.captionFadePending) this.updateCaptionVisibility();
+            onCenterContentVisible == null ? void 0 : onCenterContentVisible();
           }
         },
         openPlaceholderSrc,
-        this.loop
+        this.loop,
+        onCenterContentVisible,
+        openPlaceholderAlreadyVisible
       );
       this.setSlideLoading(!this.slides.isActiveReady());
       const item = this.itemList[this.activeIndex];
@@ -2972,27 +3014,39 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.captionFadePending = true;
         this.dom.caption.style.opacity = "0";
       }
+      const openPlaceholderSrc = naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0;
+      const originImg = origin == null ? void 0 : origin.querySelector("img");
+      const openPlaceholderAlreadyVisible = !!openPlaceholderSrc && !!originImg && (originImg.currentSrc || originImg.src) === openPlaceholderSrc;
+      let zoomStarted = false;
+      const beginZoom = () => {
+        var _a2;
+        if (zoomStarted) return;
+        zoomStarted = true;
+        const media = (_a2 = this.slides) == null ? void 0 : _a2.getActiveMedia();
+        if (media && origin) {
+          zoomIn({
+            origin,
+            target: media,
+            aspectRatio: this.resolveAspectRatio(index, origin),
+            naturalSize
+          });
+        }
+        if (fadeInOnOpen && this.dom) {
+          this.captionFadePending = false;
+          this.updateCaptionVisibility();
+          this.dom.caption.style.opacity = "";
+        }
+      };
       this.renderCurrentSlide(
-        naturalSize && !((_a = this.itemList[index]) == null ? void 0 : _a.video) ? this.resolveOpenPlaceholderSrc(this.itemList[index], origin) : void 0
+        openPlaceholderSrc,
+        openPlaceholderSrc ? beginZoom : void 0,
+        openPlaceholderAlreadyVisible
       );
       this.dom.outer.classList.add("shoji-open");
       document.addEventListener("keydown", this.onKeydown);
       this.focusTrap.activate(this.dom.dialog);
       this.scheduleAutoHide();
-      const media = (_b = this.slides) == null ? void 0 : _b.getActiveMedia();
-      if (media && origin) {
-        zoomIn({
-          origin,
-          target: media,
-          aspectRatio: this.resolveAspectRatio(index, origin),
-          naturalSize
-        });
-      }
-      if (fadeInOnOpen && this.dom) {
-        this.captionFadePending = false;
-        this.updateCaptionVisibility();
-        this.dom.caption.style.opacity = "";
-      }
+      if (!openPlaceholderSrc || ((_b = this.slides) == null ? void 0 : _b.isActiveReady())) beginZoom();
       this.bus.emit("open", { index });
       this.bus.emit("afterOpen", { index });
     }