Merge pull request #3 from ok2/codex/implement-swipe-navigation-for-touch-devices

README.md

@@ -42,7 +42,8 @@ An interactive web app that visualizes the **CosmoChron Binary Epoch (CoBiE)** t
 * **Live View**: On load, the app shows the current CoBiE time, UTC, and TAI.
 * **Navigate Periods**:
 
-  * ← / → buttons to move by Megasequence (or hold modifier keys for larger jumps).
+  * ← / → buttons to move by Megasequence (hold modifier keys for larger jumps).
+  * Swipe left/right (touch, mouse drag, or horizontal scroll) to perform the same navigation.
   * “Now” button to return to live mode.
 * **Manual Mode**: Click the CoBiE time to enter an arbitrary timestamp; press Enter or click elsewhere to apply.
 * **Compare Mode**: In manual mode, click the “Compare” field to set a second timestamp for difference calculations.

script.js

@@ -1007,3 +1007,43 @@ document.getElementById('toggleExtended').addEventListener('click', () => {
     // to ensure diff rows end up in the correct section
     updateTimeBreakdown(manualMode ? manualCobiets : toCobiets(new Date()));
 });
+
+// ── Swipe & Wheel Navigation ────────────────────────────────────────────────
+let swipeStartX = null;
+let swipeStartY = null;
+
+function swipeStart(e) {
+    const touch = e.touches ? e.touches[0] : e;
+    swipeStartX = touch.clientX;
+    swipeStartY = touch.clientY;
+}
+
+function swipeEnd(e) {
+    if (swipeStartX === null || swipeStartY === null) return;
+    const touch = e.changedTouches ? e.changedTouches[0] : e;
+    const dx = touch.clientX - swipeStartX;
+    const dy = touch.clientY - swipeStartY;
+    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) {
+        const direction = dx < 0 ? 1 : -1; // left → next, right → prev
+        navigatePeriod({
+            altKey: e.altKey || false,
+            shiftKey: e.shiftKey || false,
+            ctrlKey: e.ctrlKey || false
+        }, direction);
+    }
+    swipeStartX = swipeStartY = null;
+}
+
+document.addEventListener('touchstart', swipeStart, {passive: true});
+document.addEventListener('touchend', swipeEnd);
+document.addEventListener('mousedown', swipeStart);
+document.addEventListener('mouseup', swipeEnd);
+
+function wheelNavigate(e) {
+    if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
+        const direction = e.deltaX > 0 ? 1 : -1;
+        navigatePeriod(e, direction);
+    }
+}
+
+document.addEventListener('wheel', wheelNavigate);