touchsweep - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/touchsweep.d.ts

 export declare const enum TouchSwipeEventType {
+    up = "swipeup",
     tap = "tap",
-    up = "swipeup",
     down = "swipedown",
+    move = "swipemove",
     left = "swipeleft",
     right = "swiperight"
 }
+export type TouchSwipeCoordinateType = 'startX' | 'startY' | 'moveX' | 'moveY' | 'endX' | 'endY';
+export type TouchSwipeCoordinates = Record<'x' | 'y', number>;
 export default class TouchSweep {
+    eventData: Record<string, unknown>;
     private element;
-    private eventData;
     private threshold;
     private coords;
+    private isMoving;
+    private moveCoords;
     constructor(element?: HTMLElement, data?: {}, threshold?: number);
@@ -17,6 +22,9 @@ bind(): void;
     private getCoords;
+    private resetCoords;
+    private getEndEventName;
+    private dispatchEvent;
+    private dispatchEnd;
     private onStart;
+    private onMove;
     private onEnd;
-    private getEventName;
-    private dispatch;
 }

dist/touchsweep.js

@@ -7,10 +7,45 @@ (function (global, factory) {
 
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
     exports.TouchSwipeEventType = void 0;
     (function (TouchSwipeEventType) {
+        TouchSwipeEventType["up"] = "swipeup";
         TouchSwipeEventType["tap"] = "tap";
-        TouchSwipeEventType["up"] = "swipeup";
         TouchSwipeEventType["down"] = "swipedown";
+        TouchSwipeEventType["move"] = "swipemove";
         TouchSwipeEventType["left"] = "swipeleft";
         TouchSwipeEventType["right"] = "swiperight";
     })(exports.TouchSwipeEventType || (exports.TouchSwipeEventType = {}));
+    var defaultCoordinates = {
+        endX: 0,
+        endY: 0,
+        moveX: 0,
+        moveY: 0,
+        startX: 0,
+        startY: 0
+    };
     var TouchSweep = /** @class */ (function () {
@@ -24,9 +59,7 @@ function TouchSweep(element, data, threshold) {
             this.threshold = threshold;
-            this.coords = {
-                startX: 0,
-                startY: 0,
-                endX: 0,
-                endY: 0
-            };
+            this.coords = defaultCoordinates;
+            this.isMoving = false;
+            this.moveCoords = { x: 0, y: 0 };
             this.onStart = this.onStart.bind(this);
+            this.onMove = this.onMove.bind(this);
             this.onEnd = this.onEnd.bind(this);
@@ -37,31 +70,30 @@ this.bind();
         TouchSweep.prototype.bind = function () {
-            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);
+            var element = this.element;
+            element.addEventListener('touchstart', this.onStart, false);
+            element.addEventListener('touchmove', this.onMove, false);
+            element.addEventListener('touchend', this.onEnd, false);
+            element.addEventListener('mousedown', this.onStart, false);
+            element.addEventListener('mousemove', this.onMove, false);
+            element.addEventListener('mouseup', this.onEnd, false);
         };
         TouchSweep.prototype.unbind = function () {
-            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);
+            var element = this.element;
+            element.removeEventListener('touchstart', this.onStart, false);
+            element.removeEventListener('touchmove', this.onMove, false);
+            element.removeEventListener('touchend', this.onEnd, false);
+            element.removeEventListener('mousedown', this.onStart, false);
+            element.removeEventListener('mousemove', this.onMove, false);
+            element.removeEventListener('mouseup', this.onEnd, false);
         };
         TouchSweep.prototype.getCoords = function (event) {
+            var result = this.moveCoords;
             var isMouseEvent = 'pageX' in event;
-            var x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
-            var y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
-            return { x: x, y: y };
+            result.x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
+            result.y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
+            return result;
         };
-        TouchSweep.prototype.onStart = function (event) {
-            var _a = this.getCoords(event), x = _a.x, y = _a.y;
-            this.coords.startX = x;
-            this.coords.startY = y;
+        TouchSweep.prototype.resetCoords = function () {
+            this.coords = defaultCoordinates;
         };
-        TouchSweep.prototype.onEnd = function (event) {
-            var _a = this.getCoords(event), x = _a.x, y = _a.y;
-            this.coords.endX = x;
-            this.coords.endY = y;
-            this.dispatch();
-        };
-        TouchSweep.prototype.getEventName = function () {
+        TouchSweep.prototype.getEndEventName = function () {
             var threshold = this.threshold;
@@ -93,12 +125,38 @@ var _a = this.coords, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         };
-        TouchSweep.prototype.dispatch = function () {
-            var eventName = this.getEventName();
+        TouchSweep.prototype.dispatchEvent = function (type) {
+            var event = new CustomEvent(type, {
+                detail: __assign(__assign({}, this.eventData), { coords: this.coords })
+            });
+            this.element.dispatchEvent(event);
+        };
+        TouchSweep.prototype.dispatchEnd = function () {
+            var eventName = this.getEndEventName();
             if (!eventName) {
                 return;
             }
-            var event = new CustomEvent(eventName, {
-                detail: this.eventData
-            });
-            this.element.dispatchEvent(event);
+            this.dispatchEvent(eventName);
         };
+        TouchSweep.prototype.onStart = function (event) {
+            var _a = this.getCoords(event), x = _a.x, y = _a.y;
+            this.isMoving = true;
+            this.coords.startX = x;
+            this.coords.startY = y;
+        };
+        TouchSweep.prototype.onMove = function (event) {
+            if (!this.isMoving) {
+                return;
+            }
+            var _a = this.getCoords(event), x = _a.x, y = _a.y;
+            this.coords.moveX = x;
+            this.coords.moveY = y;
+            this.dispatchEvent(exports.TouchSwipeEventType.move);
+        };
+        TouchSweep.prototype.onEnd = function (event) {
+            var _a = this.getCoords(event), x = _a.x, y = _a.y;
+            this.isMoving = false;
+            this.coords.endX = x;
+            this.coords.endY = y;
+            this.dispatchEnd();
+            this.resetCoords();
+        };
         return TouchSweep;
@@ -105,0 +163,0 @@ }());

package.json

 {
 	"name": "touchsweep",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "Super tiny vanilla JS module to detect swipe direction",
@@ -36,9 +36,9 @@ "keywords": [
 		"@rollup/plugin-typescript": "9.0.2",
-		"@typescript-eslint/eslint-plugin": "5.42.0",
-		"@typescript-eslint/parser": "5.42.0",
-		"eslint": "8.26.0",
+		"@typescript-eslint/eslint-plugin": "5.43.0",
+		"@typescript-eslint/parser": "5.43.0",
+		"eslint": "8.27.0",
 		"eslint-config-prettier": "8.5.0",
-		"rollup": "3.2.5",
-		"typescript": "4.8.4"
+		"rollup": "3.3.0",
+		"typescript": "4.9.3"
 	}
 }

README.md

@@ -51,3 +51,3 @@ [![Travis CI](https://travis-ci.com/scriptex/touchsweep.svg?branch=master)](https://travis-ci.com/scriptex/touchsweep)
 
-const touchSwipeInstance = new TouchSweep(area, data, touchThreshold);
+const touchSweepInstance = new TouchSweep(area, data, touchThreshold);
 
@@ -58,3 +58,4 @@ // Then listen for custom swipe events and do your magic:
 	// You have swiped left
-	// Custom event data is located in event.detail
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
 });
@@ -64,3 +65,4 @@
 	// You have swiped right
-	// Custom event data is located in event.detail
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
 });
@@ -70,3 +72,4 @@
 	// You have swiped down
-	// Custom event data is located in event.detail
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
 });
