From d0feb6be3416d19c0b65081cb7388ca6f480b7f6 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sat, 14 Jun 2025 10:52:10 +0200
Subject: [PATCH] Enable swipe and wheel navigation

---
 README.md |  3 ++-
 script.js | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 10563ab..653a870 100644
--- a/README.md
+++ b/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.
diff --git a/script.js b/script.js
index f0ce757..4218ebc 100644
--- a/script.js
+++ b/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);