Assiduites : saisie sur mobile #723

app/templates/assiduites/widgets/timeline.j2

@@ -18,6 +18,8 @@
 
     const period_default = {{ periode_defaut }};
 
+    let handleMoving = false;
+
     function createTicks() {
         let i = t_start;
 
@@ -87,42 +89,21 @@
 
     }
 
-    function setupTimeLine(callback) {
+    function timelineMainEvent(event, callback) {
         const func_call = callback ? callback : () => { };
-        timelineContainer.addEventListener("mousedown", (event) => {
-            const startX = event.clientX;
 
-            if (event.target === periodTimeLine) {
+        const startX = (event.clientX || event.changedTouches[0].clientX);
-                const startLeft = parseFloat(periodTimeLine.style.left);
 
-                const onMouseMove = (moveEvent) => {
+        if (event.target.classList.contains("period-handle")) {
-                    const deltaX = moveEvent.clientX - startX;
-                    const containerWidth = timelineContainer.clientWidth;
-                    const newLeft = startLeft + (deltaX / containerWidth) * 100;
-
-                    adjustPeriodPosition(newLeft, parseFloat(periodTimeLine.style.width));
-
-                    updatePeriodTimeLabel();
-                };
-
-                document.addEventListener("mousemove", onMouseMove);
-                document.addEventListener(
-                    "mouseup",
-                    () => {
-                        generateAllEtudRow();
-                        snapHandlesToQuarters();
-                        document.removeEventListener("mousemove", onMouseMove);
-                        func_call();
-                    },
-                    { once: true }
-                );
-            } else if (event.target.classList.contains("period-handle")) {
             const startWidth = parseFloat(periodTimeLine.style.width);
             const startLeft = parseFloat(periodTimeLine.style.left);
             const isLeftHandle = event.target.classList.contains("left");
-
+            handleMoving = true
             const onMouseMove = (moveEvent) => {
-                    const deltaX = moveEvent.clientX - startX;
+
+                if (!handleMoving) return;
+
+                const deltaX = (moveEvent.clientX || moveEvent.changedTouches[0].clientX) - startX;
                 const containerWidth = timelineContainer.clientWidth;
                 const newWidth =
                     startWidth + ((isLeftHandle ? -deltaX : deltaX) / containerWidth) * 100;
@@ -136,23 +117,64 @@
 
                 updatePeriodTimeLabel();
             };
-
+            const mouseUp = () => {
-                document.addEventListener("mousemove", onMouseMove);
-                document.addEventListener(
-                    "mouseup",
-                    () => {
                 snapHandlesToQuarters();
                 generateAllEtudRow();
 
-                        document.removeEventListener("mousemove", onMouseMove);
+                timelineContainer.removeEventListener("mousemove", onMouseMove);
-
+                handleMoving = false;
                 func_call();
 
-                    },
+            }
+            timelineContainer.addEventListener("mousemove", onMouseMove);
+            timelineContainer.addEventListener("touchmove", onMouseMove);
+            document.addEventListener(
+                "mouseup",
+                mouseUp,
+            );
+            document.addEventListener(
+                "touchend",
+                mouseUp,
+            );
+        } else if (event.target === periodTimeLine) {
+
+            const startLeft = parseFloat(periodTimeLine.style.left);
+
+            const onMouseMove = (moveEvent) => {
+                console.warn("move Period")
+                if (handleMoving) return;
+                const deltaX = (moveEvent.clientX || moveEvent.changedTouches[0].clientX) - startX;
+                const containerWidth = timelineContainer.clientWidth;
+                const newLeft = startLeft + (deltaX / containerWidth) * 100;
+
+                adjustPeriodPosition(newLeft, parseFloat(periodTimeLine.style.width));
+
+                updatePeriodTimeLabel();
+            };
+            const mouseUp = () => {
+                generateAllEtudRow();
+                snapHandlesToQuarters();
+                timelineContainer.removeEventListener("mousemove", onMouseMove);
+                func_call();
+            }
+            timelineContainer.addEventListener("mousemove", onMouseMove);
+            timelineContainer.addEventListener("touchmove", onMouseMove);
+            document.addEventListener(
+                "mouseup",
+                mouseUp,
+                { once: true }
+            );
+            document.addEventListener(
+                "touchend",
+                mouseUp,
                 { once: true }
             );
         }
-        });
+    }
+
+    function setupTimeLine(callback) {
+        timelineContainer.addEventListener("mousedown", (e) => { timelineMainEvent(e, callback) });
+        timelineContainer.addEventListener("touchstart", (e) => { timelineMainEvent(e, callback) });
     }
 
     function adjustPeriodPosition(newLeft, newWidth) {