pleroma-fe

commit: 9f3a983fef9dfedef8f44855e1f939ea944cd0ba
parent 839627ffc42f7ac2515ca58207b52e24f76f3369
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Mon,  2 Aug 2021 20:32:02 -0400

Use native click for hiding overlay

The pointerup strategy is unsuccessful, as some other overlays
(Firefox's Inspect Element) will pass down pointerup events.

Diffstat:
M
src/components/swipe_click/swipe_click.js
3
+--
M
src/services/gesture_service/gesture_service.js
26
+++++++++++++++++++++++---

2 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/src/components/swipe_click/swipe_click.js b/src/components/swipe_click/swipe_click.js
@@ -53,8 +53,7 @@ const SwipeClick = {
       this.$gesture.cancel(event)
     },
     handleNativeClick (event) {
-      event.stopPropagation()
-      event.preventDefault()
+      this.$gesture.click(event)
     },
     preview (offsets) {
       this.$emit('preview-requested', offsets)
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
@@ -4,6 +4,8 @@ const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
 const DIRECTION_DOWN = [0, 1]
 
+const BUTTON_LEFT = 0
+
 const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
 
 const touchCoord = touch => [touch.screenX, touch.screenY]
@@ -23,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
@@ -100,11 +102,17 @@ class SwipeAndClickGesture {
     this._pointerId = -1
     this._swiping = false
     this._swiped = false
+    this._preventNextClick = false
   }
 
   start (event) {
     debug('start() called', event)
 
+    // Only handle left click
+    if (event.button !== BUTTON_LEFT) {
+      return
+    }
+
     this._startPos = pointerEventCoord(event)
     this._pointerId = event.pointerId
     debug('start pos:', this._startPos)
@@ -124,6 +132,7 @@ class SwipeAndClickGesture {
   }
 
   cancel (event) {
+    debug('cancel called')
     if (!this._swiping || this._pointerId !== event.pointerId) {
       return
     }
@@ -146,6 +155,8 @@ class SwipeAndClickGesture {
 
     debug('end: is swipe event')
 
+    debug('button = ', event.button)
+
     // movement too small
     const coord = pointerEventCoord(event)
     const delta = deltaCoord(this._startPos, coord)
@@ -171,9 +182,18 @@ class SwipeAndClickGesture {
       return isPositive ? 1 : -1
     })()
 
+    const swiped = this._swiped
     if (this._swiped) {
       this.swipeEndCallback(sign)
-    } else {
+    }
+    this._reset()
+    if (swiped) {
+      this._preventNextClick = true
+    }
+  }
+
+  click (event) {
+    if (!this._preventNextClick) {
       this.swipelessClickCallback()
     }
     this._reset()