swiped-events - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/swiped-events.min.js

 /*!
- * swiped-events.js - v1.1.0
+ * swiped-events.js - v1.1.1
  * Pure JavaScript swipe events
@@ -9,2 +9,2 @@ * https://github.com/john-doherty/swiped-events
  */
-!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var u=e.createEvent("CustomEvent");return u.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),u},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;o=t.target,l=Date.now(),n=t.touches[0].clientX,u=t.touches[0].clientY,a=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!u)return;var e=t.touches[0].clientX,l=t.touches[0].clientY;a=n-e,i=u-l},!1),e.addEventListener("touchend",function(t){if(o!==t.target)return;var e=parseInt(o.getAttribute("data-swipe-threshold")||"20",10),s=parseInt(o.getAttribute("data-swipe-timeout")||"500",10),r=Date.now()-l,c="";Math.abs(a)>Math.abs(i)?Math.abs(a)>e&&r<s&&(c=a>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&r<s&&(c=i>0?"swiped-up":"swiped-down");""!==c&&o.dispatchEvent(new CustomEvent(c,{bubbles:!0,cancelable:!0}));n=null,u=null,l=null},!1);var n=null,u=null,a=null,i=null,l=null,o=null}(window,document);
+!function(t,e){"use strict";"function"!=typeof t.CustomEvent&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=e.createEvent("CustomEvent");return a.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),a},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener("touchstart",function(t){if("true"===t.target.getAttribute("data-swipe-ignore"))return;s=t.target,r=Date.now(),n=t.touches[0].clientX,a=t.touches[0].clientY,u=0,i=0},!1),e.addEventListener("touchmove",function(t){if(!n||!a)return;var e=t.touches[0].clientX,r=t.touches[0].clientY;u=n-e,i=a-r},!1),e.addEventListener("touchend",function(t){if(s!==t.target)return;var e=parseInt(s.getAttribute("data-swipe-threshold")||"20",10),l=parseInt(s.getAttribute("data-swipe-timeout")||"500",10),o=Date.now()-r,c="",d=t.changedTouches||t.touches||[];Math.abs(u)>Math.abs(i)?Math.abs(u)>e&&o<l&&(c=u>0?"swiped-left":"swiped-right"):Math.abs(i)>e&&o<l&&(c=i>0?"swiped-up":"swiped-down");if(""!==c){var p={dir:c.replace(/swiped-/,""),xStart:parseInt(n,10),xEnd:parseInt((d[0]||{}).clientX||-1,10),yStart:parseInt(a,10),yEnd:parseInt((d[0]||{}).clientY||-1,10)};s.dispatchEvent(new CustomEvent(c,{bubbles:!0,cancelable:!0,detail:p}))}n=null,a=null,r=null},!1);var n=null,a=null,u=null,i=null,r=null,s=null}(window,document);

package.json

 {
   "name": "swiped-events",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A 0.7k script that adds swipe events to the DOM for touch enabled devices",
@@ -5,0 +5,0 @@ "main": "src/swiped-events.js",

README.MD

@@ -16,2 +16,3 @@ # swiped-events
   console.log(e.target); // element that was swiped
+  console.log(e.detail); // event data { dir: 'left', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
 });
@@ -24,3 +25,4 @@ ```
 document.addEventListener('swiped-right', function(e) {
-    console.log(e.target); // element that was swiped
+  console.log(e.target); // element that was swiped
+  console.log(e.detail); // event data { dir: 'right', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
 });
@@ -33,3 +35,4 @@ ```
 document.addEventListener('swiped-up', function(e) {
-    console.log(e.target); // element that was swiped
+  console.log(e.target); // element that was swiped
+  console.log(e.detail); // event data { dir: 'up', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
 });
@@ -42,3 +45,4 @@ ```
 document.addEventListener('swiped-down', function(e) {
-    console.log(e.target); // element that was swiped
+  console.log(e.target); // element that was swiped
+  console.log(e.detail); // event data { dir: 'down', xStart: 196, xEnd: 230, yStart: 196, yEnd: 4 }
 });
@@ -51,7 +55,7 @@ ```
 
-Attribute              | Description                                            | Type      | Default
----------------------- | ------------------------------------------------------ | --------- | --------
-`data-swipe-threshold` | Number of *pixels* a user must move before swipe fires | _integer_ | 20
-`data-swipe-timeout`   | Number of *milliseconds* from touchstart to touchend   | _integer_ | 500
-`data-swipe-ignore`    | If *true*, swipe events on this element are ignored    | _boolean_ | _false_
+Attribute              | Description                                              | Type      | Default
+---------------------- | -------------------------------------------------------- | --------- | --------
+`data-swipe-threshold` | Number of *pixels* a user must move before swipe fires   | _integer_ | 20
+`data-swipe-timeout`   | Number of *milliseconds* from `touchstart` to `touchend` | _integer_ | 500
+`data-swipe-ignore`    | If *true*, swipe events on this element are ignored      | _boolean_ | _false_
 
@@ -99,3 +103,3 @@ If you do not provide any attributes, it assumes the following:
 
-If you find this useful, please star the repo. It helps me priorities which open source projects issues I should tackle first.
+If you find this useful, please star the repo. It helps me priorities which OSS issues to tackle first 🙌
 
@@ -102,0 +106,0 @@ ## History

src/swiped-events.js

@@ -39,2 +39,7 @@ /*!
 
+    /**
+     * Fires swiped event if swipe detected on touchend
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
     function handleTouchEnd(e) {
@@ -45,6 +50,7 @@
 
-        var swipeThreshold = parseInt(startEl.getAttribute('data-swipe-threshold') || '20', 10);    // default 10px
-        var swipeTimeout = parseInt(startEl.getAttribute('data-swipe-timeout') || '500', 10);      // default 1000ms
+        var swipeThreshold = parseInt(startEl.getAttribute('data-swipe-threshold') || '20', 10); // default 20px
+        var swipeTimeout = parseInt(startEl.getAttribute('data-swipe-timeout') || '500', 10);    // default 500ms
         var timeDiff = Date.now() - timeDown;
         var eventType = '';
+        var changedTouches = e.changedTouches || e.touches || [];
 
@@ -61,11 +67,9 @@ if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
         }
-        else {
-            if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
-                if (yDiff > 0) {
-                    eventType = 'swiped-up';
-                }
-                else {
-                    eventType = 'swiped-down';
-                }
+        else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+            if (yDiff > 0) {
+                eventType = 'swiped-up';
             }
+            else {
+                eventType = 'swiped-down';
+            }
         }
@@ -75,4 +79,12 @@
 
+            var eventData = {
+                dir: eventType.replace(/swiped-/, ''),
+                xStart: parseInt(xDown, 10),
+                xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
+                yStart: parseInt(yDown, 10),
+                yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
+            };
+
             // fire event on the element that started the swipe
-            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true }));
+            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
 
@@ -88,2 +100,7 @@ // if (console && console.log) console.log(eventType + ' fired on ' + startEl.tagName);
 
+    /**
+     * Records current location on touchstart event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
     function handleTouchStart(e) {
@@ -103,2 +120,7 @@
 
+    /**
+     * Records location diff in px on touchmove event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
     function handleTouchMove(e) {
@@ -105,0 +127,0 @@

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

221581

increased by0.48%

Lines of code

162

increased by14.89%

Number of lines in readme file

106

increased by3.92%

Worsened metrics

Number of package files

11

decreased by-15.38%

No dependency changes