touchsweep - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/touchsweep.d.ts

@@ -0,1 +1,9 @@
+export type TouchSwipeEventType = string;
+export namespace TouchSwipeEventType {
+    const tap: string;
+    const up: string;
+    const down: string;
+    const left: string;
+    const right: string;
+}
 export default class TouchSweep {
@@ -6,9 +14,9 @@ /**
      * @param {HTMLElement} element
-     * @param {any} data
+     * @param {Record<string, any>} data
      * @param {number} threshold
      * @return {TouchSweep}
      */
-    constructor(element?: HTMLElement, data?: any, threshold?: number);
+    constructor(element?: HTMLElement, data?: Record<string, any>, threshold?: number);
     element: HTMLElement;
-    eventData: any;
+    eventData: Record<string, any>;
     threshold: number;
@@ -21,8 +29,47 @@ coords: {
     };
-    onStart(event: any): void;
-    onEnd(event: any): void;
-    bind(): void;
-    unbind(): void;
-    getEventName(): "" | "swipeleft" | "swiperight" | "swipeup" | "swipedown" | "tap";
-    dispatch(): void;
+    /**
+     * Set start X and Y coordinates
+     * @private
+     * @param {MouseEvent | TouchEvent} event
+     * @return {void}
+     */
+    private onStart;
+    /**
+     * Set end X and Y coordinates
+     * @private
+     * @param {MouseEvent | TouchEvent} event
+     * @return {void}
+     */
+    private onEnd;
+    /**
+     * Get X and Y coordinates from a mouse or touch event
+     * @private
+     * @param {MouseEvent | TouchEvent} event
+     * @return {Record<'x' | 'y', number>}
+     */
+    private getCoords;
+    /**
+     * Add event listeners
+     * @public
+     * @return {void}
+     */
+    public bind(): void;
+    /**
+     * Remove event listeners
+     * @public
+     * @return {void}
+     */
+    public unbind(): void;
+    /**
+     * Get the event name based on the swipe direction
+     * @private
+     * @return {TouchSwipeEventType | ''}
+     */
+    private getEventName;
+    /**
+     * Dispatch an event
+     * @private
+     * @return {void}
+     */
+    private dispatch;
 }

dist/touchsweep.js

@@ -19,3 +19,3 @@ (function (global, factory) {
   });
-  _exports["default"] = void 0;
+  _exports["default"] = _exports.TouchSwipeEventType = void 0;
 
