webstead: allow for editing C version of character

The new code triggers when the <input> is edited.  It updates the
pixel tickyboxes and the rendered glyph, but suppresses updating the
<input> itself.  This can be used for interactive editing, but is
mostly to allow for pasting in character bitmaps.

diff --git a/webstead.xhtml b/webstead.xhtml
index 7f5e83715a007b0f963c1e8109452f3c0db1d15c..cc276eecd652c83ce90ed9d6e6a5248b3b57569b 100644 (file)
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -44,7 +44,7 @@
          And it's not a module because Safari can't handle that. -->
     <script async="async"><![CDATA[
     var Bedstead;
-    function update_glyph() {
+    function update_glyph(c_update_needed) {
         var args = [];
         var cstr = "";
         for (var row of document.querySelector('#pixels').rows) {
@@ -58,8 +58,9 @@
             args.push(arg.toString());
             cstr += "\\" + arg.toString(8).padStart(2, "0");
         }
-        document.getElementById("c").value =
-            ` {"${cstr}", U() },`;
+        if (c_update_needed) {
+            document.getElementById("c").value = ` {"${cstr}", U() },`;
+        }
         Bedstead({
             arguments: args,
             print: function(charstring) {
@@ -94,10 +95,13 @@
     }
     function init() {
         for (var e of document.querySelectorAll('#pixels input')) {
-            e.onchange = update_glyph;
+            e.onchange = e => update_glyph(true);
         }
-        document.querySelector('#inpane').onreset = update_glyph;
-        update_glyph();
+        document.querySelector('#c').oninput = function(e) {
+            from_c(this.value);
+            update_glyph(false);
+        };
+        update_glyph(true);
     }
     import("./bedstead.js").then((module) => {
         Bedstead = module.default;