smartphoto 2.1.4 → 2.1.6

package/lib/smartphoto.mjs

@@ -106,7 +106,7 @@ var defaults = {
   loadOffset: 2,
   resizeStyle: "fit",
   lazyAttribute: "data-src",
-  animationSpeed: 300
+  animationSpeed: 450
 };
 function deepFreeze(obj) {
   Object.keys(obj).forEach((key) => {
@@ -120,7 +120,11 @@ function deepFreeze(obj) {
 function createState(settings) {
   return {
     options: deepFreeze(
-      extend({}, defaults, settings)
+      extend(
+        {},
+        defaults,
+        settings
+      )
     ),
     viewer: {
       isOpen: false,
@@ -1120,6 +1124,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(
@@ -1131,6 +1173,7 @@ var SmartPhoto = class {
       if (!currentItems(this.state)) {
         return;
       }
+      this.updateViewportHeight();
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setSizeByScreen();
@@ -1153,6 +1196,7 @@ var SmartPhoto = class {
       if (!currentItems(this.state)) {
         return;
       }
+      this.updateViewportHeight();
       this.resetTranslateCurrent();
       this.setPosByCurrentIndex();
       this.setHashByCurrentIndex();
@@ -1163,6 +1207,7 @@ var SmartPhoto = class {
       const poll = (time) => {
         this.scheduleTimeout(() => {
           if (prevWidth !== getWindowWidth()) {
+            this.updateViewportHeight();
             this.resetTranslateCurrent();
             this.setPosByCurrentIndex();
             this.setHashByCurrentIndex();
@@ -1175,6 +1220,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 },
@@ -1196,15 +1242,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) {
@@ -1249,6 +1294,7 @@ var SmartPhoto = class {
       clearTimeout(id);
     });
     this.timeouts = [];
+    this.itemsByElement.clear();
     this.gestures.detach();
     this.view.destroy();
   }
@@ -1361,7 +1407,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;
   }
@@ -1392,7 +1438,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) {
@@ -1403,15 +1449,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);
@@ -1665,10 +1768,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();
@@ -1759,6 +1863,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();

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

@@ -1,4 +1,4 @@
-import type { Item, ItemId, Slide, SmartPhotoEvent, SmartPhotoSettings, SmartPhotoSource } from "./types";
+import type { ItemId, SlideData, SmartPhotoEvent, SmartPhotoItem, SmartPhotoOptions, SmartPhotoSource } from "./types";
 interface ShowOptions {
     group?: string;
     trigger?: HTMLElement;
@@ -16,7 +16,9 @@ export default class SmartPhoto {
     private timeouts;
     private loadAllFired;
     private syncedGroupId;
-    constructor(source: SmartPhotoSource, settings?: SmartPhotoSettings);
+    private rootSelector;
+    private readonly itemsByElement;
+    constructor(source: SmartPhotoSource, settings?: SmartPhotoOptions);
     on(event: SmartPhotoEvent, fn: (this: HTMLDialogElement, ev: Event) => void): void;
     destroy(): void;
     [Symbol.dispose](): void;
@@ -24,17 +26,19 @@ export default class SmartPhoto {
     hidePhoto(dir?: "top" | "bottom"): void;
     zoomPhoto(): void;
     zoomOutPhoto(): void;
-    addNewItem(element: HTMLElement): Item;
+    addNewItem(element: HTMLElement): SmartPhotoItem;
     show(indexOrId?: ItemId, opts?: ShowOptions): void;
     hide(): void;
     next(): void;
     prev(): void;
-    addItem(slideOrElement: Slide | HTMLElement): Item;
+    addItem(slideOrElement: SlideData | HTMLElement): SmartPhotoItem;
     get currentIndex(): number;
     private ingestSource;
     private addElementItem;
     private addSlideItem;
-    private bindThumbnailClick;
+    private findRegisteredAncestor;
+    private resyncGroupFromDom;
+    private handleDocumentClick;
     private syncCurrentGroupView;
     private setHash;
     private setHashByCurrentIndex;

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

@@ -1,10 +1,10 @@
-import type { Bound, Item, Slide, SmartPhotoOptions, SmartPhotoSettings, State, ViewerState } from "./types";
-export declare const defaults: SmartPhotoOptions;
-export declare function createState(settings: SmartPhotoSettings): State;
+import type { Bound, Item, ResolvedSmartPhotoOptions, SlideData, SmartPhotoOptions, State, ViewerState } from "./types";
+export declare const defaults: ResolvedSmartPhotoOptions;
+export declare function createState(settings: SmartPhotoOptions): State;
 export declare function groupIdFromElement(element: Element): string;
-export declare function groupIdFromSlide(slide: Slide): string;
-export declare function itemFromElement(element: Element, options: Pick<SmartPhotoOptions, "lazyAttribute">, index: number, winWidth: number): Item;
-export declare function itemFromSlide(slide: Slide, index: number, winWidth: number): Item;
+export declare function groupIdFromSlide(slide: SlideData): string;
+export declare function itemFromElement(element: Element, options: Pick<ResolvedSmartPhotoOptions, "lazyAttribute">, index: number, winWidth: number): Item;
+export declare function itemFromSlide(slide: SlideData, index: number, winWidth: number): Item;
 export declare function addItemToGroup(state: State, item: Item): void;
 export declare function currentItems(state: State): Item[] | null;
 export declare function currentItem(state: State): Item | null;

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

@@ -31,7 +31,7 @@ export interface Messages {
     closeDialog: string;
     carouselLabel: string;
 }
-export interface SmartPhotoOptions {
+export interface ResolvedSmartPhotoOptions {
     classNames: ClassNames;
     message: Messages;
     arrows: boolean;
@@ -53,29 +53,31 @@ export interface SmartPhotoOptions {
     lazyAttribute: string;
     animationSpeed: number;
 }
-export type SmartPhotoSettings = Partial<Omit<SmartPhotoOptions, "classNames" | "message">> & {
+export type SmartPhotoOptions = Partial<Omit<ResolvedSmartPhotoOptions, "classNames" | "message">> & {
     classNames?: Partial<ClassNames>;
     message?: Partial<Messages>;
 };
 export type ItemId = string | number;
-export interface Item {
+export interface SmartPhotoItem {
     src: string | null;
     thumb: string | null;
     caption: string | null;
     alt: string | null;
     groupId: string;
-    translateX: number;
-    translateY: number;
     index: number;
     width: number;
     height: number;
+    id: ItemId;
+    loaded: boolean;
+    element: HTMLElement | null;
+}
+export interface Item extends SmartPhotoItem {
+    translateX: number;
+    translateY: number;
     scale: number;
     x: number;
     y: number;
-    id: ItemId;
-    loaded: boolean;
     processed: boolean;
-    element: HTMLElement | null;
 }
 export interface AppearEffect {
     width: number;
@@ -111,7 +113,7 @@ export interface ViewerState {
     showNextArrow: boolean;
 }
 export interface State {
-    options: SmartPhotoOptions;
+    options: ResolvedSmartPhotoOptions;
     viewer: ViewerState;
     groups: Map<string, Item[]>;
 }
@@ -121,7 +123,7 @@ export interface Bound {
     maxX: number;
     maxY: number;
 }
-export interface Slide {
+export interface SlideData {
     src: string;
     thumb?: string;
     caption?: string;
@@ -131,7 +133,7 @@ export interface Slide {
     width?: number;
     height?: number;
 }
-export type SmartPhotoSource = string | NodeListOf<Element> | Element[] | Slide[];
+export type SmartPhotoSource = string | NodeListOf<Element> | Element[] | SlideData[];
 export type SmartPhotoEvent = "open" | "close" | "change" | "swipestart" | "swipeend" | "zoomin" | "zoomout" | "gesturestart" | "gestureend" | "loadall";
 export type SwipeEndResult = "prev" | "next" | "close-top" | "close-bottom" | "stay";
 export type PhotoDragEndResult = "prev" | "next" | "zoom-out" | null;

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

@@ -1,4 +1,4 @@
-import type { AppearEffect, Item, SmartPhotoOptions, State } from "./types";
+import type { AppearEffect, Item, ResolvedSmartPhotoOptions, State } from "./types";
 interface SlideRefs {
     li: HTMLLIElement;
     loaderWrap: HTMLDivElement | null;
@@ -41,7 +41,7 @@ export interface View {
 }
 export declare function createView({ id, options }: {
     id: string;
-    options: SmartPhotoOptions;
+    options: ResolvedSmartPhotoOptions;
 }, handlers: ViewHandlers, { signal }: {
     signal: AbortSignal;
 }): View;

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 import SmartPhoto from "./core";
 export default SmartPhoto;
+export type { ClassNames, ItemId, Messages, SlideData, SmartPhotoEvent, SmartPhotoItem, SmartPhotoOptions, SmartPhotoSource, } from "./core/types";

package/package.json

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