@michaelyagi/shoji 0.1.0-alpha.6

package/dist/esm/zoomTransition-bbKHpVpA.js

@@ -0,0 +1,110 @@
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function parseCssTime(value) {
+  var _a;
+  const first = ((_a = value.split(",")[0]) == null ? void 0 : _a.trim()) ?? "";
+  if (first.endsWith("ms")) return parseFloat(first);
+  if (first.endsWith("s")) return parseFloat(first) * 1e3;
+  return 0;
+}
+function containedBox(container, aspectRatio) {
+  const containerRatio = container.width / container.height;
+  const width = aspectRatio > containerRatio ? container.width : container.height * aspectRatio;
+  const height = aspectRatio > containerRatio ? container.width / aspectRatio : container.height;
+  return {
+    left: container.left + (container.width - width) / 2,
+    top: container.top + (container.height - height) / 2,
+    width,
+    height
+  };
+}
+function effectiveTargetBox(target, aspectRatio) {
+  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();
+    if (rect.width > 0 && rect.height > 0) return rect;
+  }
+  const containerRect = target.getBoundingClientRect();
+  if (aspectRatio && containerRect.width > 0 && containerRect.height > 0) {
+    return containedBox(containerRect, aspectRatio);
+  }
+  return containerRect;
+}
+function computeTransform(origin, target, aspectRatio) {
+  const originRect = origin.getBoundingClientRect();
+  const targetRect = effectiveTargetBox(target, aspectRatio);
+  if (targetRect.width === 0 || targetRect.height === 0 || originRect.width === 0 || originRect.height === 0) {
+    return null;
+  }
+  const scale = Math.min(
+    originRect.width / targetRect.width,
+    originRect.height / targetRect.height
+  );
+  const translateX = originRect.left + originRect.width / 2 - (targetRect.left + targetRect.width / 2);
+  const translateY = originRect.top + originRect.height / 2 - (targetRect.top + targetRect.height / 2);
+  return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;
+}
+function waitForTransitionEnd(target, cb) {
+  const durationMs = parseCssTime(getComputedStyle(target).transitionDuration);
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    target.removeEventListener("transitionend", onEnd);
+    cb();
+  };
+  const onEnd = (event) => {
+    if (event.target === target && event.propertyName === "transform")
+      finish();
+  };
+  target.addEventListener("transitionend", onEnd);
+  setTimeout(finish, durationMs + 100);
+}
+function clearInlineTransform(target, expectedTransform) {
+  target.style.transition = "";
+  target.style.transformOrigin = "";
+  target.style.willChange = "";
+  if (target.style.transform === expectedTransform) target.style.transform = "";
+}
+function zoomIn({ origin, target, aspectRatio }) {
+  if (prefersReducedMotion()) return;
+  const transform = computeTransform(origin, target, aspectRatio);
+  if (!transform) return;
+  target.style.transition = "none";
+  target.style.transformOrigin = "center";
+  target.style.willChange = "transform";
+  target.style.transform = transform;
+  void target.offsetHeight;
+  target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+  target.style.transform = "none";
+  waitForTransitionEnd(target, () => clearInlineTransform(target, "none"));
+}
+function zoomOut({ origin, target, aspectRatio }, onComplete) {
+  if (prefersReducedMotion()) {
+    onComplete();
+    return;
+  }
+  const transform = computeTransform(origin, target, aspectRatio);
+  if (!transform) {
+    onComplete();
+    return;
+  }
+  target.style.transformOrigin = "center";
+  target.style.willChange = "transform";
+  target.style.transition = "transform var(--shoji-duration) var(--shoji-easing)";
+  void target.offsetHeight;
+  target.style.transform = transform;
+  const appliedTransform = target.style.transform;
+  waitForTransitionEnd(target, () => {
+    clearInlineTransform(target, appliedTransform);
+    onComplete();
+  });
+}
+export {
+  zoomOut as a,
+  waitForTransitionEnd as w,
+  zoomIn as z
+};
+//# sourceMappingURL=zoomTransition-bbKHpVpA.js.map

