add swipe left/right gesture

jarvisniu · Jun 15, 2019 · 2e8b506 · 2e8b506
1 parent ad1d7e3
commit 2e8b506
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-zoomer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Zoom the image or other thing with mouse or touch",
   "main": "dist/vue-zoomer.js",
   "scripts": {

diff --git a/src/vue-zoomer-gallery.vue b/src/vue-zoomer-gallery.vue
@@ -10,7 +10,7 @@
     class="vue-zoomer-gallery"
     @mousemove="onMouseMove"
     @mousedown="onMouseDown"
-    @mouseout="isPointerDown = false"
+    @mouseout="onMouseUp"
     @mouseup="onMouseUp"
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
@@ -29,6 +29,7 @@
       :aspect-ratio="imageAspectRatios[selIndex + i - 1] || 1"
       :pivot="pivot"
       :limit-translation="limitTranslation"
+      @swipe="onImageSwipe"
     >
       <img
         v-if="selIndex + i - 1 > -1 && selIndex + i - 1 < list.length"
@@ -192,6 +193,9 @@ export default {
       let aspectRatio = ev.target.naturalWidth / ev.target.naturalHeight
       this.$set(this.imageAspectRatios, index, aspectRatio)
     },
+    onImageSwipe (direction) {
+      this.paginate(direction == 'right' ? -1 : 1)
+    },
   },
 }
 </script>

diff --git a/src/vue-zoomer.vue b/src/vue-zoomer.vue
@@ -53,6 +53,8 @@ export default {
       animScale: 1,
       // Mouse states
       lastFullWheelTime: 0,
+      lastWheelTime: 0,
+      lastWheelDirection: 'x',
       isPointerDown: false,
       pointerPosX: -1,
       pointerPosY: -1,
@@ -234,16 +236,25 @@ export default {
     // Mouse Events ------------------------------------------------------------
     // Mouse wheel scroll,  TrackPad pinch or TrackPad scroll
     onMouseWheel (ev) {
+      let currTime = Date.now()
       if (Math.abs(ev.wheelDelta) === 120) {
         // Throttle the TouchPad pinch on Mac, or it will be too sensitive
-        let currTime = Date.now()
         if (currTime - this.lastFullWheelTime > 50) {
           this.onMouseWheelDo(ev)
           this.lastFullWheelTime = currTime
         }
       } else {
-        this.onMouseWheelDo(ev)
+        if (currTime - this.lastWheelTime > 50 && typeof ev.deltaX === 'number') {
+          this.lastWheelDirection = Math.abs(ev.deltaX) > Math.abs(ev.deltaY) ? 'x' : 'y'
+          if (this.lastWheelDirection === 'x') {
+            this.$emit('swipe', ev.deltaX > 0 ? 'left' : 'right')
+          }
+        }
+        if (this.lastWheelDirection === 'y') {
+          this.onMouseWheelDo(ev)
+        }
       }
+      this.lastWheelTime = currTime
     },
     onMouseWheelDo (ev) {
       // Value basis: One mouse wheel (wheelDelta=+-120) means 1.25/0.8 scale.
@@ -252,6 +263,9 @@ export default {
       this.tryToScale(scaleDelta)
       this.onInteractionEnd()
     },
+    onScroll (ev) {
+      console.log(2)
+    },
     onMouseDown (ev) {
       this.refreshContainerPos()
       this.isPointerDown = true