vue3-touch-events - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

index.js

@@ -37,2 +37,3 @@ /**
     install: function (app, constructorOptions) {
+		
         var globalOptions = Object.assign({}, {
@@ -44,3 +45,5 @@ disableClick: false,
             longTapTimeInterval: 400,  // ms
-            touchClass: ''
+            touchClass: '',
+			dragFrequency: 100, // ms
+			rollOverFrequency: 100, // ms
         }, constructorOptions);
@@ -80,9 +83,18 @@
             $this.touchStartTime = event.timeStamp;
+			
+			// performance: only process swipe events if `swipe.*` event is registered on this element
+			$this.hasSwipe = hasEvent(this, 'swipe')
+				|| hasEvent(this, 'swipe.left') || hasEvent(this, 'swipe.right')
+				|| hasEvent(this, 'swipe.top') || hasEvent(this, 'swipe.bottom');
 
-            // Trigger touchhold event after `touchHoldTolerance`ms
-            $this.touchHoldTimer = setTimeout(function() {
-                $this.touchHoldTimer = null;
-                triggerEvent(event, $el, 'hold');
-            }, $this.options.touchHoldTolerance);
-
+			// performance: only start hold timer if the `hold` event is registered on this element
+			if (hasEvent(this, 'hold')){
+				
+				// Trigger touchhold event after `touchHoldTolerance` MS
+				$this.touchHoldTimer = setTimeout(function() {
+					$this.touchHoldTimer = null;
+					triggerEvent(event, $el, 'hold');
+				}, $this.options.touchHoldTolerance);
+			}
+			
             triggerEvent(event, this, 'press');
@@ -108,2 +120,4 @@ }
 
+				// trigger `drag.once` only once after mouse FIRST moved while dragging the element
+				// (`touchMoved` is the flag that indicates we no longer need to trigger this)
                 if($this.touchMoved){
@@ -114,12 +128,35 @@ cancelTouchHoldTimer($this);
 
-            } else if (!$this.swipeOutBounded) {
-                var swipeOutBounded = $this.options.swipeTolerance;
+			// performance: only process swipe events if `swipe.*` event is registered on this element
+            } else if ($this.hasSwipe && !$this.swipeOutBounded) {
+				var swipeOutBounded = $this.options.swipeTolerance;
 
-                $this.swipeOutBounded = Math.abs($this.startX - $this.currentX) > swipeOutBounded &&
-                    Math.abs($this.startY - $this.currentY) > swipeOutBounded;
+				$this.swipeOutBounded = Math.abs($this.startX - $this.currentX) > swipeOutBounded &&
+					Math.abs($this.startY - $this.currentY) > swipeOutBounded;
             }
 
-            if($this.touchStarted && $this.touchMoved && movedAgain){
-                triggerEvent(event, this, 'drag');
+			// only trigger `rollover` event if cursor actually moved over this element
+            if(hasEvent(this, 'rollover') && movedAgain){
+				
+				// throttle the `rollover` event based on `rollOverFrequency`
+				var now = event.timeStamp;
+				var throttle = $this.options.rollOverFrequency;
+				if ($this.touchRollTime == null || now > ($this.touchRollTime + throttle)){
+					$this.touchRollTime = now;
+					
+					triggerEvent(event, this, 'rollover');
+				}
             }
+
+			// only trigger `drag` event if cursor actually moved and if we are still dragging this element
+            if(hasEvent(this, 'drag') && $this.touchStarted && $this.touchMoved && movedAgain){
+				
+				// throttle the `drag` event based on `dragFrequency`
+				var now = event.timeStamp;
+				var throttle = $this.options.dragFrequency;
+				if ($this.touchDragTime == null || now > ($this.touchDragTime + throttle)){
+					$this.touchDragTime = now;
+					
+					triggerEvent(event, this, 'drag');
+				}
+            }
         }
@@ -157,3 +194,3 @@
 
-            // Fix #33, Trigger `end` event when touch stopped
+            // trigger `end` event when touch stopped
             triggerEvent(event, this, 'release');
@@ -163,3 +200,3 @@
                 // detect if this is a longTap event or not
-                if ($this.callbacks.longtap && event.timeStamp - $this.touchStartTime > $this.options.longTapTimeInterval) {
+                if (hasEvent(this, 'longtap') && event.timeStamp - $this.touchStartTime > $this.options.longTapTimeInterval) {
                     if (event.cancelable) {
@@ -170,3 +207,3 @@ event.preventDefault();
 
-                } else if ($this.callbacks.hold && touchholdEnd) {
+                } else if (hasEvent(this, 'hold') && touchholdEnd) {
                     if (event.cancelable) {
@@ -181,3 +218,4 @@ event.preventDefault();
 
-            } else if (!$this.swipeOutBounded) {
+			// performance: only process swipe events if `swipe.*` event is registered on this element
+            } else if ($this.hasSwipe && !$this.swipeOutBounded) {
                 var swipeOutBounded = $this.options.swipeTolerance,
@@ -196,3 +234,3 @@ direction,
                     // Only emit the specified event when it has modifiers
-                    if ($this.callbacks['swipe.' + direction]) {
+                    if (hasEvent(this, 'swipe.' + direction)) {
                         triggerEvent(event, this, 'swipe.' + direction, direction);
@@ -215,7 +253,14 @@ } else {
 
+        function hasEvent($el, eventType) {
+            var callbacks = $el.$$touchObj.callbacks[eventType];
+			return (callbacks != null && callbacks.length > 0);
+		}
+		
         function triggerEvent(e, $el, eventType, param) {
             var $this = $el.$$touchObj;
 
-            // get the callback list
-            var callbacks = $this.callbacks[eventType] || null;
+            // get the subscribers for this event
+            var callbacks = $this.callbacks[eventType];
+			
+			// exit if no subscribers to this particular event
             if (callbacks == null || callbacks.length === 0) {
@@ -225,2 +270,3 @@ return null;
 
+			// per callback
             for (var i = 0; i < callbacks.length; i++) {
@@ -227,0 +273,0 @@ var binding = callbacks[i];

package.json

 {
   "name": "vue3-touch-events",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Simple touch events support for vue.js 3",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -16,2 +16,3 @@ # vue3-touch-events [![](https://img.shields.io/npm/v/vue3-touch-events.svg)](https://www.npmjs.com/package/vue3-touch-events)
 - Customizable events with native-like events handler
+- Throttling for `drag` and `rollover` events to prevent crashing your application
 - Global configuration that applies to all events in the application
@@ -160,2 +161,4 @@ - Ability to override global configuration on any element using `v-touch-options` directive
 
+**All events work on Desktop & Mobile devices.**
+
 | <div style="width:170px">Event</div>                      | Behaviour                                                |
@@ -170,4 +173,5 @@ | ---------------------------- | ----------------------------------------------------- |
 | `v-touch:drag.once`              | Triggered when the user presses and drags the element. <br> Only fired once, the moment the user first drags on the element.   |
-| `v-touch:drag`             | Triggered when the user presses and drags the element. <br> Fired every time the mouse moves while dragging the element.   |
+| `v-touch:drag`             | Triggered when the user presses and drags the element. <br> Fired every time the mouse moves while dragging the element.  <br> This event is throttled to prevent too many events per second. <br>  This event will fire every `dragFrequency` MS.   |
 | `v-touch:release`                | **Desktop:** Triggered when the user releases the element (mouse up). <br> **Mobile:** Triggered when the user taps and releases the element.  |
+| `v-touch:rollover`                | **Desktop only:** Triggered when the user moves his mouse over the element. <br> This event is throttled to prevent too many events per second. <br> This event will fire every `rollOverFrequency` MS.  |
 
@@ -190,2 +194,26 @@
 
+### System events
+
+These are the default interactivity events supported by vue.js 3.x.
+
+* You do not need to install this library to use them.
+* They are always available for your usage alongside this library.
+* The system default `mousemove` event is similar to `v-touch:rollover`, however the system event is not throttled and it will trigger hundreds of times per second, potentially crashing your application if any logic is performed in the event handler
+
+**[Desktop devices](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent):**
+- `v-on:click` - Triggered when the user presses and releases the element.
+- `v-on:mousedown` - Triggered when the user presses the element.
+- `v-on:mousemove` - Triggered when the user moves the mouse over the element.
+- `v-on:mouseup` - Triggered when the user presses and releases the element.
+- `v-on:mouseenter` - Triggered when the user moves his mouse into the element.
+- `v-on:mouseleave` - Triggered when the user moves his mouse away from the element.
+
+**[Mobile devices](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events):**
+- `v-on:touchstart` - Triggered when the user presses the element.
+- `v-on:touchmove` - Triggered when the user presses and drags over the element.
+- `v-on:touchcancel` - Triggered when the user presses the element, and releases outside the element, thereby cancelling his tap.
+- `v-on:touchend` - Triggered when the user taps the element (press and release).
+
+
+
 ## Options
@@ -267,8 +295,3 @@
 Vue.use(Vue3TouchEvents, {
-	disableClick: false,
-	touchClass: "",
-	tapTolerance: 10,
-	touchHoldTolerance: 400,
-	swipeTolerance: 30,
-	longTapTimeInterval: 400,
+	disableClick: false, ...
 });
@@ -295,1 +318,5 @@ ```
 
+- `dragFrequency` in milliseconds - How often should `drag` events be fired.  **Default:**  `100` MS (10 times a second).
+
+- `rollOverFrequency` in milliseconds - How often should `rollover` events be fired.  **Default:**  `100` MS (10 times a second).
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31352

increased by14.91%

Lines of code

349

increased by11.5%

Number of lines in readme file

317

increased by9.31%

No dependency changes