Support for touch events

Author: r0x0r

webview/js/customize.js

@@ -41,32 +41,68 @@
         var initialX = 0;
         var initialY = 0;
 
-        function onMouseMove(ev) {
-            var x = ev.screenX - initialX;
-            var y = ev.screenY - initialY;
+        // Extract coordinates from mouse or touch event
+        function getEventCoords(ev) {
+            if (ev.type.startsWith('touch')) {
+                var touch = ev.touches[0] || ev.changedTouches[0];
+                return {
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                    screenX: touch.screenX,
+                    screenY: touch.screenY
+                };
+            }
+            return {
+                clientX: ev.clientX,
+                clientY: ev.clientY,
+                screenX: ev.screenX,
+                screenY: ev.screenY
+            };
+        }
+
+        function onMove(ev) {
+            var coords = getEventCoords(ev);
+            var x = coords.screenX - initialX;
+            var y = coords.screenY - initialY;
             window.pywebview._jsApiCallback('pywebviewMoveWindow', [x, y], 'move');
+
+            if (ev.type.startsWith('touch')) {
+                ev.preventDefault();
+            }
         }
 
-        function onMouseUp() {
-            window.removeEventListener('mousemove', onMouseMove);
-            window.removeEventListener('mouseup', onMouseUp);
+        function onEnd() {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onEnd);
+            window.removeEventListener('touchmove', onMove);
+            window.removeEventListener('touchend', onEnd);
         }
 
-        function onMouseDown(ev) {
+        function onStart(ev) {
             if (
                 '%(drag_region_direct_target_only)s' === 'True' &&
                 !ev.target.matches('%(drag_selector)s')
             ) {
                 return
             }
 
-            initialX = ev.clientX;
-            initialY = ev.clientY;
-            window.addEventListener('mouseup', onMouseUp);
-            window.addEventListener('mousemove', onMouseMove);
+            // Only handle single-touch events
+            if (ev.type.startsWith('touch') && ev.touches.length !== 1) {
+                return;
+            }
+
+            var coords = getEventCoords(ev);
+            initialX = coords.clientX;
+            initialY = coords.clientY;
+
+            window.addEventListener('mouseup', onEnd);
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('touchend', onEnd);
+            window.addEventListener('touchmove', onMove, {passive: false});
         }
 
-        function onBodyMouseDown(event) {
+        // Unified body handler for drag selector
+        function onBodyStart(event) {
             var target = event.target;
             var dragSelectorElements = document.querySelectorAll('%(drag_selector)s');
 
@@ -75,7 +111,7 @@
                     // Check if target matches the drag selector
                     for (var i = 0; i < dragSelectorElements.length; i++) {
                         if (dragSelectorElements[i] === target) {
-                            onMouseDown(event);
+                            onStart(event);
                             return;
                         }
                     }
@@ -86,11 +122,13 @@
             }
         }
 
-        document.body.addEventListener('mousedown', onBodyMouseDown);
+        document.body.addEventListener('mousedown', onBodyStart);
+        document.body.addEventListener('touchstart', onBodyStart);
 
-            // easy drag for edge chromium
+        // easy drag for edge chromium
         if ('%(easy_drag)s' === 'True') {
-            window.addEventListener('mousedown', onMouseDown);
+            window.addEventListener('mousedown', onStart);
+            window.addEventListener('touchstart', onStart);
         }
 
         if ('%(zoomable)s' === 'False') {