vue3-touch-events - npm Package Compare versions

Comparing version 5.0.4 to 5.0.5

dist/index.js

@@ -46,88 +46,93 @@ // index.js
     function touchStartEvent(event) {
-      var $this = this.$$touchObj, isTouchEvent = event.type.indexOf("touch") >= 0, isMouseEvent = event.type.indexOf("mouse") >= 0, $el = this;
+      var $this2 = this.$$touchObj, isTouchEvent = event.type.indexOf("touch") >= 0, isMouseEvent = event.type.indexOf("mouse") >= 0, $el = this;
       if (isTouchEvent) {
-        $this.lastTouchStartTime = event.timeStamp;
+        $this2.lastTouchStartTime = event.timeStamp;
       }
-      if (isMouseEvent && $this.lastTouchStartTime && event.timeStamp - $this.lastTouchStartTime < 350) {
+      if (isMouseEvent && $this2.lastTouchStartTime && event.timeStamp - $this2.lastTouchStartTime < 350) {
         return;
       }
-      if ($this.touchStarted) {
+      if ($this2.touchStarted) {
         return;
       }
       addTouchClass(this);
-      $this.touchStarted = true;
-      $this.touchMoved = false;
-      $this.swipeOutBounded = false;
-      $this.isZooming = false;
-      $this.startX = touchX(event);
-      $this.startY = touchY(event);
-      $this.currentX = 0;
-      $this.currentY = 0;
-      $this.touchStartTime = event.timeStamp;
-      $this.hasSwipe = hasEvent(this, "swipe") || hasEvent(this, "swipe.left") || hasEvent(this, "swipe.right") || hasEvent(this, "swipe.top") || hasEvent(this, "swipe.bottom");
+      $this2.touchStarted = true;
+      $this2.touchMoved = false;
+      $this2.swipeOutBounded = false;
+      $this2.isZooming = false;
+      $this2.startX = touchX(event);
+      $this2.startY = touchY(event);
+      $this2.currentX = 0;
+      $this2.currentY = 0;
+      $this2.touchStartTime = event.timeStamp;
+      $this2.hasSwipe = hasEvent(this, "swipe") || hasEvent(this, "swipe.left") || hasEvent(this, "swipe.right") || hasEvent(this, "swipe.top") || hasEvent(this, "swipe.bottom");
       if (hasEvent(this, "hold")) {
-        $this.touchHoldTimer = setTimeout(function() {
-          $this.touchHoldTimer = null;
+        $this2.touchHoldTimer = setTimeout(function() {
+          $this2.touchHoldTimer = null;
           triggerEvent(event, $el, "hold");
-        }, $this.options.touchHoldTolerance);
+        }, $this2.options.touchHoldTolerance);
       }
       triggerEvent(event, this, "press");
     }
+    function touchMoveEventWindow(event) {
+      if ($this.touchStarted == true) {
+        touchMoveEvent(event);
+      }
+    }
     function touchMoveEvent(event) {
-      var $this = this.$$touchObj;
+      var $this2 = this.$$touchObj;
       var curX = touchX(event);
       var curY = touchY(event);
-      var movedAgain = $this.currentX != curX || $this.currentY != curY;
-      $this.currentX = curX;
-      $this.currentY = curY;
-      if (!$this.touchMoved) {
-        var tapTolerance = $this.options.tapTolerance;
-        $this.touchMoved = Math.abs($this.startX - $this.currentX) > tapTolerance || Math.abs($this.startY - $this.currentY) > tapTolerance;
-        if ($this.touchMoved) {
-          cancelTouchHoldTimer($this);
+      var movedAgain = $this2.currentX != curX || $this2.currentY != curY;
+      $this2.currentX = curX;
+      $this2.currentY = curY;
+      if (!$this2.touchMoved) {
+        var tapTolerance = $this2.options.tapTolerance;
+        $this2.touchMoved = Math.abs($this2.startX - $this2.currentX) > tapTolerance || Math.abs($this2.startY - $this2.currentY) > tapTolerance;
+        if ($this2.touchMoved) {
+          cancelTouchHoldTimer($this2);
           triggerEvent(event, this, "drag.once");
         }
-      } else if ($this.hasSwipe && !$this.swipeOutBounded) {
-        var swipeOutBounded = $this.options.swipeTolerance;
-        if (Math.abs($this.startX - $this.currentX) / Math.abs($this.startY - $this.currentY) > $this.options.swipeConeSize && Math.abs($this.startY - $this.currentY) / Math.abs($this.startX - $this.currentX) > $this.options.swipeConeSize) {
-          $this.swipeOutBounded = Math.abs($this.startY - $this.currentY) < swipeOutBounded && Math.abs($this.startX - $this.currentX) < swipeOutBounded;
+      } else if ($this2.hasSwipe && !$this2.swipeOutBounded) {
+        var swipeOutBounded = $this2.options.swipeTolerance;
+        if (Math.abs($this2.startX - $this2.currentX) / Math.abs($this2.startY - $this2.currentY) > $this2.options.swipeConeSize && Math.abs($this2.startY - $this2.currentY) / Math.abs($this2.startX - $this2.currentX) > $this2.options.swipeConeSize) {
+          $this2.swipeOutBounded = Math.abs($this2.startY - $this2.currentY) < swipeOutBounded && Math.abs($this2.startX - $this2.currentX) < swipeOutBounded;
         }
       }
-      if (hasEvent(this, "rollover") && movedAgain && $this.options.dragOutside == false) {
+      if (hasEvent(this, "rollover") && movedAgain) {
         var now = event.timeStamp;
-        if ($this.touchRollTime == null || now > $this.touchRollTime + $this.options.rollOverFrequency) {
-          $this.touchRollTime = now;
+        if ($this2.touchRollTime == null || now > $this2.touchRollTime + $this2.options.rollOverFrequency) {
+          $this2.touchRollTime = now;
           triggerEvent(event, this, "rollover");
         }
       }
-      if (hasEvent(this, "drag") && $this.touchStarted && $this.touchMoved && movedAgain) {
+      if (hasEvent(this, "drag") && $this2.touchStarted && $this2.touchMoved && movedAgain) {
         var now = event.timeStamp;
-        if ($this.touchDragTime == null || now > $this.touchDragTime + $this.options.dragFrequency) {
-          $this.touchDragTime = now;
+        if ($this2.touchDragTime == null || now > $this2.touchDragTime + $this2.options.dragFrequency) {
+          $this2.touchDragTime = now;
           triggerEvent(event, this, "drag");
         }
       }
-      if ($this.touchStarted && (hasEvent(this, "zoom") || hasEvent(this, "zoom.in") || hasEvent(this, "zoom.out"))) {
+      if ($this2.touchStarted && (hasEvent(this, "zoom") || hasEvent(this, "zoom.in") || hasEvent(this, "zoom.out"))) {
         var now = event.timeStamp;
-        if ($this.touchZoomTime == null || now > $this.touchZoomTime + $this.options.zoomFrequency) {
-          $this.touchZoomTime = now;
-          checkZoom($this, event);
+        if ($this2.touchZoomTime == null || now > $this2.touchZoomTime + $this2.options.zoomFrequency) {
+          $this2.touchZoomTime = now;
+          checkZoom($this2, event);
         }
       }
     }
-    function checkZoom($this, event) {
+    function checkZoom($this2, event) {
       const touches = event.changedTouches;
       if (touches.length !== 2) {
-        $this.isZooming = false;
+        $this2.isZooming = false;
         return;
       }
       const newDistance = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
-      if (!$this.isZooming) {
-        $this.isZooming = true;
-        $this.initialZoomDistance = newDistance;
+      if (!$this2.isZooming) {
+        $this2.isZooming = true;
+        $this2.initialZoomDistance = newDistance;
         return;
       }
-      const zoomFactor = newDistance / $this.initialZoomDistance;
+      const zoomFactor = newDistance / $this2.initialZoomDistance;
       if (hasEvent(this, "zoom")) {
-        if (Math.abs(zoomFactor - 1) > $this.options.zoomDistance / $this.initialZoomDistance) {
+        if (Math.abs(zoomFactor - 1) > $this2.options.zoomDistance / $this2.initialZoomDistance) {
           triggerEvent(event, this, "zoom", zoomFactor);
@@ -137,4 +142,4 @@ }
       if (hasEvent(this, "zoom.in") || hasEvent(this, "zoom.out")) {
-        if (Math.abs(newDistance - $this.initialZoomDistance) > $this.options.zoomInOutDistance) {
-          if (newDistance > $this.initialZoomDistance) {
+        if (Math.abs(newDistance - $this2.initialZoomDistance) > $this2.options.zoomInOutDistance) {
+          if (newDistance > $this2.initialZoomDistance) {
             triggerEvent(event, this, "zoom.in");
@@ -146,50 +151,54 @@ } else {
       }
-      $this.isZooming = false;
+      $this2.isZooming = false;
     }
     function touchCancelEvent() {
-      var $this = this.$$touchObj;
-      cancelTouchHoldTimer($this);
-      removeTouchClass(this);
-      $this.touchStarted = $this.touchMoved = false;
-      $this.startX = $this.startY = 0;
+      if ($this2.touchStarted == true) {
+        var $this2 = this.$$touchObj;
+        cancelTouchHoldTimer($this2);
+        removeTouchClass(this);
+        $this2.touchStarted = $this2.touchMoved = false;
+        $this2.startX = $this2.startY = 0;
+      }
     }
     function touchEndEvent(event) {
-      var $this = this.$$touchObj, isTouchEvent = event.type.indexOf("touch") >= 0, isMouseEvent = event.type.indexOf("mouse") >= 0;
-      if (isTouchEvent) {
-        $this.lastTouchEndTime = event.timeStamp;
-      }
-      var touchholdEnd = isTouchEvent && !$this.touchHoldTimer;
-      cancelTouchHoldTimer($this);
-      $this.touchStarted = false;
-      removeTouchClass(this);
-      if (isMouseEvent && $this.lastTouchEndTime && event.timeStamp - $this.lastTouchEndTime < 350) {
-        return;
-      }
-      triggerEvent(event, this, "release");
-      if (!$this.touchMoved) {
-        if (hasEvent(this, "longtap") && event.timeStamp - $this.touchStartTime > $this.options.longTapTimeInterval) {
-          if (event.cancelable) {
-            event.preventDefault();
-          }
-          triggerEvent(event, this, "longtap");
-        } else if (hasEvent(this, "hold") && touchholdEnd) {
-          if (event.cancelable) {
-            event.preventDefault();
-          }
+      if ($this2.touchStarted == true) {
+        var $this2 = this.$$touchObj, isTouchEvent = event.type.indexOf("touch") >= 0, isMouseEvent = event.type.indexOf("mouse") >= 0;
+        if (isTouchEvent) {
+          $this2.lastTouchEndTime = event.timeStamp;
+        }
+        var touchholdEnd = isTouchEvent && !$this2.touchHoldTimer;
+        cancelTouchHoldTimer($this2);
+        $this2.touchStarted = false;
+        removeTouchClass(this);
+        if (isMouseEvent && $this2.lastTouchEndTime && event.timeStamp - $this2.lastTouchEndTime < 350) {
           return;
-        } else {
-          triggerEvent(event, this, "tap");
         }
-      } else if ($this.hasSwipe && !$this.swipeOutBounded) {
-        var swipeOutBounded = $this.options.swipeTolerance, direction, distanceY = Math.abs($this.startY - $this.currentY), distanceX = Math.abs($this.startX - $this.currentX);
-        if (distanceY > swipeOutBounded || distanceX > swipeOutBounded) {
-          if (distanceX > swipeOutBounded) {
-            direction = $this.startX > $this.currentX ? "left" : "right";
+        triggerEvent(event, this, "release");
+        if (!$this2.touchMoved) {
+          if (hasEvent(this, "longtap") && event.timeStamp - $this2.touchStartTime > $this2.options.longTapTimeInterval) {
+            if (event.cancelable) {
+              event.preventDefault();
+            }
+            triggerEvent(event, this, "longtap");
+          } else if (hasEvent(this, "hold") && touchholdEnd) {
+            if (event.cancelable) {
+              event.preventDefault();
+            }
+            return;
           } else {
-            direction = $this.startY > $this.currentY ? "top" : "bottom";
+            triggerEvent(event, this, "tap");
           }
-          if (hasEvent(this, "swipe." + direction)) {
-            triggerEvent(event, this, "swipe." + direction, direction);
-          } else {
-            triggerEvent(event, this, "swipe", direction);
+        } else if ($this2.hasSwipe && !$this2.swipeOutBounded) {
+          var swipeOutBounded = $this2.options.swipeTolerance, direction, distanceY = Math.abs($this2.startY - $this2.currentY), distanceX = Math.abs($this2.startX - $this2.currentX);
+          if (distanceY > swipeOutBounded || distanceX > swipeOutBounded) {
+            if (distanceX > swipeOutBounded) {
+              direction = $this2.startX > $this2.currentX ? "left" : "right";
+            } else {
+              direction = $this2.startY > $this2.currentY ? "top" : "bottom";
+            }
+            if (hasEvent(this, "swipe." + direction)) {
+              triggerEvent(event, this, "swipe." + direction, direction);
+            } else {
+              triggerEvent(event, this, "swipe", direction);
+            }
           }
@@ -210,4 +219,4 @@ }
     function triggerEvent(e, $el, eventType, param) {
-      var $this = $el.$$touchObj;
-      var callbacks = $this.callbacks[eventType];
+      var $this2 = $el.$$touchObj;
+      var callbacks = $this2.callbacks[eventType];
       if (callbacks == null || callbacks.length === 0) {
@@ -244,6 +253,6 @@ return null;
     }
-    function cancelTouchHoldTimer($this) {
-      if ($this && $this.touchHoldTimer) {
-        clearTimeout($this.touchHoldTimer);
-        $this.touchHoldTimer = null;
+    function cancelTouchHoldTimer($this2) {
+      if ($this2 && $this2.touchHoldTimer) {
+        clearTimeout($this2.touchHoldTimer);
+        $this2.touchHoldTimer = null;
       }
@@ -265,3 +274,3 @@ }
       beforeMount: function($el, binding) {
-        var $this = buildTouchObj($el);
+        var $this2 = buildTouchObj($el);
         var passiveOpt = isPassiveSupported ? { passive: true } : false;
@@ -276,9 +285,9 @@ var eventType = binding.arg || "tap";
                   var _e = "swipe." + i;
-                  $this.callbacks[_e] = $this.callbacks[_e] || [];
-                  $this.callbacks[_e].push(binding);
+                  $this2.callbacks[_e] = $this2.callbacks[_e] || [];
+                  $this2.callbacks[_e].push(binding);
                 }
               }
             } else {
-              $this.callbacks.swipe = $this.callbacks.swipe || [];
-              $this.callbacks.swipe.push(binding);
+              $this2.callbacks.swipe = $this2.callbacks.swipe || [];
+              $this2.callbacks.swipe.push(binding);
             }
@@ -292,21 +301,22 @@ break;
           default:
-            $this.callbacks[eventType] = $this.callbacks[eventType] || [];
-            $this.callbacks[eventType].push(binding);
+            $this2.callbacks[eventType] = $this2.callbacks[eventType] || [];
+            $this2.callbacks[eventType].push(binding);
         }
-        if ($this.hasBindTouchEvents) {
+        if ($this2.hasBindTouchEvents) {
           return;
         }
-        var dragEventObj = $this.options.dragOutside ? window : $el;
+        var dragEventObj = $this2.options.dragOutside ? window : $el;
+        var dragEventHandler = $this2.options.dragOutside ? touchMoveEventWindow : touchMoveEvent;
         $el.addEventListener("touchstart", touchStartEvent, passiveOpt);
-        dragEventObj.addEventListener("touchmove", touchMoveEvent, passiveOpt);
-        $el.addEventListener("touchcancel", touchCancelEvent);
-        $el.addEventListener("touchend", touchEndEvent);
-        if (!$this.options.disableClick) {
+        dragEventObj.addEventListener("touchmove", dragEventHandler, passiveOpt);
+        dragEventObj.addEventListener("touchcancel", touchCancelEvent);
+        dragEventObj.addEventListener("touchend", touchEndEvent);
+        if (!$this2.options.disableClick) {
           $el.addEventListener("mousedown", touchStartEvent);
-          dragEventObj.addEventListener("mousemove", touchMoveEvent);
-          $el.addEventListener("mouseup", touchEndEvent);
+          dragEventObj.addEventListener("mousemove", dragEventHandler);
+          dragEventObj.addEventListener("mouseup", touchEndEvent);
           $el.addEventListener("mouseenter", mouseEnterEvent);
           $el.addEventListener("mouseleave", mouseLeaveEvent);
         }
-        $this.hasBindTouchEvents = true;
+        $this2.hasBindTouchEvents = true;
       },
@@ -317,10 +327,11 @@ unmounted: function($el) {
         var dragEventObj = touchObj?.options?.dragOutside ? window : $el;
+        var dragEventHandler = touchObj?.options?.dragOutside ? touchMoveEventWindow : touchMoveEvent;
         $el.removeEventListener("touchstart", touchStartEvent);
-        dragEventObj.removeEventListener("touchmove", touchMoveEvent);
-        $el.removeEventListener("touchcancel", touchCancelEvent);
-        $el.removeEventListener("touchend", touchEndEvent);
+        dragEventObj.removeEventListener("touchmove", dragEventHandler);
+        dragEventObj.removeEventListener("touchcancel", touchCancelEvent);
+        dragEventObj.removeEventListener("touchend", touchEndEvent);
         if (touchObj && !touchObj.options.disableClick) {
           $el.removeEventListener("mousedown", touchStartEvent);
-          dragEventObj.addEventListener("mousemove", touchMoveEvent);
-          $el.removeEventListener("mouseup", touchEndEvent);
+          dragEventObj.addEventListener("mousemove", dragEventHandler);
+          dragEventObj.removeEventListener("mouseup", touchEndEvent);
           $el.removeEventListener("mouseenter", mouseEnterEvent);
@@ -327,0 +338,0 @@ $el.removeEventListener("mouseleave", mouseLeaveEvent);

package.json

 {
 	"name": "vue3-touch-events",
-	"version": "5.0.4",
+	"version": "5.0.5",
 	"description": "Simple touch events support for vue.js 3",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -263,3 +263,3 @@ # vue3-touch-events [![](https://img.shields.io/npm/v/vue3-touch-events.svg)](https://www.npmjs.com/package/vue3-touch-events) [![](https://img.shields.io/npm/dt/vue3-touch-events)](https://www.npmjs.com/package/vue3-touch-events)
 | `dragFrequency`  | milliseconds | How often should `drag` events be fired. **Default:** `10` MS (100 times a second). |
-| `dragOutside`    | boolean      | If the `drag` event should be fired when the mouse is dragged outside the object as well. Useful to implement drag-and-drop behaviour when the object being moved is the same element you have added `v-touch` events on. If this is true, rollover events will not fire. **Default:** `false` |
+| `dragOutside`    | boolean      | If the `drag` event should be fired when the mouse is dragged outside the object as well. Useful to implement drag-and-drop behaviour when the object being moved is the same element you have added `v-touch` events on. **Default:** `false` |
 
@@ -290,2 +290,3 @@
 
+
 ![Cone](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/swipe-cone.png)
@@ -292,0 +293,0 @@

No alert changes

Improved metrics

Total package byte prevSize

36627

increased by1.73%

Lines of code

351

increased by3.24%

Number of lines in readme file

429

increased by0.23%

No dependency changes