smartphoto 2.1.2 → 2.1.4

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,
@@ -381,6 +382,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 +400,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 +408,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 +530,7 @@ function createGestures({ state, callbacks }, { signal }) {
     dragStart = true;
     firstPos = pos;
     oldPos = pos;
+    swipeStartTime = Date.now();
   }
   function startPhotoDrag(e) {
     photoSwipable = true;
@@ -549,6 +554,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 +595,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 +644,7 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function endPinch() {
     pinching = false;
+    flushGestureMove();
     const item = currentItem(state);
     if (!item) {
       return;
@@ -658,9 +681,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 +776,10 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function detach() {
     clearInterval(interval);
+    if (pinchMoveFrame !== null) {
+      cancelAnimationFrame(pinchMoveFrame);
+      pinchMoveFrame = null;
+    }
   }
   return { attach, detach };
 }
@@ -1082,6 +1111,10 @@ function getWindowWidth() {
   return document.documentElement.clientWidth;
 }
 function getWindowHeight() {
+  const visualViewport = window.visualViewport;
+  if (visualViewport) {
+    return visualViewport.height * visualViewport.scale;
+  }
   return document.documentElement.clientHeight;
 }
 function isElementArray(source) {
@@ -1114,6 +1147,12 @@ var SmartPhoto = class {
     this.loadAllFired = /* @__PURE__ */ new Set();
     this.syncedGroupId = null;
     // ---- 内部: window イベント ----
+    this.updateViewportHeight = () => {
+      this.view.refs.dialog.style.setProperty(
+        "--smartphoto-vh",
+        `${getWindowHeight()}px`
+      );
+    };
     this.handleResize = () => {
       if (!currentItems(this.state)) {
         return;
@@ -1193,6 +1232,18 @@ var SmartPhoto = class {
         this.openPhoto(restored, null);
       }
     }
+    this.updateViewportHeight();
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener(
+        "resize",
+        this.updateViewportHeight,
+        { signal: this.abortController.signal }
+      );
+    } else {
+      window.addEventListener("resize", this.updateViewportHeight, {
+        signal: this.abortController.signal
+      });
+    }
     if (!this.isSmartPhoneFlag) {
       window.addEventListener("resize", this.handleResize, {
         signal: this.abortController.signal
@@ -1494,6 +1545,10 @@ var SmartPhoto = class {
     return typeof document.startViewTransition === "function";
   }
   openPhotoWithViewTransition(trigger) {
+    document.documentElement.style.setProperty(
+      "--smartphoto-animation-speed",
+      `${this.state.options.animationSpeed}ms`
+    );
     const transitionName = "smartphoto-hero";
     const thumbImg = trigger?.querySelector("img") ?? null;
     if (thumbImg) {

package/lib/smartphoto.mjs

@@ -98,6 +98,7 @@ var defaults = {
   swipeTopToClose: false,
   swipeBottomToClose: true,
   swipeOffset: 100,
+  swipeVelocity: 0.5,
   headerHeight: 60,
   footerHeight: 60,
   forceInterval: 10,
@@ -355,6 +356,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) };
 }
@@ -372,6 +374,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;
@@ -379,6 +382,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() {
@@ -500,6 +504,7 @@ function createGestures({ state, callbacks }, { signal }) {
     dragStart = true;
     firstPos = pos;
     oldPos = pos;
+    swipeStartTime = Date.now();
   }
   function startPhotoDrag(e) {
     photoSwipable = true;
@@ -523,6 +528,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(
@@ -547,7 +569,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);
@@ -596,6 +618,7 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function endPinch() {
     pinching = false;
+    flushGestureMove();
     const item = currentItem(state);
     if (!item) {
       return;
@@ -632,9 +655,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);
@@ -725,6 +750,10 @@ function createGestures({ state, callbacks }, { signal }) {
   }
   function detach() {
     clearInterval(interval);
+    if (pinchMoveFrame !== null) {
+      cancelAnimationFrame(pinchMoveFrame);
+      pinchMoveFrame = null;
+    }
   }
   return { attach, detach };
 }
@@ -1056,6 +1085,10 @@ function getWindowWidth() {
   return document.documentElement.clientWidth;
 }
 function getWindowHeight() {
+  const visualViewport = window.visualViewport;
+  if (visualViewport) {
+    return visualViewport.height * visualViewport.scale;
+  }
   return document.documentElement.clientHeight;
 }
 function isElementArray(source) {
@@ -1088,6 +1121,12 @@ var SmartPhoto = class {
     this.loadAllFired = /* @__PURE__ */ new Set();
     this.syncedGroupId = null;
     // ---- 内部: window イベント ----
+    this.updateViewportHeight = () => {
+      this.view.refs.dialog.style.setProperty(
+        "--smartphoto-vh",
+        `${getWindowHeight()}px`
+      );
+    };
     this.handleResize = () => {
       if (!currentItems(this.state)) {
         return;
@@ -1167,6 +1206,18 @@ var SmartPhoto = class {
         this.openPhoto(restored, null);
       }
     }
+    this.updateViewportHeight();
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener(
+        "resize",
+        this.updateViewportHeight,
+        { signal: this.abortController.signal }
+      );
+    } else {
+      window.addEventListener("resize", this.updateViewportHeight, {
+        signal: this.abortController.signal
+      });
+    }
     if (!this.isSmartPhoneFlag) {
       window.addEventListener("resize", this.handleResize, {
         signal: this.abortController.signal
@@ -1468,6 +1519,10 @@ var SmartPhoto = class {
     return typeof document.startViewTransition === "function";
   }
   openPhotoWithViewTransition(trigger) {
+    document.documentElement.style.setProperty(
+      "--smartphoto-animation-speed",
+      `${this.state.options.animationSpeed}ms`
+    );
     const transitionName = "smartphoto-hero";
     const thumbImg = trigger?.querySelector("img") ?? null;
     if (thumbImg) {

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

@@ -59,6 +59,7 @@ export default class SmartPhoto {
     private loadNeighborItems;
     private slideList;
     private scheduleTimeout;
+    private updateViewportHeight;
     private handleResize;
     private handleKeydown;
     private handleOrientationChange;

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

@@ -43,6 +43,7 @@ export interface SmartPhotoOptions {
     swipeTopToClose: boolean;
     swipeBottomToClose: boolean;
     swipeOffset: number;
+    swipeVelocity: number;
     headerHeight: number;
     footerHeight: number;
     forceInterval: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartphoto",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "smartphoto",
   "homepage": "https://developer.a-blogcms.jp",
   "main": "./lib/smartphoto.js",
@@ -31,17 +31,17 @@
     "lint": "biome check --write ./src",
     "lint:ci": "biome ci ./src",
     "typecheck": "tsc --noEmit",
-    "build": "npm run build:js && npm run build:types && npm run build:sass",
+    "build": "npm run build:js && npm run build:types && npm run build:css",
     "build:js": "tsup",
     "build:types": "tsc -p tsconfig.build.json",
-    "build:sass": "npm run clean:css && npm run sass && npm run sass:min",
-    "clean:css": "rm -rf ./css/*",
-    "sass": "sass ./scss/smartphoto.scss ./css/smartphoto.css --style expanded",
-    "sass:min": "sass ./scss/smartphoto.scss ./css/smartphoto.min.css --style compressed --no-source-map",
+    "build:css": "npm run clean:css && npm run css:copy && npm run css:min",
+    "clean:css": "rm -rf ./css && mkdir -p ./css",
+    "css:copy": "cp ./styles/smartphoto.css ./css/smartphoto.css",
+    "css:min": "postcss ./styles/smartphoto.css -o ./css/smartphoto.min.css",
     "dev": "vite",
     "preview": "vite preview",
     "prepare": "husky",
-    "prepack": "npm run lint:ci && npm run typecheck && npm run test:coverage && npm run build",
+    "prepack": "npm run lint:ci && npm run typecheck && npm test && npm run build",
     "release:patch": "npm version patch && git push --follow-tags",
     "release:minor": "npm version minor && git push --follow-tags",
     "release:major": "npm version major && git push --follow-tags"
@@ -64,10 +64,12 @@
     "@testing-library/jest-dom": "^7.0.0",
     "@types/node": "^24.13.3",
     "@vitest/coverage-v8": "^4.1.10",
+    "cssnano": "^8.0.4",
     "husky": "^9.1.7",
     "jsdom": "^30.0.1",
     "lint-staged": "^17.3.0",
-    "sass": "^1.102.0",
+    "postcss": "^8.5.26",
+    "postcss-cli": "^11.0.1",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",
     "vite": "^8.2.0",

package/css/smartphoto.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/smartphoto.scss"],"names":[],"mappings":"AAKA;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAUJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAIF;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAKA;EAKA;EACA;EACA;EACA;EACA;EACA;EAKA,YACE;;AAIF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"smartphoto.css"}