feat: drag selected windows on touch

Author: indradhanush

index.html

@@ -446,6 +446,10 @@
       .card.chart .plot.can-select-window {
         cursor: pointer;
       }
+      .card.chart .plot,
+      .card.strip {
+        touch-action: pan-y;
+      }
       /* Fixed so the strip's height never depends on whether its svg is present.
      Must match the height drawTrips() computes: PAD.t + 2 + barH + 26. */
       .card.strip .plot {
@@ -507,6 +511,17 @@
         font-size: 10.5px;
         white-space: normal;
       }
+      .tt .touch-help {
+        display: none;
+      }
+      @media (pointer: coarse) {
+        .tt .keyboard-help {
+          display: none;
+        }
+        .tt .touch-help {
+          display: block;
+        }
+      }
 
       .scrolly {
         overflow-y: auto;

src/app.ts

@@ -345,7 +345,8 @@ interface Domain {
       `<span class="muted">${over ? `${out - LIMIT} over the ${LIMIT}-day limit`
                                   : `${LIMIT - out} days of headroom`}</span>` +
       (selected
-        ? `<hr><span class="selection-help">ESC to dismiss selection; arrow keys or H/L adjust by day; hold Shift to adjust by week.</span>`
+        ? `<hr><span class="selection-help keyboard-help">ESC to dismiss selection; arrow keys or H/L adjust by day; hold Shift to adjust by week.</span>` +
+          `<span class="selection-help touch-help">Swipe left or right to adjust the window; tap elsewhere to dismiss.</span>`
         : "");
   }
 
@@ -910,6 +911,67 @@ interface Domain {
     });
   }
 
+  function initChartSelectionTouchSliding(): void {
+    for (const host of [el("plot1"), el("trip-timeline")]) {
+      let pointerId: number | null = null;
+      let startX = 0;
+      let startY = 0;
+      let startDay = 0;
+      let startWindowEnd = 0;
+      let dragging = false;
+      let suppressClick = false;
+
+      host.addEventListener("pointerdown", (ev: PointerEvent) => {
+        if (ev.pointerType !== "touch" || selectedWindowEnd === null || !rollingHover) return;
+        pointerId = ev.pointerId;
+        startX = ev.clientX;
+        startY = ev.clientY;
+        startDay = rollingHover.dateAt(ev.clientX);
+        startWindowEnd = selectedWindowEnd;
+        dragging = false;
+        host.setPointerCapture(ev.pointerId);
+      });
+
+      host.addEventListener("pointermove", (ev: PointerEvent) => {
+        if (ev.pointerId !== pointerId || selectedWindowEnd === null || !rollingHover) return;
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        if (!dragging) {
+          if (Math.hypot(dx, dy) < 6) return;
+          if (Math.abs(dy) >= Math.abs(dx)) {
+            if (host.hasPointerCapture(ev.pointerId)) host.releasePointerCapture(ev.pointerId);
+            pointerId = null;
+            return;
+          }
+          dragging = true;
+        }
+
+        ev.preventDefault();
+        const dayDelta = rollingHover.dateAt(ev.clientX) - startDay;
+        const targetEnd = rollingHover.clampDate(startWindowEnd + dayDelta);
+        const days = targetEnd - selectedWindowEnd;
+        if (days !== 0) moveSelectedWindowBy(days);
+      });
+
+      const finish = (ev: PointerEvent): void => {
+        if (ev.pointerId !== pointerId) return;
+        if (host.hasPointerCapture(ev.pointerId)) host.releasePointerCapture(ev.pointerId);
+        suppressClick = dragging;
+        pointerId = null;
+        dragging = false;
+        if (suppressClick) setTimeout(() => { suppressClick = false; }, 0);
+      };
+      host.addEventListener("pointerup", finish);
+      host.addEventListener("pointercancel", finish);
+      host.addEventListener("click", (ev: MouseEvent) => {
+        if (!suppressClick) return;
+        suppressClick = false;
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+      }, true);
+    }
+  }
+
   function moveSelectedWindowBy(days: number): void {
     if (selectedWindowEnd === null || !rollingHover || !rollingTooltip) return;
     keepAlive();
@@ -1238,6 +1300,7 @@ interface Domain {
   initChartSelectionKeyboard();
   initChartScrollVisibility();
   initChartSelectionTouchDismissal();
+  initChartSelectionTouchSliding();
   loadFromFile();
   if (!restoreSharedData()) restoreData();
   restoreSelectedWindow();

test/app.test.js

@@ -41,7 +41,15 @@ test("rolling chart selection locks hover and supports keyboard control", () =>
   assert.match(appSource, /if \(ev\.pointerType !== "touch" \|\| selectedWindowEnd === null\) return;/);
   assert.match(appSource, /target\?\.closest\("\.card\.chart, #trip-timeline"\)/);
   assert.match(appSource, /initChartSelectionTouchDismissal\(\);/);
+  assert.match(appSource, /for \(const host of \[el\("plot1"\), el\("trip-timeline"\)\]\)/);
+  assert.match(appSource, /host\.addEventListener\("pointermove"/);
+  assert.match(appSource, /const dayDelta = rollingHover\.dateAt\(ev\.clientX\) - startDay;/);
+  assert.match(appSource, /const days = targetEnd - selectedWindowEnd;\s*if \(days !== 0\) moveSelectedWindowBy\(days\);/);
+  assert.match(appSource, /ev\.stopImmediatePropagation\(\);/);
+  assert.match(appSource, /initChartSelectionTouchSliding\(\);/);
   assert.match(appSource, /ESC to dismiss selection; arrow keys or H\/L adjust by day; hold Shift to adjust by week\./);
+  assert.match(appSource, /Swipe left or right to adjust the window; tap elsewhere to dismiss\./);
+  assert.match(indexSource, /touch-action: pan-y;/);
   assert.match(appSource, /rollingHover\.show\(selectedWindowEnd, true\)/);
   assert.match(indexSource, /\.tt \.selection-help \{[\s\S]*?white-space: normal;/);
   assert.match(appSource, /host\.onwheel = \(ev: WheelEvent\) => moveSelectedWindowFromWheel\(ev, host\);/);