From: Ben Harris <bjh21@bjh21.me.uk>
Date: Sun, 12 Oct 2025 12:54:18 +0000 (+0100)
Subject: webstead: support arrow keys for navigation
X-Git-Tag: bedstead-3.261~35
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~bjharris/git?a=commitdiff_plain;h=1078f31ad16f3d61e6e92483d7167c5bce8b446a;p=bedstead.git

webstead: support arrow keys for navigation
---

diff --git a/webstead.xhtml b/webstead.xhtml
index 598b7dc..cf8118a 100644
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -98,9 +98,29 @@
         }
         update_glyph();
     }
+    function key_handler(e) {
+        var dx = 0, dy = 0;
+        switch (e.key) {
+        case "ArrowLeft":  dx = -1; break;
+        case "ArrowRight": dx = +1; break;
+        case "ArrowUp":    dy = -1; break;
+        case "ArrowDown":  dy = +1; break;
+        default: return;
+        }
+        var x = this.closest("td").cellIndex;
+        var y = this.closest("tr").rowIndex;
+        x = (x + dx + 5) % 5;
+        y = (y + dy + 9) % 9;
+        var target = document.querySelector('#pixels').rows[y].cells[x]
+                     .querySelector('input');
+        target.focus();
+        e.preventDefault();
+    }
     function init() {
-        for (var e of document.querySelectorAll('#pixels input'))
+        for (var e of document.querySelectorAll('#pixels input')) {
             e.onchange = e => update_glyph(true);
+            e.onkeydown = key_handler;
+        }
         document.querySelector('#c').oninput = function(e) {
             from_c(this.value);
             update_glyph(false);