Add touch controller for enhanced touch event handling

Introduced a new 'touch_controller.js' file to manage touch events effectively. Updated 'package.json' to include the touch controller configuration. This addition enables immediate and comprehensive handling of touch interactions within the PWA.

assets/package.json

@@ -103,6 +103,13 @@
                 "fetch": "eager",
                 "enabled": true
             },
+            "touch": {
+                "main": "src/touch_controller.js",
+                "name": "pwa/touch",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
+            },
             "vibration": {
                 "main": "src/vibration_controller.js",
                 "name": "pwa/vibration",

assets/src/touch_controller.js

@@ -0,0 +1,76 @@
+'use strict';
+
+import AbstractController from './abstract_controller.js';
+
+export default class extends AbstractController {
+    ongoingTouches = [];
+
+    connect() {
+        this.element.addEventListener("touchstart", this.onTouchStart);
+        this.element.addEventListener("touchmove", this.onTouchMove);
+        this.element.addEventListener("touchcancel", this.onTouchCancel);
+        this.element.addEventListener("touchend", this.onTouchEnd);
+    }
+
+    copyTouch = ({ identifier, clientX, clientY, pageX, pageY, radiusX, radiusY, screenX, screenY, force, rotationAngle})=> {
+        return {
+            identifier, clientX, clientY, pageX, pageY, radiusX, radiusY, screenX, screenY, force, rotationAngle,
+            top: this.element.offsetTop,
+            left: this.element.offsetLeft,
+        };
+    }
+
+    onTouchEnd = (event) => {
+        event.preventDefault();
+        const {changedTouches} = event;
+        for (let i = 0; i < changedTouches.length; i++) {
+            const idx = this.ongoingTouchIndexById(changedTouches[i].identifier);
+            this.ongoingTouches.splice(idx, 1);
+            this.dispatchEvent('touch:ended', { touch: changedTouches[i], bubbles: true });
+        }
+        this.dispatchEvent('touch:updated', { touches: this.ongoingTouches, bubbles: true });
+    }
+
+    onTouchCancel = (event) => {
+        event.preventDefault();
+        const {changedTouches} = event;
+        for (let i = 0; i < changedTouches.length; i++) {
+            const idx = this.ongoingTouchIndexById(changedTouches[i].identifier);
+            this.ongoingTouches.splice(idx, 1);
+            this.dispatchEvent('touch:cancelled', { touch: changedTouches[i], bubbles: true });
+        }
+        this.dispatchEvent('touch:updated', { touches: this.ongoingTouches, bubbles: true });
+    }
+
+    onTouchMove = (event) => {
+        event.preventDefault();
+        const {changedTouches} = event;
+        for (let i = 0; i < changedTouches.length; i++) {
+            const idx = this.ongoingTouchIndexById(changedTouches[i].identifier);
+            this.ongoingTouches.splice(idx, 1, this.copyTouch(changedTouches[i]))
+            this.dispatchEvent('touch:moved', { touch: changedTouches[i], bubbles: true });
+        }
+        this.dispatchEvent('touch:updated', { touches: this.ongoingTouches, bubbles: true });
+    }
+
+    onTouchStart = (event) => {
+        event.preventDefault();
+        const {changedTouches} = event;
+        for (let i = 0; i < changedTouches.length; i++) {
+            this.ongoingTouches.push(this.copyTouch(changedTouches[i]));
+            this.dispatchEvent('touch:started', { touch: changedTouches[i], bubbles: true });
+        }
+        this.dispatchEvent('touch:updated', { touches: this.ongoingTouches, bubbles: true });
+    }
+
+    ongoingTouchIndexById = (idToFind) => {
+        for (let i = 0; i < this.ongoingTouches.length; i++) {
+            const id = this.ongoingTouches[i].identifier;
+
+            if (id === idToFind) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}