Prevent hiding media viewer if swiped over SwipeClick

3 files changed, 16 insertions, 4 deletions

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 4ed0b66f..0c19ed50 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -76,6 +76,15 @@ const MediaModal = {
         this.$store.dispatch('closeMediaViewer')
       }, transitionTime)
     },
+    hideIfNotSwiped (event) {
+      // If we have swiped over SwipeClick, do not trigger hide
+      const comp = this.$refs.swipeClick
+      if (!comp) {
+        this.hide()
+      } else {
+        comp.$gesture.click(event)
+      }
+    },
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ff9c4953..1aa66a55 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -2,10 +2,11 @@
   <Modal
     v-if="showing"
     class="media-modal-view"
-    @backdropClicked="hide"
+    @backdropClicked="hideIfNotSwiped"
   >
     <SwipeClick
       v-if="type === 'image'"
+      ref="swipeClick"
       class="modal-image-container"
       :direction="swipeDirection"
       :threshold="swipeThreshold"
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
index 94da3f43..265a7f25 100644
--- a/src/services/gesture_service/gesture_service.js
+++ b/src/services/gesture_service/gesture_service.js
@@ -81,7 +81,9 @@ class SwipeAndClickGesture {
     swipeEndCallback,
     swipeCancelCallback,
     swipelessClickCallback,
-    threshold = 30, perpendicularTolerance = 1.0
+    threshold = 30,
+    perpendicularTolerance = 1.0,
+    disableClickThreshold = 1
   }) {
     const nop = () => {}
     this.direction = direction
@@ -90,6 +92,7 @@ class SwipeAndClickGesture {
     this.swipeCancelCallback = swipeCancelCallback || nop
     this.swipelessClickCallback = swipelessClickCallback || nop
     this.threshold = typeof threshold === 'function' ? threshold : () => threshold
+    this.disableClickThreshold = typeof disableClickThreshold === 'function' ? disableClickThreshold : () => disableClickThreshold
     this.perpendicularTolerance = perpendicularTolerance
     this._reset()
   }
@@ -169,7 +172,6 @@ class SwipeAndClickGesture {
       return isPositive ? 1 : -1
     })()
 
-    const swiped = this._swiped
     if (this._swiped) {
       this.swipeEndCallback(sign)
     }
@@ -178,7 +180,7 @@ class SwipeAndClickGesture {
     // the end point is far from the starting point
     // so for other kinds of pointers do not check
     // whether we have swiped
-    if (swiped && event.pointerType === 'mouse') {
+    if (vectorLength(delta) >= this.disableClickThreshold() && event.pointerType === 'mouse') {
       this._preventNextClick = true
     }
   }