fix normal touch events in draggable windows

jvde-github · Sep 29, 2024 · 78c6a23 · 78c6a23
1 parent df5ba27
commit 78c6a23
Show file tree

Hide file tree

Showing 7 changed files with 2,523 additions and 2,564 deletions.
diff --git a/Application/AIS-catcher.h b/Application/AIS-catcher.h
@@ -21,5 +21,5 @@
 #define VERSION		   "v0.60"
 #define COPYRIGHT	   "jvde-github and other contributors"
 
-#define VERSION_DESCRIBE	"v0.60-113-gf2f20648"
-#define VERSION_URL_TAG	"v0_60_113_gf2f20648"
+#define VERSION_DESCRIBE	"1727605515"
+#define VERSION_URL_TAG	"1727605515"
diff --git a/HTML/index.html b/HTML/index.html
@@ -20,7 +20,7 @@
 	<script src="https://cdn.jsdelivr.net/npm/ol@v10.0.0/dist/ol.js"></script>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.0.0/ol.css">
 
-	<link rel="stylesheet" href="style_1727604707.css" />
+	<link rel="stylesheet" href="style_1727605515.css" />
 	<link rel="stylesheet" href="config.css" />
 
 </head>
@@ -1006,7 +1006,7 @@
 	</div>
 	<div class="bottombar"></div>
 
-	<script src="script_1727604707.js"></script>
+	<script src="script_1727605515.js"></script>
 	<script src="config.js"></script>
 
 	<script>

diff --git a/HTML/index_html.cpp b/HTML/index_html.cpp
diff --git a/HTML/index_local.html b/HTML/index_local.html
@@ -20,7 +20,7 @@
 	<script src="cdn/npm/ol@v10.0.0/dist/ol.js"></script>
 	<link rel="stylesheet" href="cdn/npm/ol@v10.0.0/ol.css">
 
-	<link rel="stylesheet" href="style_v0_60_113_gf2f20648.css" />
+	<link rel="stylesheet" href="style_1727605515.css" />
 	<link rel="stylesheet" href="config.css" />
 
 </head>
@@ -1006,7 +1006,7 @@
 	</div>
 	<div class="bottombar"></div>
 
-	<script src="script_v0_60_113_gf2f20648.js"></script>
+	<script src="script_1727605515.js"></script>
 	<script src="config.js"></script>
 
 	<script>

diff --git a/HTML/index_local_html.cpp b/HTML/index_local_html.cpp
diff --git a/HTML/script.js b/HTML/script.js
@@ -5178,20 +5178,11 @@ addOverlayLayer("NOAA", new ol.layer.Tile({
     })
 }));
 
-let isDraggingGlobal = false;
-let clickPrevent = false;
-
 function makeDraggable(element) {
     let offsetX, offsetY;
     let dragging = false;
     let startX, startY;
     const moveThreshold = 5;
-    isDraggingGlobal = false;
-
-    const computedStyle = window.getComputedStyle(element);
-    if (!['absolute', 'relative', 'fixed'].includes(computedStyle.position)) {
-        element.style.position = 'absolute';
-    }
 
     function onDragStart(clientX, clientY) {
         startX = clientX;
@@ -5200,15 +5191,20 @@ function makeDraggable(element) {
         offsetY = clientY - element.offsetTop;
         dragging = false;
         clickPrevent = false;
+        element.classList.remove('dragging');
     }
 
-    function onDragMove(clientX, clientY) {
+    function onDragMove(clientX, clientY, e) {
         const dx = clientX - startX;
         const dy = clientY - startY;
 
         if (!dragging && (Math.abs(dx) > moveThreshold || Math.abs(dy) > moveThreshold)) {
             dragging = true;
             isDraggingGlobal = true;
+            clickPrevent = true; 
+            element.classList.add('dragging'); 
+
+            e.preventDefault();
         }
 
         if (dragging) {
@@ -5220,70 +5216,45 @@ function makeDraggable(element) {
     function onDragEnd() {
         if (dragging) {
             isDraggingGlobal = false;
-            clickPrevent = true; // Set flag to prevent click
+            clickPrevent = true; 
+            element.classList.remove('dragging');
         }
         dragging = false;
     }
 
-    element.addEventListener('mousedown', (e) => {
-        e.preventDefault();
+    element.addEventListener('pointerdown', (e) => {
+        e.preventDefault(); 
+        element.setPointerCapture(e.pointerId);
         onDragStart(e.clientX, e.clientY);
 
-        const onMouseMove = (e) => {
-            onDragMove(e.clientX, e.clientY);
+        const onPointerMove = (e) => {
+            onDragMove(e.clientX, e.clientY, e);
         };
 
-        const onMouseUp = (e) => {
+        const onPointerUp = (e) => {
             onDragEnd();
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
+            element.removeEventListener('pointermove', onPointerMove);
+            element.removeEventListener('pointerup', onPointerUp);
         };
 
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
+        element.addEventListener('pointermove', onPointerMove);
+        element.addEventListener('pointerup', onPointerUp);
     });
 
-    element.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        const touch = e.touches[0];
-        onDragStart(touch.clientX, touch.clientY);
-
-        const onTouchMove = (e) => {
+    element.addEventListener('click', (e) => {
+        if (clickPrevent) {
             e.preventDefault();
-            const touch = e.touches[0];
-            onDragMove(touch.clientX, touch.clientY);
-        };
-
-        const onTouchEnd = (e) => {
-            onDragEnd();
-            document.removeEventListener('touchmove', onTouchMove);
-            document.removeEventListener('touchend', onTouchEnd);
-        };
-
-        document.addEventListener('touchmove', onTouchMove, { passive: false });
-        document.addEventListener('touchend', onTouchEnd);
+            e.stopPropagation();
+            clickPrevent = false;
+            return;
+        }
     });
 }
 
 document.querySelectorAll('.draggable').forEach(card => {
     makeDraggable(card);
 });
 
-document.addEventListener('click', function (e) {
-    if (clickPrevent) {
-        e.preventDefault();
-        e.stopPropagation();
-        clickPrevent = false;
-        return;
-    }
-
-    if (isDraggingGlobal) {
-        e.preventDefault();
-        e.stopPropagation();
-        isDraggingGlobal = false;
-    }
-}, true);
-
 
 let mdabout = "This content can be defined by the owner of the station";