smartphoto 2.1.11 → 2.1.13

package/lib/smartphoto.mjs

@@ -3,6 +3,9 @@ var isSmartPhone = () => {
   const agent = navigator.userAgent;
   return agent.indexOf("iPhone") > 0 || agent.indexOf("iPad") > 0 || agent.indexOf("ipod") > 0 || agent.indexOf("Android") > 0;
 };
+var isWebKit = () => {
+  return typeof window.webkitConvertPointFromNodeToPage === "function";
+};
 function deepExtend(out, ...args) {
   out = out || {};
   for (let i = 0; i < args.length; i++) {
@@ -140,6 +143,7 @@ var defaults = {
   verticalGravity: false,
   useOrientationApi: false,
   useHistoryApi: true,
+  useViewTransitionApi: true,
   swipeTopToClose: false,
   swipeBottomToClose: true,
   swipeOffset: 100,
@@ -424,6 +428,7 @@ function createGestures({ state, callbacks }, { signal }) {
   let oldPos = null;
   let moveDir = null;
   let swipeStartTime = 0;
+  let tapTarget = null;
   let photoSwipable = false;
   let firstPhotoPos = null;
   let oldPhotoPos = null;
@@ -554,6 +559,7 @@ function createGestures({ state, callbacks }, { signal }) {
     firstPos = pos;
     oldPos = pos;
     swipeStartTime = Date.now();
+    tapTarget = e.target;
   }
   function startPhotoDrag(e) {
     photoSwipable = true;
@@ -693,11 +699,11 @@ function createGestures({ state, callbacks }, { signal }) {
     const swipeHeight = last.y - first.y;
     const noMove = swipeWidth === 0 && swipeHeight === 0;
     if (!isSmartPhone2() && noMove) {
-      callbacks.onTap();
+      callbacks.onTap(tapTarget);
       return;
     }
     if (Math.abs(offset) <= 500 && noMove) {
-      callbacks.onTap();
+      callbacks.onTap(tapTarget);
       return;
     }
     tapSecond = now;
@@ -1017,6 +1023,9 @@ function createView({ id, options }, handlers, { signal }) {
       if (slideRefs.imgWrap && slideRefs.img) {
         slideRefs.imgWrap.style.transform = `translate(${item.x}px,${item.y}px) scale(${item.scale})`;
         slideRefs.img.style.width = `${item.width}px`;
+        if (!isCurrent) {
+          slideRefs.img.style.transform = "translate(0px,0px) scale(1)";
+        }
         slideRefs.img.classList.toggle("active", viewer.appear);
         slideRefs.img.classList.toggle(
           classNames.smartPhotoImgOnMove,
@@ -1100,6 +1109,23 @@ function createView({ id, options }, handlers, { signal }) {
     refs.list.style.transform = `translate(${viewer.translateX}px,${viewer.translateY}px)`;
     refs.list.classList.toggle(classNames.smartPhotoListOnMove, viewer.onMove);
   }
+  function applyViewTransitionLayout(state) {
+    for (const [item, slideRefs] of refs.slides) {
+      if (item.index !== state.viewer.currentIndex) {
+        continue;
+      }
+      const { img, imgWrap } = slideRefs;
+      if (!img || !imgWrap || !item.width || !item.scale || item.scale >= 1) {
+        return;
+      }
+      const before = img.getBoundingClientRect();
+      img.style.width = `${item.width * item.scale}px`;
+      imgWrap.style.transform = `translate(${item.x}px,${item.y}px) scale(1)`;
+      const after = img.getBoundingClientRect();
+      imgWrap.style.transform = `translate(${item.x + before.left - after.left}px,${item.y + before.top - after.top}px) scale(1)`;
+      return;
+    }
+  }
   function showAppearEffect(effect) {
     const clone = document.createElement("img");
     clone.className = classNames.smartPhotoImgClone;
@@ -1123,6 +1149,7 @@ function createView({ id, options }, handlers, { signal }) {
     render,
     syncSlides,
     updatePhotoTransform,
+    applyViewTransitionLayout,
     updateListTransform,
     showAppearEffect,
     removeAppearEffect,
@@ -1159,6 +1186,13 @@ var SmartPhoto = class {
     // doHideEffect() の後始末(画像に設定した translateY の除去と promise 解決)を
     // transitionend を待たずに即時実行するための関数。後始末が済むと null に戻る
     this.finishHideEffect = null;
+    // 開く View Transition が進行中かどうか。進行中にリサイズ由来の再計算(commit)が
+    // 走ると、モーフの目標位置は古いビューポート基準のままなのに実要素だけ新しい
+    // 位置へ動いて「一旦ずれた位置に出てから正位置へ戻る」ように見え、さらに
+    // モーフ用レイアウト(applyViewTransitionLayout)も巻き戻されてしまう。
+    // そのため進行中はリサイズ再計算を保留し、finished 後にまとめて実行する
+    this.isViewTransitionActive = false;
+    this.pendingViewTransitionResync = false;
     this.timeouts = [];
     this.loadAllFired = /* @__PURE__ */ new Set();
     this.syncedGroupId = null;
@@ -1217,16 +1251,24 @@ var SmartPhoto = class {
       if (!this.isSmartPhoneFlag || !this.state.viewer.isOpen || !currentItems(this.state)) {
         return;
       }
+      if (this.isViewTransitionActive) {
+        this.pendingViewTransitionResync = true;
+        return;
+      }
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
       this.commit();
     };
     this.handleResize = () => {
-      if (!currentItems(this.state)) {
+      if (!this.state.viewer.isOpen || !currentItems(this.state)) {
         return;
       }
       this.updateViewportHeight();
+      if (this.isViewTransitionActive) {
+        this.pendingViewTransitionResync = true;
+        return;
+      }
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
@@ -1246,7 +1288,11 @@ var SmartPhoto = class {
       }
     };
     this.handleOrientationChange = () => {
-      if (!currentItems(this.state)) {
+      if (!this.state.viewer.isOpen || !currentItems(this.state)) {
+        return;
+      }
+      if (this.isViewTransitionActive) {
+        this.pendingViewTransitionResync = true;
         return;
       }
       this.updateViewportHeight();
@@ -1259,6 +1305,9 @@ var SmartPhoto = class {
       const timeout = 500;
       const poll = (time) => {
         this.scheduleTimeout(() => {
+          if (!this.state.viewer.isOpen) {
+            return;
+          }
           if (prevWidth !== getWindowWidth2()) {
             this.updateViewportHeight();
             this.resetTranslateCurrent();
@@ -1410,10 +1459,26 @@ var SmartPhoto = class {
     this.state.viewer.photoPosY = 0;
     this.view.updatePhotoTransform(this.state);
     this.scheduleTimeout(() => {
+      if (!this.state.viewer.isOpen) {
+        return;
+      }
       this.state.viewer.scale = true;
       this.view.updatePhotoTransform(this.state);
       this.fireEvent("zoomin");
-    }, 300);
+    }, this.state.options.animationSpeed);
+  }
+  // zoomPhoto() と同じ「ズームの余地があるか」の判定(scaleBorder <= 1 なら
+  // ズームしても見た目が変わらない)。zoomPhoto() 自体は公開 API の契約
+  // (ズームできなければ何もしない)を保つ必要があるため、タップの
+  // zoom-or-close 分岐(§7)用に判定だけを切り出している
+  canZoomCurrentPhoto() {
+    const item = currentItem(this.state);
+    return !!item && scaleBorder(
+      item,
+      getWindowWidth2(),
+      getWindowHeight2(),
+      this.isSmartPhoneFlag
+    ) > 1;
   }
   zoomOutPhoto() {
     this.state.viewer.scaleSize = 1;
@@ -1619,6 +1684,7 @@ var SmartPhoto = class {
       this.state.options.headerHeight,
       this.state.options.footerHeight
     );
+    this.syncFillScale();
   }
   // resize/orientationchange ハンドラは呼び出し前に currentItems の存在を確認済み
   resetTranslateCurrent() {
@@ -1632,9 +1698,18 @@ var SmartPhoto = class {
     }
     return null;
   }
+  currentLiElement() {
+    for (const [item, slideRefs] of this.view.refs.slides) {
+      if (item.index === this.state.viewer.currentIndex) {
+        return slideRefs.li;
+      }
+    }
+    return null;
+  }
   // ---- 内部: dialog 制御(§8) ----
   syncDialog() {
     const { dialog, caption } = this.view.refs;
+    dialog.style.transition = this.state.options.showAnimation === false ? "none" : "";
     if (this.state.viewer.isOpen && !dialog.open) {
       dialog.style.removeProperty("display");
       dialog.showModal();
@@ -1646,6 +1721,7 @@ var SmartPhoto = class {
   }
   commit() {
     this.view.render(this.state);
+    this.view.updatePhotoTransform(this.state);
     this.syncDialog();
   }
   // ---- 内部: 開く演出 ----
@@ -1663,20 +1739,34 @@ var SmartPhoto = class {
     this.setPosByCurrentIndex();
     this.setSizeByScreen();
     setArrow(this.state);
-    if (this.state.options.resizeStyle === "fill" && this.isSmartPhoneFlag) {
-      const item = currentItem(this.state);
-      this.state.viewer.scale = true;
-      this.state.viewer.hideUi = true;
-      this.state.viewer.scaleSize = scaleBorder(
-        item,
-        getWindowWidth2(),
-        getWindowHeight2(),
-        this.isSmartPhoneFlag
-      );
+  }
+  // resizeStyle: 'fill' はスマートフォンでのみ、画面を隙間なく覆うよう
+  // scaleBorder() の倍率を viewer.scaleSize に適用する。fit用の item.scale に
+  // 依存するため、setSizeByScreen() の末尾から必ず呼ばれる(個別に呼ぶ必要はない)
+  syncFillScale() {
+    if (this.state.options.resizeStyle !== "fill" || !this.isSmartPhoneFlag) {
+      return;
+    }
+    const item = currentItem(this.state);
+    if (!item) {
+      return;
     }
+    this.state.viewer.scale = true;
+    this.state.viewer.hideUi = true;
+    this.state.viewer.scaleSize = scaleBorder(
+      item,
+      getWindowWidth2(),
+      getWindowHeight2(),
+      this.isSmartPhoneFlag
+    );
   }
   supportsViewTransition() {
-    return typeof document.startViewTransition === "function";
+    return this.state.options.useViewTransitionApi && typeof document.startViewTransition === "function" && // WebKit には「view-transition-name 付き要素が root スナップショットから
+    // 除外されず、モーフ中に最終位置へ二重描画される」実装バグがあり、開く演出が
+    // 「一旦ずれた位置に出てから正位置へ戻る」ように乱れる。API 対応の有無では
+    // 検出できないため、WebKit ではクローン演出(addAppearEffect)へフォールバック
+    // する(§util.isWebKit)
+    !isWebKit();
   }
   openPhotoWithViewTransition(trigger) {
     document.documentElement.style.setProperty(
@@ -1688,7 +1778,8 @@ var SmartPhoto = class {
     if (thumbImg) {
       thumbImg.style.viewTransitionName = transitionName;
     }
-    const clearNames = () => {
+    const cleanup = () => {
+      this.isViewTransitionActive = false;
       if (thumbImg) {
         thumbImg.style.viewTransitionName = "";
       }
@@ -1696,6 +1787,21 @@ var SmartPhoto = class {
       if (img) {
         img.style.viewTransitionName = "";
       }
+      if (!this.state.viewer.isOpen) {
+        this.pendingViewTransitionResync = false;
+        return;
+      }
+      if (this.pendingViewTransitionResync && currentItems(this.state)) {
+        this.pendingViewTransitionResync = false;
+        this.updateViewportHeight();
+        this.resetTranslateCurrent();
+        this.setPosByCurrentIndex();
+        this.setSizeByScreen();
+        this.commit();
+        return;
+      }
+      this.pendingViewTransitionResync = false;
+      this.view.render(this.state);
     };
     const transition = document.startViewTransition?.(() => {
       this.initPhoto();
@@ -1705,11 +1811,16 @@ var SmartPhoto = class {
         thumbImg.style.viewTransitionName = "";
       }
       this.currentImgElement().style.viewTransitionName = transitionName;
+      this.view.applyViewTransitionLayout(this.state);
     });
-    transition?.ready.catch(() => {
-      clearNames();
+    if (!transition) {
+      return;
+    }
+    this.isViewTransitionActive = true;
+    transition.ready.catch(() => {
+      cleanup();
     });
-    transition?.finished.then(clearNames, clearNames);
+    transition.finished.then(cleanup, cleanup);
   }
   // doOpen() の呼び出し元でこの分岐に来る時点で showAnimation !== false が保証されている
   addAppearEffect(trigger, item) {
@@ -1818,10 +1929,14 @@ var SmartPhoto = class {
       if (getWindowWidth2() === winWidthBefore && getWindowHeight2() === winHeightBefore) {
         return;
       }
+      if (this.isViewTransitionActive) {
+        this.pendingViewTransitionResync = true;
+        return;
+      }
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
-      this.view.render(this.state);
+      this.commit();
     });
   }
   openPhoto(item, trigger) {
@@ -1843,25 +1958,42 @@ var SmartPhoto = class {
   }
   doHideEffect(dir) {
     return new Promise((resolve) => {
+      if (this.state.options.showAnimation === false) {
+        resolve();
+        return;
+      }
       const dialog = this.view.refs.dialog;
-      const img = this.currentImgElement();
+      const item = currentItem(this.state);
+      const li = item ? this.currentLiElement() : null;
       const height = getWindowHeight2();
-      const applied = dir === "top" ? `translateY(-${height}px)` : `translateY(${height}px)`;
-      const finish = () => {
+      const img = this.currentImgElement();
+      let frozenTransform = null;
+      if (img) {
+        const rendered = getComputedStyle(img).transform;
+        if (rendered && rendered !== "none") {
+          img.style.transform = rendered;
+          frozenTransform = img.style.transform;
+        }
+      }
+      if (li && item) {
+        const offsetY = dir === "top" ? -height : height;
+        li.style.transform = `translate(${item.translateX}px,${item.translateY + offsetY}px)`;
+      }
+      const finish = (e) => {
         if (this.finishHideEffect !== finish) {
           return;
         }
+        if (e && e.target !== dialog) {
+          return;
+        }
         this.finishHideEffect = null;
         dialog.removeEventListener("transitionend", finish, true);
-        if (img && img.style.transform === applied) {
+        if (img && frozenTransform && img.style.transform === frozenTransform) {
           img.style.transform = "";
         }
         resolve();
       };
       this.finishHideEffect = finish;
-      if (img) {
-        img.style.transform = applied;
-      }
       dialog.addEventListener("transitionend", finish, true);
       this.scheduleTimeout(finish, this.state.options.animationSpeed + 100);
     });
@@ -1931,7 +2063,9 @@ var SmartPhoto = class {
       const item = currentItem(this.state);
       this.state.viewer.onMove = false;
       setArrow(this.state);
-      this.commit();
+      if (this.state.viewer.isOpen) {
+        this.commit();
+      }
       if (this.state.viewer.oldIndex !== this.state.viewer.currentIndex) {
         this.fireEvent("change");
       }
@@ -2016,7 +2150,21 @@ var SmartPhoto = class {
         }
         this.slideList();
       },
-      onTap: () => this.zoomPhoto(),
+      // 主要ライトボックスのデファクトスタンダード(PhotoSwipe: bgClickAction
+      // 'close' / imageClickAction 'zoom-or-close'、Fancybox: backdropClick
+      // 'close'、GLightbox: closeOnOutsideClick、lightGallery: closable)に合わせ、
+      // 写真の上のタップはズーム、写真の外(背景)のタップは閉じる。ズームの
+      // 余地がない(scaleBorder <= 1 で zoomPhoto() が何もしない)写真の上の
+      // タップも、無反応にせず 'zoom-or-close' に倣って閉じる
+      onTap: (target) => {
+        const img = this.currentImgElement();
+        const onPhoto = !!img && target instanceof Node && img.contains(target);
+        if (onPhoto && this.canZoomCurrentPhoto()) {
+          this.zoomPhoto();
+        } else {
+          this.hidePhoto();
+        }
+      },
       onGestureStart: () => {
         this.fireEvent("gesturestart");
         this.view.updatePhotoTransform(this.state);

package/lib/types/core/index.d.ts

@@ -13,6 +13,8 @@ export default class SmartPhoto {
     private lastTriggerElement;
     private isFiringPublicCloseEvent;
     private finishHideEffect;
+    private isViewTransitionActive;
+    private pendingViewTransitionResync;
     private timeouts;
     private loadAllFired;
     private syncedGroupId;
@@ -25,6 +27,7 @@ export default class SmartPhoto {
     gotoSlide(index: number): void;
     hidePhoto(dir?: "top" | "bottom"): void;
     zoomPhoto(): void;
+    private canZoomCurrentPhoto;
     zoomOutPhoto(): void;
     addNewItem(element: HTMLElement): SmartPhotoItem;
     show(indexOrId?: ItemId, opts?: ShowOptions): void;
@@ -47,9 +50,11 @@ export default class SmartPhoto {
     private setSizeByScreen;
     private resetTranslateCurrent;
     private currentImgElement;
+    private currentLiElement;
     private syncDialog;
     private commit;
     private initPhoto;
+    private syncFillScale;
     private supportsViewTransition;
     private openPhotoWithViewTransition;
     private addAppearEffect;

package/lib/types/core/types.d.ts

@@ -40,6 +40,7 @@ export interface ResolvedSmartPhotoOptions {
     verticalGravity: boolean;
     useOrientationApi: boolean;
     useHistoryApi: boolean;
+    useViewTransitionApi: boolean;
     swipeTopToClose: boolean;
     swipeBottomToClose: boolean;
     swipeOffset: number;
@@ -141,7 +142,7 @@ export interface GestureCallbacks {
     onSwipeStart(): void;
     onSwipeMove(): void;
     onSwipeEnd(result: SwipeEndResult): void;
-    onTap(): void;
+    onTap(target: EventTarget | null): void;
     onGestureStart(): void;
     onGestureMove(): void;
     onGestureEnd(): void;

package/lib/types/core/view.d.ts

@@ -34,6 +34,7 @@ export interface View {
     render(state: State): void;
     syncSlides(items: Item[], state: State): void;
     updatePhotoTransform(state: State): void;
+    applyViewTransitionLayout(state: State): void;
     updateListTransform(state: State): void;
     showAppearEffect(effect: AppearEffect): void;
     removeAppearEffect(): void;

package/lib/types/lib/util.d.ts

@@ -1,4 +1,5 @@
 export declare const isSmartPhone: () => boolean;
+export declare const isWebKit: () => boolean;
 declare function deepExtend(out: Record<string, unknown>, ...args: unknown[]): Record<string, unknown>;
 export declare const extend: typeof deepExtend;
 export declare const triggerEvent: (el: Element, eventName: string, options?: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartphoto",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "smartphoto",
   "homepage": "https://developer.a-blogcms.jp",
   "main": "./lib/smartphoto.js",