package/dist/esm/zoomTransition-bbKHpVpA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomTransition-bbKHpVpA.js","sources":["../../src/core/zoomTransition.ts"],"sourcesContent":["export interface ZoomTransitionTarget {\n  /** The thumbnail element to animate to/from. */\n  origin: HTMLElement;\n  /** The `.shoji-slide-media` element being animated — not `.shoji-slide` itself, whose transform is already owned by pool-offset positioning. */\n  target: HTMLElement;\n  /** `item.width / item.height`, when known — `target` is always its full flex-box size, never the (usually smaller, letterboxed) rendered photo inside it; see `effectiveTargetBox`. */\n  aspectRatio?: number;\n}\n\nfunction prefersReducedMotion(): boolean {\n  return (\n    typeof window.matchMedia === 'function' &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  );\n}\n\n/** `\"300ms\"` / `\"0.3s\"` → milliseconds. Reads the *actual* computed value, not an assumed default, so a host overriding `--shoji-duration` still gets a correct fallback timeout below. */\nfunction parseCssTime(value: string): number {\n  const first = value.split(',')[0]?.trim() ?? '';\n  if (first.endsWith('ms')) return parseFloat(first);\n  if (first.endsWith('s')) return parseFloat(first) * 1000;\n  return 0;\n}\n\ninterface Box {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/** The `object-fit: contain` box for `aspectRatio` within `container` — computed analytically since the real image may not be loaded/attached yet. */\nfunction containedBox(container: Box, aspectRatio: number): Box {\n  const containerRatio = container.width / container.height;\n  const width = aspectRatio > containerRatio ? container.width : container.height * aspectRatio;\n  const height = aspectRatio > containerRatio ? container.width / aspectRatio : container.height;\n  return {\n    left: container.left + (container.width - width) / 2,\n    top: container.top + (container.height - height) / 2,\n    width,\n    height,\n  };\n}\n\n/**\n * `target`'s effective visual box, not necessarily its own\n * `getBoundingClientRect()`. `target` is always its full flex-box size; the\n * photo inside is usually *smaller*, letterboxed to its own aspect ratio —\n * a real bug used the container's full rect, making the animation scale\n * from/to a box far bigger than the photo ever renders at, visibly\n * shrinking it to something much smaller than the thumbnail whenever the\n * aspect ratios didn't match (the common case). Preferred sources: the real\n * rendered media child, if attached; else an analytical contain-box from\n * `aspectRatio`; else the container's own rect as a last resort.\n *\n * A real bug this guards against: on a fresh open with nothing decoded yet,\n * `target`'s only child at this point is the loading spinner (§2.3) — a\n * fixed ~40px circle, not the photo. Trusting its rect as \"the real\n * rendered media child\" made the FLIP transition scale toward/from a box\n * far smaller than the actual photo, so the scale factor came out inverted\n * (>1 instead of <1) and the spinner rendered wildly oversized for the\n * transition's first frames before shrinking back down — never the actual\n * photo, which hadn't swapped in yet either way.\n *\n * Same reasoning excludes `.shoji-slide-open-placeholder` (§2.3's low-res\n * open() stand-in): it's a real, non-spinner `<img>`, but its own rendered\n * rect reflects *its* crop/aspect ratio, not the real photo's — trusting it\n * would scale toward the placeholder's shape instead of the real photo's,\n * only to visibly jump again once the real photo swaps in and this\n * transition (already run) no longer applies. Excluding it falls through to\n * the analytical `aspectRatio`-based box below, sized for the real photo\n * regardless of what shape the placeholder happens to be.\n */\nfunction effectiveTargetBox(target: HTMLElement, aspectRatio?: number): Box {\n  const child = target.firstElementChild;\n  const isPlaceholder =\n    child instanceof HTMLElement &&\n    (child.classList.contains('shoji-slide-spinner') ||\n      child.classList.contains('shoji-slide-open-placeholder'));\n  if (child instanceof HTMLElement && !isPlaceholder) {\n    const rect = child.getBoundingClientRect();\n    if (rect.width > 0 && rect.height > 0) return rect;\n  }\n  const containerRect = target.getBoundingClientRect();\n  if (aspectRatio && containerRect.width > 0 && containerRect.height > 0) {\n    return containedBox(containerRect, aspectRatio);\n  }\n  return containerRect;\n}\n\n/**\n * Center-to-center translate + a single uniform scale that lands `target`'s\n * effective box (`effectiveTargetBox` above) *within* `origin`'s box,\n * without distorting it. `null` if either has no real size — nothing sane\n * to animate. One scale factor, not independent scaleX/scaleY: origin and\n * the photo essentially never share an exact aspect ratio, and scaling each\n * axis independently to force a rect match visibly squeezes/stretches the\n * image. `Math.min` keeps the box fully contained within origin's rect\n * (same tradeoff `object-fit: contain` makes); center always lands exactly\n * on origin's center, only the unconstrained axis's edges fall short.\n */\nfunction computeTransform(\n  origin: HTMLElement,\n  target: HTMLElement,\n  aspectRatio?: number,\n): string | null {\n  const originRect = origin.getBoundingClientRect();\n  const targetRect = effectiveTargetBox(target, aspectRatio);\n  if (\n    targetRect.width === 0 ||\n    targetRect.height === 0 ||\n    originRect.width === 0 ||\n    originRect.height === 0\n  ) {\n    return null;\n  }\n  const scale = Math.min(\n    originRect.width / targetRect.width,\n    originRect.height / targetRect.height,\n  );\n  const translateX =\n    originRect.left + originRect.width / 2 - (targetRect.left + targetRect.width / 2);\n  const translateY =\n    originRect.top + originRect.height / 2 - (targetRect.top + targetRect.height / 2);\n  // translate3d/scale3d, not translate()/scale() — forces the GPU\n  // compositing path instead of a main-thread-painted 2D transform, the\n  // same fix already validated for the Zoom plugin's own scale animation\n  // (DESIGN.md §4.6): this is the identical technique (a large photo\n  // scaled via `transform`) on the same element, just driven by open/close\n  // instead of pinch/toolbar zoom.\n  return `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${scale}, ${scale}, 1)`;\n}\n\n/**\n * Waits for `target`'s own transform transition to end (with a safety-net\n * timeout in case transitionend never fires — an interrupted/removed\n * element, or a browser quirk) then calls `cb` exactly once. Exported: the\n * gesture-driven drag-to-navigate/drag-to-close settle animations (§2.4,\n * `Gallery.ts`) reuse this same wait-with-fallback logic rather than\n * duplicating it — same instant-jump-then-transition FLIP family of moves\n * as the zoom transition, just on a different element/property pairing.\n */\nexport function waitForTransitionEnd(target: HTMLElement, cb: () => void): void {\n  const durationMs = parseCssTime(getComputedStyle(target).transitionDuration);\n  let done = false;\n  const finish = (): void => {\n    if (done) return;\n    done = true;\n    target.removeEventListener('transitionend', onEnd);\n    cb();\n  };\n  const onEnd = (event: Event): void => {\n    if (event.target === target && (event as TransitionEvent).propertyName === 'transform')\n      finish();\n  };\n  target.addEventListener('transitionend', onEnd);\n  setTimeout(finish, durationMs + 100);\n}\n\n/**\n * A real bug: unconditionally clearing `transform` here could wipe out a\n * value another plugin (rotateFlip) legitimately set on the *same* element\n * in the time between this animation starting and its cleanup callback\n * firing (transitionend, or the fallback timeout — either can land well\n * after a quick click elsewhere). Only clears `transform` if it still\n * matches what this animation itself last wrote — nothing else has touched\n * it since — otherwise leaves it alone. `transition`/`transformOrigin`\n * are always safe to clear; nothing else in this codebase sets them.\n *\n * A second real bug, found via reopening the lightbox: `expectedTransform`\n * must be the value *read back* from `target.style.transform` right after\n * assigning it, not the raw string `computeTransform()` produced. Setting\n * `element.style.transform` to a string containing an arbitrary JS float\n * (e.g. `scale(0.10416666666666667)`, `computeTransform`'s un-rounded\n * `Math.min(...)` result) and reading it back gives a *differently\n * formatted* string — the browser's CSSOM serializer rounds/reformats\n * numeric values on its own (observed in Chromium: `scale(0.104167)`).\n * Comparing the raw JS string against that reformatted one here always\n * failed for any scale factor without a short, clean decimal, silently\n * skipping the clear — permanently leaving `zoomOut`'s shrink transform\n * applied to `.shoji-slide-media` after the lightbox closed. The next\n * `open()`'s `computeTransform` then measured that *already-shrunk*\n * element's `getBoundingClientRect()` as if it were the natural size,\n * computing a near-1 (barely visible) scale instead of a real zoom-in —\n * reads as \"doesn't zoom, just appears,\" and compounds on every further\n * open/close cycle since the stuck transform is never cleared either way.\n * `zoomIn`'s own `'none'` literal never hit this — a fixed string round-trips\n * through the CSSOM unchanged, unlike an arbitrary computed float.\n */\nfunction clearInlineTransform(target: HTMLElement, expectedTransform: string): void {\n  target.style.transition = '';\n  target.style.transformOrigin = '';\n  target.style.willChange = '';\n  if (target.style.transform === expectedTransform) target.style.transform = '';\n}\n\n/**\n * FLIP-style open: `target` starts visually at `origin`'s position/size (an\n * instant, untransitioned jump), then transitions to its natural layout —\n * reads as \"growing out of the thumbnail.\" Fire-and-forget: cleans up its\n * own inline styles once the transition ends, nothing to await.\n */\nexport function zoomIn({ origin, target, aspectRatio }: ZoomTransitionTarget): void {\n  if (prefersReducedMotion()) return;\n  const transform = computeTransform(origin, target, aspectRatio);\n  if (!transform) return;\n\n  target.style.transition = 'none';\n  // computeTransform's translateX/Y is center-to-center math — must pair with\n  // a center transform-origin (the CSS default), not 'top left', or the\n  // scaled box ends up offset from origin by however far origin's center\n  // sits from its own top-left corner.\n  target.style.transformOrigin = 'center';\n  // Promotes target onto its own compositing layer before the animated\n  // transform starts, not mid-animation — same GPU-seam mitigation as the\n  // Zoom plugin (DESIGN.md §4.6). Cleared in clearInlineTransform once the\n  // transition ends, not left on permanently: this is the offset-0 pool\n  // slot, alive for the gallery's whole lifetime, not a class scoped to\n  // only-while-zoomed.\n  target.style.willChange = 'transform';\n  target.style.transform = transform;\n  void target.offsetHeight; // force the instant jump to commit before transitioning away from it\n  target.style.transition = 'transform var(--shoji-duration) var(--shoji-easing)';\n  target.style.transform = 'none';\n\n  waitForTransitionEnd(target, () => clearInlineTransform(target, 'none'));\n}\n\n/**\n * Reverse of `zoomIn`: `target` transitions from its natural position down\n * to `origin`'s rect — \"shrinking back into the thumbnail.\" `onComplete`\n * always fires exactly once, synchronously if there's nothing to animate\n * (reduced motion, or no valid rect), otherwise once the transition ends —\n * callers use this to know when it's safe to actually hide/finalize.\n */\nexport function zoomOut(\n  { origin, target, aspectRatio }: ZoomTransitionTarget,\n  onComplete: () => void,\n): void {\n  if (prefersReducedMotion()) {\n    onComplete();\n    return;\n  }\n  const transform = computeTransform(origin, target, aspectRatio);\n  if (!transform) {\n    onComplete();\n    return;\n  }\n\n  // computeTransform's translateX/Y is center-to-center math — must pair with\n  // a center transform-origin (the CSS default), not 'top left', or the\n  // scaled box ends up offset from origin by however far origin's center\n  // sits from its own top-left corner.\n  target.style.transformOrigin = 'center';\n  target.style.willChange = 'transform'; // see zoomIn's doc comment on this line\n  target.style.transition = 'transform var(--shoji-duration) var(--shoji-easing)';\n  void target.offsetHeight;\n  target.style.transform = transform;\n  // Read back what the browser actually stored, not the raw string just\n  // assigned — see clearInlineTransform's own doc comment for why the two\n  // can differ (CSSOM float reformatting) and why that difference matters.\n  const appliedTransform = target.style.transform;\n\n  waitForTransitionEnd(target, () => {\n    clearInlineTransform(target, appliedTransform);\n    onComplete();\n  });\n}\n"],"names":[],"mappings":"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"}