pleroma-fe

commit: 6980e4ddf1aa8dfd8c3bba0ea6cc7de90f531ba9
parent cb19db1006e84d9429d57d8a574dfaa9980d8ca7
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Mon,  2 Aug 2021 21:19:04 -0400

Scale swipe threshold with viewport width

Diffstat:
M
src/components/media_modal/media_modal.js
7
+++++--
M
src/components/swipe_click/swipe_click.js
4
++--
M
src/services/gesture_service/gesture_service.js
11
+++++++----

3 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
@@ -33,7 +33,10 @@ const MediaModal = {
     return {
       loading: false,
       swipeDirection: GestureService.DIRECTION_LEFT,
-      swipeThreshold: 50,
+      swipeThreshold: () => {
+        const considerableMoveRatio = 1 / 4
+        return window.innerWidth * considerableMoveRatio
+      },
       pinchZoomMinScale: 1,
       pinchZoomScaleResetLimit: 1.2
     }
@@ -104,7 +107,7 @@ const MediaModal = {
       this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
       if (sign > 0) {
         this.goNext()
-      } else {
+      } else if (sign < 0) {
         this.goPrev()
       }
     },
diff --git a/src/components/swipe_click/swipe_click.js b/src/components/swipe_click/swipe_click.js
@@ -31,8 +31,8 @@ const SwipeClick = {
       type: Array
     },
     threshold: {
-      type: Number,
-      default: 30
+      type: Function,
+      default: () => 30
     },
     perpendicularTolerance: {
       type: Number,
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
@@ -25,8 +25,8 @@ const project = (v1, v2) => {
   return [scalar * v2[0], scalar * v2[1]]
 }
 
-const debug = console.log
-// const debug = () => {}
+// const debug = console.log
+const debug = () => {}
 
 // direction: either use the constants above or an arbitrary 2d vector.
 // threshold: how many Px to move from touch origin before checking if the
@@ -92,7 +92,7 @@ class SwipeAndClickGesture {
     this.swipeEndCallback = swipeEndCallback || nop
     this.swipeCancelCallback = swipeCancelCallback || nop
     this.swipelessClickCallback = swipelessClickCallback || nop
-    this.threshold = threshold
+    this.threshold = typeof threshold === 'function' ? threshold : () => threshold
     this.perpendicularTolerance = perpendicularTolerance
     this._reset()
   }
@@ -162,7 +162,10 @@ class SwipeAndClickGesture {
     const delta = deltaCoord(this._startPos, coord)
 
     const sign = (() => {
-      if (vectorLength(delta) < this.threshold) {
+      debug(
+        'threshold = ', this.threshold(),
+        'vector len =', vectorLength(delta))
+      if (vectorLength(delta) < this.threshold()) {
         return 0
       }
       // movement is opposite from direction