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,72 +89,92 @@
 
     }
 
-    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 startWidth = parseFloat(periodTimeLine.style.width);
-                    const containerWidth = timelineContainer.clientWidth;
+            const startLeft = parseFloat(periodTimeLine.style.left);
+            const isLeftHandle = event.target.classList.contains("left");
+            handleMoving = true
+            const onMouseMove = (moveEvent) => {
+
+                if (!handleMoving) return;
+
+                const deltaX = (moveEvent.clientX || moveEvent.changedTouches[0].clientX) - startX;
+                const containerWidth = timelineContainer.clientWidth;
+                const newWidth =
+                    startWidth + ((isLeftHandle ? -deltaX : deltaX) / containerWidth) * 100;
+
+                if (isLeftHandle) {
                     const newLeft = startLeft + (deltaX / containerWidth) * 100;
+                    adjustPeriodPosition(newLeft, newWidth);
+                } else {
+                    adjustPeriodPosition(parseFloat(periodTimeLine.style.left), newWidth);
+                }
 
-                    adjustPeriodPosition(newLeft, parseFloat(periodTimeLine.style.width));
+                updatePeriodTimeLabel();
+            };
+            const mouseUp = () => {
+                snapHandlesToQuarters();
+                generateAllEtudRow();
 
-                    updatePeriodTimeLabel();
+                timelineContainer.removeEventListener("mousemove", onMouseMove);
-                };
+                handleMoving = false;
+                func_call();
 
-                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");
-
-                const onMouseMove = (moveEvent) => {
-                    const deltaX = moveEvent.clientX - startX;
-                    const containerWidth = timelineContainer.clientWidth;
-                    const newWidth =
-                        startWidth + ((isLeftHandle ? -deltaX : deltaX) / containerWidth) * 100;
-
-                    if (isLeftHandle) {
-                        const newLeft = startLeft + (deltaX / containerWidth) * 100;
-                        adjustPeriodPosition(newLeft, newWidth);
-                    } else {
-                        adjustPeriodPosition(parseFloat(periodTimeLine.style.left), newWidth);
-                    }
-
-                    updatePeriodTimeLabel();
-                };
-
-                document.addEventListener("mousemove", onMouseMove);
-                document.addEventListener(
-                    "mouseup",
-                    () => {
-                        snapHandlesToQuarters();
-                        generateAllEtudRow();
-
-                        document.removeEventListener("mousemove", onMouseMove);
-
-                        func_call();
-
-                    },
-                    { once: true }
-                );
             }
-        });
+            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) {