@@ -26,4 +26,16 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
+  /**
+   * @enum {string}
+   */
+  var TouchSwipeEventType = {
+    tap: 'tap',
+    up: 'swipeup',
+    down: 'swipedown',
+    left: 'swipeleft',
+    right: 'swiperight'
+  };
+  _exports.TouchSwipeEventType = TouchSwipeEventType;
+
   var TouchSweep = /*#__PURE__*/function () {
@@ -34,3 +46,3 @@ /**
      * @param {HTMLElement} element
-     * @param {any} data
+     * @param {Record<string, any>} data
      * @param {number} threshold
@@ -60,16 +72,62 @@ * @return {TouchSweep}
     }
+    /**
+     * Get X and Y coordinates from a mouse or touch event
+     * @private
+     * @param {MouseEvent | TouchEvent} event
+     * @return {Record<'x' | 'y', number>}
+     */
 
+
     _createClass(TouchSweep, [{
+      key: "getCoords",
+      value: function getCoords(event) {
+        var isMouseEvent = event.type === 'mousedown' || event.type === 'mouseup';
+        var x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
+        var y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
+        return {
+          x: x,
+          y: y
+        };
+      }
+      /**
+       * Set start X and Y coordinates
+       * @private
+       * @param {MouseEvent | TouchEvent} event
+       * @return {void}
+       */
+
+    }, {
       key: "onStart",
       value: function onStart(event) {
-        this.coords.startX = event.changedTouches[0].screenX;
-        this.coords.startY = event.changedTouches[0].screenY;
+        var _this$getCoords = this.getCoords(event),
+            x = _this$getCoords.x,
+            y = _this$getCoords.y;
+
+        this.coords.startX = x;
+        this.coords.startY = y;
       }
+      /**
+       * Set end X and Y coordinates
+       * @private
+       * @param {MouseEvent | TouchEvent} event
+       * @return {void}
+       */
+
     }, {
       key: "onEnd",
       value: function onEnd(event) {
-        this.coords.endX = event.changedTouches[0].screenX;
-        this.coords.endY = event.changedTouches[0].screenY;
+        var _this$getCoords2 = this.getCoords(event),
+            x = _this$getCoords2.x,
+            y = _this$getCoords2.y;
+
+        this.coords.endX = x;
+        this.coords.endY = y;
         this.dispatch();
       }
+      /**
+       * Add event listeners
+       * @public
+       * @return {void}
+       */
+
     }, {
@@ -80,3 +138,11 @@ key: "bind",
         this.element.addEventListener('touchend', this.onEnd, false);
+        this.element.addEventListener('mousedown', this.onStart, false);
+        this.element.addEventListener('mouseup', this.onEnd, false);
       }
+      /**
+       * Remove event listeners
+       * @public
+       * @return {void}
+       */
+
     }, {
@@ -87,3 +153,11 @@ key: "unbind",
         this.element.removeEventListener('touchend', this.onEnd, false);
+        this.element.removeEventListener('mousedown', this.onStart, false);
+        this.element.removeEventListener('mouseup', this.onEnd, false);
       }
+      /**
+       * Get the event name based on the swipe direction
+       * @private
+       * @return {TouchSwipeEventType | ''}
+       */
+
     }, {
@@ -100,19 +174,19 @@ key: "getEventName",
         if (endX < startX && Math.abs(endX - startX) > threshold) {
-          return 'swipeleft';
+          return TouchSwipeEventType.left;
         }
 
         if (endX > startX && Math.abs(endX - startX) > threshold) {
-          return 'swiperight';
+          return TouchSwipeEventType.right;
         }
 
         if (endY < startY && Math.abs(endY - startY) > threshold) {
-          return 'swipeup';
+          return TouchSwipeEventType.up;
         }
 
         if (endY > startY && Math.abs(endY - startY) > threshold) {
-          return 'swipedown';
+          return TouchSwipeEventType.down;
         }
 
         if (endY === startY && endX === startX) {
-          return 'tap';
+          return TouchSwipeEventType.tap;
         }
@@ -122,2 +196,8 @@
       }
+      /**
+       * Dispatch an event
+       * @private
+       * @return {void}
+       */
+
     }, {
@@ -124,0 +204,0 @@ key: "dispatch",

dist/touchsweep.min.js

@@ -1,8 +0,41 @@
-(function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.touchsweep=c.exports}})("undefined"==typeof globalThis?"undefined"==typeof self?this:self:globalThis,function(a){"use strict";function b(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function c(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function d(a,b,d){return b&&c(a.prototype,b),d&&c(a,d),a}Object.defineProperty(a,"__esModule",{value:!0}),a["default"]=void 0;var e=/*#__PURE__*/function(){/**
+(function(a,b){if("function"==typeof define&&define.amd)define(["exports"],b);else if("undefined"!=typeof exports)b(exports);else{var c={exports:{}};b(c.exports),a.touchsweep=c.exports}})("undefined"==typeof globalThis?"undefined"==typeof self?this:self:globalThis,function(a){"use strict";function b(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function c(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function d(a,b,d){return b&&c(a.prototype,b),d&&c(a,d),Object.defineProperty(a,"prototype",{writable:!1}),a}Object.defineProperty(a,"__esModule",{value:!0}),a["default"]=a.TouchSwipeEventType=void 0;/**
+ * @enum {string}
+ */var e={tap:"tap",up:"swipeup",down:"swipedown",left:"swipeleft",right:"swiperight"};a.TouchSwipeEventType=e;var f=/*#__PURE__*/function(){/**
 	 * Create a new TouchSweep instance
 	 * @constructor
 	 * @param {HTMLElement} element
-	 * @param {any} data
+	 * @param {Record<string, any>} data
 	 * @param {number} threshold
 	 * @return {TouchSweep}
-	 */function a(){var c=0<arguments.length&&void 0!==arguments[0]?arguments[0]:document.body,d=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:40;return b(this,a),this.element=c,this.eventData=d,this.threshold=e,this.coords={startX:0,startY:0,endX:0,endY:0},this.onStart=this.onStart.bind(this),this.onEnd=this.onEnd.bind(this),this.bind(),this}return d(a,[{key:"onStart",value:function onStart(a){this.coords.startX=a.changedTouches[0].screenX,this.coords.startY=a.changedTouches[0].screenY}},{key:"onEnd",value:function onEnd(a){this.coords.endX=a.changedTouches[0].screenX,this.coords.endY=a.changedTouches[0].screenY,this.dispatch()}},{key:"bind",value:function bind(){this.element.addEventListener("touchstart",this.onStart,!1),this.element.addEventListener("touchend",this.onEnd,!1)}},{key:"unbind",value:function unbind(){this.element.removeEventListener("touchstart",this.onStart,!1),this.element.removeEventListener("touchend",this.onEnd,!1)}},{key:"getEventName",value:function getEventName(){var a=Math.abs,b=this.threshold,c=this.coords,d=c.startX,e=c.startY,f=c.endX,g=c.endY;return f<d&&a(f-d)>b?"swipeleft":f>d&&a(f-d)>b?"swiperight":g<e&&a(g-e)>b?"swipeup":g>e&&a(g-e)>b?"swipedown":g===e&&f===d?"tap":""}},{key:"dispatch",value:function dispatch(){var a=this.getEventName();if(a){var b=new CustomEvent(a,{detail:this.eventData});this.element.dispatchEvent(b)}}}]),a}();a["default"]=e});
+	 */function a(){var c=0<arguments.length&&void 0!==arguments[0]?arguments[0]:document.body,d=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=2<arguments.length&&void 0!==arguments[2]?arguments[2]:40;return b(this,a),this.element=c,this.eventData=d,this.threshold=e,this.coords={startX:0,startY:0,endX:0,endY:0},this.onStart=this.onStart.bind(this),this.onEnd=this.onEnd.bind(this),this.bind(),this}/**
+	 * Get X and Y coordinates from a mouse or touch event
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {Record<'x' | 'y', number>}
+	 */return d(a,[{key:"getCoords",value:function getCoords(a){var b="mousedown"===a.type||"mouseup"===a.type,c=b?a.pageX:a.changedTouches[0].screenX,d=b?a.pageY:a.changedTouches[0].screenY;return{x:c,y:d}}/**
+	 * Set start X and Y coordinates
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {void}
+	 */},{key:"onStart",value:function onStart(a){var b=this.getCoords(a),c=b.x,d=b.y;this.coords.startX=c,this.coords.startY=d}/**
+	 * Set end X and Y coordinates
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {void}
+	 */},{key:"onEnd",value:function onEnd(a){var b=this.getCoords(a),c=b.x,d=b.y;this.coords.endX=c,this.coords.endY=d,this.dispatch()}/**
+	 * Add event listeners
+	 * @public
+	 * @return {void}
+	 */},{key:"bind",value:function bind(){this.element.addEventListener("touchstart",this.onStart,!1),this.element.addEventListener("touchend",this.onEnd,!1),this.element.addEventListener("mousedown",this.onStart,!1),this.element.addEventListener("mouseup",this.onEnd,!1)}/**
+	 * Remove event listeners
+	 * @public
+	 * @return {void}
+	 */},{key:"unbind",value:function unbind(){this.element.removeEventListener("touchstart",this.onStart,!1),this.element.removeEventListener("touchend",this.onEnd,!1),this.element.removeEventListener("mousedown",this.onStart,!1),this.element.removeEventListener("mouseup",this.onEnd,!1)}/**
+	 * Get the event name based on the swipe direction
+	 * @private
+	 * @return {TouchSwipeEventType | ''}
+	 */},{key:"getEventName",value:function getEventName(){var a=Math.abs,b=this.threshold,c=this.coords,d=c.startX,f=c.startY,g=c.endX,h=c.endY;return g<d&&a(g-d)>b?e.left:g>d&&a(g-d)>b?e.right:h<f&&a(h-f)>b?e.up:h>f&&a(h-f)>b?e.down:h===f&&g===d?e.tap:""}/**
+	 * Dispatch an event
+	 * @private
+	 * @return {void}
+	 */},{key:"dispatch",value:function dispatch(){var a=this.getEventName();if(a){var b=new CustomEvent(a,{detail:this.eventData});this.element.dispatchEvent(b)}}}]),a}();a["default"]=f});

