smartphoto 2.1.3 → 2.1.6

package/lib/smartphoto.js

@@ -124,6 +124,7 @@ var defaults = {
   swipeTopToClose: false,
   swipeBottomToClose: true,
   swipeOffset: 100,
+  swipeVelocity: 0.5,
   headerHeight: 60,
   footerHeight: 60,
   forceInterval: 10,
@@ -131,7 +132,7 @@ var defaults = {
   loadOffset: 2,
   resizeStyle: "fit",
   lazyAttribute: "data-src",
-  animationSpeed: 300
+  animationSpeed: 450
 };
 function deepFreeze(obj) {
   Object.keys(obj).forEach((key) => {
@@ -145,7 +146,11 @@ function deepFreeze(obj) {
 function createState(settings) {
   return {
     options: deepFreeze(
-      extend({}, defaults, settings)
+      extend(
+        {},
+        defaults,
+        settings
+      )
     ),
     viewer: {
       isOpen: false,
@@ -381,6 +386,7 @@ function distance(p1, p2) {
   const y = p1.y - p2.y;
   return Math.sqrt(x * x + y * y);
 }
+var MIN_FLICK_DISTANCE = 10;
 function getForceAndTheta(x, y) {
   return { force: Math.sqrt(x * x + y * y), theta: Math.atan2(y, x) };
 }
@@ -398,6 +404,7 @@ function createGestures({ state, callbacks }, { signal }) {
   let firstPos = null;
   let oldPos = null;
   let moveDir = null;
+  let swipeStartTime = 0;
   let photoSwipable = false;
   let firstPhotoPos = null;
   let oldPhotoPos = null;
@@ -405,6 +412,7 @@ function createGestures({ state, callbacks }, { signal }) {
   let photoVY = 0;
   let pinching = false;
   let oldDistance = 0;
+  let pinchMoveFrame = null;
   let vx = 0;
   let vy = 0;
   function isSmartPhone2() {
@@ -526,6 +534,7 @@ function createGestures({ state, callbacks }, { signal }) {
     dragStart = true;
     firstPos = pos;
     oldPos = pos;
+    swipeStartTime = Date.now();
   }
   function startPhotoDrag(e) {
     photoSwipable = true;
@@ -549,6 +558,23 @@ function createGestures({ state, callbacks }, { signal }) {
     }
     startSwipe(e);
   }
+  function scheduleGestureMove() {
+    if (pinchMoveFrame !== null) {
+      return;
+    }
+    pinchMoveFrame = requestAnimationFrame(() => {
+      pinchMoveFrame = null;
+      callbacks.onGestureMove();
+    });
+  }
+  function flushGestureMove() {
+    if (pinchMoveFrame === null) {
+      return;
+    }
+    cancelAnimationFrame(pinchMoveFrame);
+    pinchMoveFrame = null;
+    callbacks.onGestureMove();
+  }
   function movePinch() {
     const points = Array.from(activePointers.values());
     const dist = distance(
@@ -573,7 +599,7 @@ function createGestures({ state, callbacks }, { signal }) {
       state.viewer.hideUi = state.viewer.scaleSize < 1 || state.viewer.scaleSize > border;
     }
     oldDistance = dist;
-    callbacks.onGestureMove();
+    scheduleGestureMove();
   }
   function moveSwipe(e) {
     const pos = getPos(e);
@@ -622,6 +648,7 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function endPinch() {
     pinching = false;
+    flushGestureMove();
     const item = currentItem(state);
     if (!item) {
       return;
@@ -658,9 +685,11 @@ function createGestures({ state, callbacks }, { signal }) {
     const items = currentItems(state) ?? [];
     if (moveDir === "horizontal") {
       let result = "stay";
-      if (swipeWidth >= state.options.swipeOffset && state.viewer.currentIndex !== 0) {
+      const elapsedMs = Math.max(now - swipeStartTime, 1);
+      const isFlick = Math.abs(swipeWidth) >= MIN_FLICK_DISTANCE && Math.abs(swipeWidth) / elapsedMs >= state.options.swipeVelocity;
+      if ((swipeWidth >= state.options.swipeOffset || isFlick && swipeWidth > 0) && state.viewer.currentIndex !== 0) {
         result = "prev";
-      } else if (swipeWidth <= -state.options.swipeOffset && state.viewer.currentIndex !== items.length - 1) {
+      } else if ((swipeWidth <= -state.options.swipeOffset || isFlick && swipeWidth < 0) && state.viewer.currentIndex !== items.length - 1) {
         result = "next";
       }
       callbacks.onSwipeEnd(result);
@@ -751,6 +780,10 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function detach() {
     clearInterval(interval);
+    if (pinchMoveFrame !== null) {
+      cancelAnimationFrame(pinchMoveFrame);
+      pinchMoveFrame = null;
+    }
   }
   return { attach, detach };
 }
@@ -1082,7 +1115,11 @@ function getWindowWidth() {
   return document.documentElement.clientWidth;
 }
 function getWindowHeight() {
-  return window.visualViewport?.height ?? document.documentElement.clientHeight;
+  const visualViewport = window.visualViewport;
+  if (visualViewport) {
+    return visualViewport.height * visualViewport.scale;
+  }
+  return document.documentElement.clientHeight;
 }
 function isElementArray(source) {
   return source.length > 0 && source[0] instanceof Element;
@@ -1113,6 +1150,44 @@ var SmartPhoto = class {
     this.timeouts = [];
     this.loadAllFired = /* @__PURE__ */ new Set();
     this.syncedGroupId = null;
+    // 文字列セレクタで構築された場合のみ設定される。Ajax等で後から追加された
+    // 要素をクリック時に動的検出するための再スキャン起点(§discoverGroupElements)
+    this.rootSelector = null;
+    // クリックされた要素(またはその祖先)から登録済み Item を逆引きするための
+    // キャッシュ。documentへのイベントデリゲーションで祖先チェーンを辿る際に使う
+    this.itemsByElement = /* @__PURE__ */ new Map();
+    // サムネイルクリックはこの1本の document デリゲーションリスナーだけで処理する
+    // (個別バインドは廃止)。同じクリックイベントを複数の SmartPhoto インスタンスが
+    // 二重処理しないよう、処理済みマーカーをイベント自体に立てて後続インスタンスに
+    // 早期returnさせる(セレクタが重複するインスタンスが同時に存在するケース)
+    this.handleDocumentClick = (e) => {
+      if (!(e.target instanceof Element)) {
+        return;
+      }
+      const marker = e;
+      if (marker.__smartphotoClaimed) {
+        return;
+      }
+      let matched = this.findRegisteredAncestor(e.target);
+      if (!matched && this.rootSelector) {
+        matched = e.target.closest(this.rootSelector);
+      }
+      if (!matched) {
+        return;
+      }
+      e.preventDefault();
+      marker.__smartphotoClaimed = true;
+      if (!this.itemsByElement.has(matched) && this.rootSelector) {
+        const groupId = groupIdFromElement(matched);
+        if (this.resyncGroupFromDom(groupId)) {
+          this.syncCurrentGroupView();
+        }
+      }
+      const item = this.itemsByElement.get(matched);
+      if (item) {
+        this.openPhoto(item, matched);
+      }
+    };
     // ---- 内部: window イベント ----
     this.updateViewportHeight = () => {
       this.view.refs.dialog.style.setProperty(
@@ -1124,6 +1199,7 @@ var SmartPhoto = class {
       if (!currentItems(this.state)) {
         return;
       }
+      this.updateViewportHeight();
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
@@ -1146,6 +1222,7 @@ var SmartPhoto = class {
       if (!currentItems(this.state)) {
         return;
       }
+      this.updateViewportHeight();
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setHashByCurrentIndex();
@@ -1156,6 +1233,7 @@ var SmartPhoto = class {
       const poll = (time) => {
         this.scheduleTimeout(() => {
           if (prevWidth !== getWindowWidth()) {
+            this.updateViewportHeight();
             this.resetTranslateCurrent();
             this.setPosByCurrentIndex();
             this.setHashByCurrentIndex();
@@ -1168,6 +1246,7 @@ var SmartPhoto = class {
       };
       poll(0);
     };
+    this.rootSelector = typeof source === "string" ? source : null;
     this.state = createState(settings ?? {});
     this.view = createView(
       { id: this.id, options: this.state.options },
@@ -1189,15 +1268,14 @@ var SmartPhoto = class {
       },
       { signal: this.abortController.signal }
     );
+    document.addEventListener("click", this.handleDocumentClick, {
+      signal: this.abortController.signal
+    });
     this.ingestSource(source);
     this.syncCurrentGroupView();
     const restored = this.restoreFromHash();
     if (restored) {
-      if (restored.element) {
-        triggerEvent(restored.element, "click");
-      } else {
-        this.openPhoto(restored, null);
-      }
+      this.openPhoto(restored, restored.element);
     }
     this.updateViewportHeight();
     if (window.visualViewport) {
@@ -1242,6 +1320,7 @@ var SmartPhoto = class {
       clearTimeout(id);
     });
     this.timeouts = [];
+    this.itemsByElement.clear();
     this.gestures.detach();
     this.view.destroy();
   }
@@ -1354,7 +1433,7 @@ var SmartPhoto = class {
     this.gotoSlide(this.state.viewer.prev);
   }
   addItem(slideOrElement) {
-    const item = slideOrElement instanceof Element ? this.addElementItem(slideOrElement) : this.addSlideItem(slideOrElement);
+    const item = slideOrElement instanceof HTMLElement ? this.addElementItem(slideOrElement) : this.addSlideItem(slideOrElement);
     this.syncCurrentGroupView();
     return item;
   }
@@ -1385,7 +1464,7 @@ var SmartPhoto = class {
     );
     addItemToGroup(this.state, item);
     this.loadAllFired.delete(groupId);
-    this.bindThumbnailClick(element, item);
+    this.itemsByElement.set(element, item);
     return item;
   }
   addSlideItem(slide) {
@@ -1396,15 +1475,72 @@ var SmartPhoto = class {
     this.loadAllFired.delete(groupId);
     return item;
   }
-  bindThumbnailClick(element, item) {
-    element.addEventListener(
-      "click",
-      (e) => {
-        e.preventDefault();
-        this.openPhoto(item, element);
-      },
-      { signal: this.abortController.signal }
-    );
+  // クリックされた要素(またはその祖先。<a><img></a> の img がクリックされる
+  // ケースを含む)から、登録済み Item を持つ要素まで祖先チェーンを遡って探す
+  findRegisteredAncestor(target) {
+    let node = target;
+    while (node) {
+      if (this.itemsByElement.has(node)) {
+        return node;
+      }
+      node = node.parentElement;
+    }
+    return null;
+  }
+  // rootSelector(文字列セレクタで構築した場合のみ設定される)を再スキャンし、
+  // 指定グループを現在のDOM状態に合わせて丸ごと再構築する(追加・削除・並び順の
+  // 変化を一度に反映)。既知要素は既存の Item オブジェクトをそのまま再利用する
+  // ため loaded/width/height は保持され、DOM から消えた要素だけ itemsByElement
+  // からも除去する。index/translateX は resetTranslate() で再計算する。
+  // 呼び出し元(openPhoto)がこの結果を使い、変化があった場合のみ view を
+  // 再同期する(§ダイアログを開く瞬間に整合を取る。開いている間の next()/prev()
+  // では呼ばれないため、この間の追加/削除は次に開き直すまで反映されない)
+  resyncGroupFromDom(groupId) {
+    if (!this.rootSelector) {
+      return false;
+    }
+    const domElements = Array.from(
+      document.querySelectorAll(this.rootSelector)
+    ).filter((el) => groupIdFromElement(el) === groupId);
+    const domElementSet = new Set(domElements);
+    const previous = this.state.groups.get(groupId) ?? [];
+    const previousByElement = /* @__PURE__ */ new Map();
+    previous.forEach((it) => {
+      if (it.element) {
+        previousByElement.set(it.element, it);
+      }
+    });
+    let changed = domElements.length !== previous.length;
+    const rebuilt = domElements.map((el, index) => {
+      const existing = previousByElement.get(el);
+      if (existing) {
+        if (existing.index !== index) {
+          changed = true;
+          existing.index = index;
+        }
+        return existing;
+      }
+      changed = true;
+      const item = itemFromElement(
+        el,
+        this.state.options,
+        index,
+        getWindowWidth()
+      );
+      this.itemsByElement.set(el, item);
+      return item;
+    });
+    previous.forEach((it) => {
+      if (it.element && !domElementSet.has(it.element)) {
+        this.itemsByElement.delete(it.element);
+      }
+    });
+    resetTranslate(rebuilt, getWindowWidth());
+    this.state.groups.set(groupId, rebuilt);
+    if (changed) {
+      this.loadAllFired.delete(groupId);
+    }
+    return changed;
   }
   syncCurrentGroupView() {
     const items = currentItems(this.state);
@@ -1658,10 +1794,11 @@ var SmartPhoto = class {
     });
   }
   openPhoto(item, trigger) {
+    const groupChanged = this.rootSelector ? this.resyncGroupFromDom(item.groupId) : false;
     this.lastTriggerElement = trigger;
     this.state.viewer.currentGroup = item.groupId;
     this.state.viewer.currentIndex = item.index;
-    if (this.syncedGroupId !== item.groupId) {
+    if (this.syncedGroupId !== item.groupId || groupChanged) {
       this.syncCurrentGroupView();
     }
     this.setHashByCurrentIndex();
@@ -1752,6 +1889,7 @@ var SmartPhoto = class {
     this.state.viewer.photoPosX = 0;
     this.state.viewer.photoPosY = 0;
     this.state.viewer.onMove = true;
+    this.updateViewportHeight();
     this.setPosByCurrentIndex();
     this.setHashByCurrentIndex();
     this.setSizeByScreen();