webstead: support arrow keys for navigation

diff --git a/webstead.xhtml b/webstead.xhtml
index 598b7dc442ba957eabc0753a9a4f691d0dcfdf8b..cf8118a9e8b75358a4201dbee2ae4b4305835ef1 100644 (file)
--- 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);