diff --git a/package.json b/package.json index 174b52b..1aef180 100644 --- 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 index 06d6685..92373ac 100644 --- 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" > diff --git a/src/vue-zoomer.vue b/src/vue-zoomer.vue index 338300d..cafe931 100644 --- 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