@@ -76,8 +79,16 @@
 	// You have swiped up
-	// Custom event data is located in event.detail
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
 });
 
+area.addEventListener('swipemove', event => {
+	// You are swiped continuously
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
+});
+
 area.addEventListener('tap', event => {
 	// You have tapped
-	// Custom event data is located in event.detail
+	// Custom event data is located in `event.detail`
+	// Details about coordinates are also available under `event.detail`
 });
@@ -98,5 +109,5 @@ ```
 
-The `TouchSwipe` instance exposes two public methods which allow you to add or to remove all event listeners responsible for the module functionality.
+The `TouchSweep` 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.
+This is useful in cases where you want to remove the `TouchSweep` container/area from the DOM and prevent possible memory leaks by removing all event listeners related to this DOM element.
 
@@ -106,3 +117,3 @@ In order to remove all previously attached event listeners:
 ```javascript
-touchSwipeInstance.unbind();
+touchSweepInstance.unbind();
 ```
@@ -113,3 +124,3 @@
 ```javascript
-touchSwipeInstance.bind();
+touchSweepInstance.bind();
 ```
@@ -125,4 +136,8 @@
 
-Check it out [here](https://github.com/scriptex/touchsweep/blob/master/demo/index.html)
+Check the code [here](https://github.com/scriptex/touchsweep/blob/master/demo/index.html) and the live demo [here](https://touchsweep.atanas.info)
 
+## Typescript
+
+`TouchSweep` is written in Typescript and provides full Typescript support out of the box.
+
 ## LICENSE
@@ -129,0 +144,0 @@

src/touchsweep.ts

 export const enum TouchSwipeEventType {
+	up = 'swipeup',
 	tap = 'tap',
-	up = 'swipeup',
 	down = 'swipedown',
+	move = 'swipemove',
 	left = 'swipeleft',
@@ -9,8 +10,25 @@ right = 'swiperight'
 
+export type TouchSwipeCoordinateType = 'startX' | 'startY' | 'moveX' | 'moveY' | 'endX' | 'endY';
+
+export type TouchSwipeCoordinates = Record<'x' | 'y', number>;
+
+const defaultCoordinates = {
+	endX: 0,
+	endY: 0,
+	moveX: 0,
+	moveY: 0,
+	startX: 0,
+	startY: 0
+};
+
 export default class TouchSweep {
+	public eventData: Record<string, unknown>;
+
 	private element: HTMLElement;
-	private eventData: Record<string, unknown>;
 	private threshold: number;
-	private coords: Record<'startX' | 'startY' | 'endX' | 'endY', number>;
 
+	private coords: Record<TouchSwipeCoordinateType, number>;
+	private isMoving: boolean;
+	private moveCoords: TouchSwipeCoordinates;
+
 	constructor(element = document.body, data = {}, threshold = 40) {
@@ -20,10 +38,9 @@ this.element = element;
 		this.threshold = threshold;
-		this.coords = {
-			startX: 0,
-			startY: 0,
-			endX: 0,
-			endY: 0
-		};
 
+		this.coords = defaultCoordinates;
+		this.isMoving = false;
+		this.moveCoords = { x: 0, y: 0 };
+
 		this.onStart = this.onStart.bind(this);
+		this.onMove = this.onMove.bind(this);
 		this.onEnd = this.onEnd.bind(this);
@@ -37,40 +54,38 @@
 	public bind(): void {
-		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);
+		const { element } = this;
+
+		element.addEventListener('touchstart', this.onStart, false);
+		element.addEventListener('touchmove', this.onMove, false);
+		element.addEventListener('touchend', this.onEnd, false);
+		element.addEventListener('mousedown', this.onStart, false);
+		element.addEventListener('mousemove', this.onMove, false);
+		element.addEventListener('mouseup', this.onEnd, false);
 	}
 
 	public unbind(): void {
-		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);
+		const { element } = this;
+
+		element.removeEventListener('touchstart', this.onStart, false);
+		element.removeEventListener('touchmove', this.onMove, false);
+		element.removeEventListener('touchend', this.onEnd, false);
+		element.removeEventListener('mousedown', this.onStart, false);
+		element.removeEventListener('mousemove', this.onMove, false);
+		element.removeEventListener('mouseup', this.onEnd, false);
 	}
 
-	private getCoords(event: MouseEvent | TouchEvent): Record<'x' | 'y', number> {
+	private getCoords(event: MouseEvent | TouchEvent): TouchSwipeCoordinates {
+		const result = this.moveCoords;
 		const isMouseEvent = 'pageX' in event;
-		const x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
-		const y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
 
-		return { x, y };
-	}
+		result.x = isMouseEvent ? event.pageX : event.changedTouches[0].screenX;
+		result.y = isMouseEvent ? event.pageY : event.changedTouches[0].screenY;
 
-	private onStart(event: MouseEvent | TouchEvent): void {
-		const { x, y } = this.getCoords(event);
-
-		this.coords.startX = x;
-		this.coords.startY = y;
+		return result;
 	}
 
-	private onEnd(event: MouseEvent | TouchEvent): void {
-		const { x, y } = this.getCoords(event);
-
-		this.coords.endX = x;
-		this.coords.endY = y;
-
-		this.dispatch();
+	private resetCoords(): void {
+		this.coords = defaultCoordinates;
 	}
 
-	private getEventName(): TouchSwipeEventType | '' {
+	private getEndEventName(): TouchSwipeEventType | '' {
 		const threshold = this.threshold;
@@ -107,5 +122,16 @@ const { startX, startY, endX, endY } = this.coords;
 
-	private dispatch(): void {
-		const eventName = this.getEventName();
+	private dispatchEvent(type: TouchSwipeEventType): void {
+		const event = new CustomEvent(type, {
+			detail: {
+				...this.eventData,
+				coords: this.coords
+			}
+		});
 
+		this.element.dispatchEvent(event);
+	}
+
+	private dispatchEnd(): void {
+		const eventName = this.getEndEventName();
+
 		if (!eventName) {
@@ -115,8 +141,38 @@ return;
 
-		const event = new CustomEvent(eventName, {
-			detail: this.eventData
-		});
+		this.dispatchEvent(eventName);
+	}
 
-		this.element.dispatchEvent(event);
+	private onStart(event: MouseEvent | TouchEvent): void {
+		const { x, y } = this.getCoords(event);
+
+		this.isMoving = true;
+
+		this.coords.startX = x;
+		this.coords.startY = y;
 	}
+
+	private onMove(event: MouseEvent | TouchEvent): void {
+		if (!this.isMoving) {
+			return;
+		}
+
+		const { x, y } = this.getCoords(event);
+
+		this.coords.moveX = x;
+		this.coords.moveY = y;
+
+		this.dispatchEvent(TouchSwipeEventType.move);
+	}
+
+	private onEnd(event: MouseEvent | TouchEvent): void {
+		const { x, y } = this.getCoords(event);
+
+		this.isMoving = false;
+
+		this.coords.endX = x;
+		this.coords.endY = y;
+
+		this.dispatchEnd();
+		this.resetCoords();
+	}
 }

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

41225

increased by75.4%

Lines of code

319

increased by46.33%

Number of lines in readme file

230

increased by6.98%

No dependency changes