package.json

 {
 	"name": "touchsweep",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Super tiny vanilla JS module to detect swipe direction",
@@ -30,10 +30,10 @@ "keywords": [
 	"devDependencies": {
-		"@babel/cli": "7.13.14",
-		"@babel/core": "7.13.15",
-		"@babel/plugin-transform-modules-umd": "7.13.0",
-		"@babel/preset-env": "7.13.15",
+		"@babel/cli": "7.17.6",
+		"@babel/core": "7.17.5",
+		"@babel/plugin-transform-modules-umd": "7.16.7",
+		"@babel/preset-env": "7.16.11",
 		"babel-minify": "0.5.1",
-		"typescript": "4.2.4"
+		"typescript": "4.6.2"
 	},
 	"dependencies": {}
 }

README.md

@@ -14,4 +14,2 @@ [![GitHub release](https://img.shields.io/github/release/scriptex/touchsweep.svg)](https://github.com/scriptex/touchsweep/releases/latest)
 
-This module works on touch-enabled devices only.
-
 ## Install
@@ -50,3 +48,3 @@
 
-new TouchSweep(area, data, touchThreshold);
+const touchSwipeInstance = new TouchSweep(area, data, touchThreshold);
 
@@ -89,6 +87,25 @@ // Then listen for custom swipe events and do your magic:
 
+## API
+
+TouchSweep provides a minimal API for you to use.
+
+The `TouchSwipe` instance exposes two public methods which allow you to add or to remove all event listeners responsible for the module functionality.
+
+This is useful in cases where you want to remove the `TouchSwipe` container/area from the DOM and prevent possible memory leaks by removing all event listeners related to this DOM element.
+
+In order to remove all previously attached event listeners:
+
+```javascript
+touchSwipeInstance.unbind();
+```
+
+In order to add all previously removed event listeners:
+
+```javascript
+touchSwipeInstance.bind();
+```
+
 ## Supported Browsers
 
 Currently all evergreen browsers are supported.
-IE 10+ support is planned in the near future.
 
@@ -95,0 +112,0 @@ ## Demo

src/touchsweep.js

@@ -0,1 +1,12 @@
+/**
+ * @enum {string}
+ */
+export const TouchSwipeEventType = {
+	tap: 'tap',
+	up: 'swipeup',
+	down: 'swipedown',
+	left: 'swipeleft',
+	right: 'swiperight'
+};
+
 export default class TouchSweep {
@@ -6,3 +17,3 @@ /**
 	 * @param {HTMLElement} element
-	 * @param {any} data
+	 * @param {Record<string, any>} data
 	 * @param {number} threshold
@@ -30,24 +41,73 @@ * @return {TouchSweep}
 
+	/**
+	 * Get X and Y coordinates from a mouse or touch event
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {Record<'x' | 'y', number>}
+	 */
+	getCoords(event) {
+		const isMouseEvent = event.type === 'mousedown' || event.type === 'mouseup';
+		const x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
+		const y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
+
+		return { x, y };
+	}
+
+	/**
+	 * Set start X and Y coordinates
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {void}
+	 */
 	onStart(event) {
-		this.coords.startX = event.changedTouches[0].screenX;
-		this.coords.startY = event.changedTouches[0].screenY;
+		const { x, y } = this.getCoords(event);
+
+		this.coords.startX = x;
+		this.coords.startY = y;
 	}
 
+	/**
+	 * Set end X and Y coordinates
+	 * @private
+	 * @param {MouseEvent | TouchEvent} event
+	 * @return {void}
+	 */
 	onEnd(event) {
-		this.coords.endX = event.changedTouches[0].screenX;
-		this.coords.endY = event.changedTouches[0].screenY;
+		const { x, y } = this.getCoords(event);
 
+		this.coords.endX = x;
+		this.coords.endY = y;
+
 		this.dispatch();
 	}
 
+	/**
+	 * Add event listeners
+	 * @public
+	 * @return {void}
+	 */
 	bind() {
 		this.element.addEventListener('touchstart', this.onStart, false);
 		this.element.addEventListener('touchend', this.onEnd, false);
+		this.element.addEventListener('mousedown', this.onStart, false);
+		this.element.addEventListener('mouseup', this.onEnd, false);
 	}
 
+	/**
+	 * Remove event listeners
+	 * @public
+	 * @return {void}
+	 */
 	unbind() {
 		this.element.removeEventListener('touchstart', this.onStart, false);
 		this.element.removeEventListener('touchend', this.onEnd, false);
+		this.element.removeEventListener('mousedown', this.onStart, false);
+		this.element.removeEventListener('mouseup', this.onEnd, false);
 	}
 
+	/**
+	 * Get the event name based on the swipe direction
+	 * @private
+	 * @return {TouchSwipeEventType | ''}
+	 */
 	getEventName() {
@@ -58,19 +118,19 @@ const threshold = this.threshold;
 		if (endX < startX && Math.abs(endX - startX) > threshold) {
-			return 'swipeleft';
+			return TouchSwipeEventType.left;
 		}
 
 		if (endX > startX && Math.abs(endX - startX) > threshold) {
-			return 'swiperight';
+			return TouchSwipeEventType.right;
 		}
 
 		if (endY < startY && Math.abs(endY - startY) > threshold) {
-			return 'swipeup';
+			return TouchSwipeEventType.up;
 		}
 
 		if (endY > startY && Math.abs(endY - startY) > threshold) {
-			return 'swipedown';
+			return TouchSwipeEventType.down;
 		}
 
 		if (endY === startY && endX === startX) {
-			return 'tap';
+			return TouchSwipeEventType.tap;
 		}
@@ -81,2 +141,7 @@
 
+	/**
+	 * Dispatch an event
+	 * @private
+	 * @return {void}
+	 */
 	dispatch() {
@@ -83,0 +148,0 @@ const eventName = this.getEventName();

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

23759

increased by37.05%

Lines of code

440

increased by90.48%

Number of lines in readme file

124

increased by15.89%

No dependency changes