feat: Swipe Detector

Author: wnr

.gitignore

@@ -57,3 +57,4 @@ typings/
 # dotenv environment variables file
 .env
 
+*.iml

README.md

@@ -1,2 +1,2 @@
 # swipe-detector
-Javascript Swipe gesture detector.
+Javascript Swipe gesture detector. By Daniel & Lucas.

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "swipe-detector",
+  "version": "0.1.0",
+  "description": "avascript Swipe gesture detector.",
+  "main": "src/swipe-detector.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wnr/swipe-detector.git"
+  },
+  "keywords": [
+    "swipe",
+    "event",
+    "javascript"
+  ],
+  "author": "Daniel Kihlgren & Lucas Wiener",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wnr/swipe-detector/issues"
+  },
+  "homepage": "https://github.com/wnr/swipe-detector#readme"
+}

src/swipe-detector.js

@@ -0,0 +1,68 @@
+export default function SwipeDetector({
+    element,
+    minVelocity = 0.3,
+    maxDistanceY = 20,
+    minDistanceX = 10
+}) {
+    var startX;
+    var startY;
+    var startTime;
+    var swipeLeftListeners = [];
+    var swipeRightListeners = [];
+
+    function triggerSwipeRight() {
+        swipeRightListeners.forEach(function (listener) {
+            listener();
+        });
+    }
+
+    function triggerSwipeLeft() {
+        swipeLeftListeners.forEach(function (listener) {
+            listener();
+        });
+    }
+
+    function handleTouchStart (e) {
+        startX = e.changedTouches[0].pageX;
+        startY = e.changedTouches[0].pageY;
+        startTime = new Date().getTime();
+    }
+
+    function handleTouchEnd(e) {
+        const endX = e.changedTouches[0].pageX;
+        const endY = e.changedTouches[0].pageY;
+        const endTime = new Date().getTime();
+
+        const elapsedDistanceX = endX - startX;
+        const elapsedDistanceY = endY - startY;
+        const elapsedTime = endTime - startTime;
+
+        const velocityX = Math.abs(elapsedDistanceX) / elapsedTime; // px/ms
+
+        if (Math.abs(elapsedDistanceX) >= minDistanceX && velocityX >= minVelocity && Math.abs(elapsedDistanceY) <= maxDistanceY) {
+            if (elapsedDistanceX > 0) {
+                triggerSwipeRight();
+            } else {
+                triggerSwipeLeft();
+            }
+        }
+    }
+
+    element.addEventListener('touchend', handleTouchEnd);
+    element.addEventListener('touchstart', handleTouchStart);
+
+    return {
+        onLeftSwipe: function (callback) {
+            swipeLeftListeners.push(callback);
+        },
+        onRightSwipe: function (callback) {
+            swipeRightListeners.push(callback);
+        },
+        remove: function () {
+            element.removeEventListener('touchstart', handleTouchStart);
+            element.removeEventListener('touchend', handleTouchEnd);
+            swipeLeftListeners = [];
+            swipeRightListeners = [];
+        }
+    };
+}