Move prefix customization to bottom right of keybar

3 files changed, 31 insertions, 24 deletions

diff --git a/docs/repl.js b/docs/repl.js
index 1aaeb218..25eef499 100644
--- a/docs/repl.js
+++ b/docs/repl.js
@@ -78,13 +78,8 @@ sysvals.plot = (x,w) => {
   return '\0';
 }
 
-doc.prfx.onchange = ev => {
-  prefix = ev.target.value;
-  buildKb();
-}
-
 let keymode=0; // 1 for prefix
-let prefix=doc.prfx.value;
+let prefix='\\';
 doc.code.onkeydown = ev => {
   let k = ev.which;
   if (16<=k && k<=20) {
@@ -117,17 +112,20 @@ let kk=Array.from('`123456890-=~!@#$%^&*()_+qwertuiop[]QWERTIOP{}asdfghjkl;ASFGH
 let kv=Array.from('˜˘¨⁼⌜´˝∞¯•÷׬⎉⚇⍟◶⊘⎊⍎⍕⟨⟩√⋆⌽𝕨∊↑∧⊔⊏⊐π←→↙𝕎⍷𝕣⍋⊑⊒⍳⊣⊢⍉𝕤↕𝕗𝕘⊸∘○⟜⋄↖𝕊𝔽𝔾«⌾»·˙⥊𝕩↓∨⌊≡∾≍≠𝕏⍒⌈≢≤≥⇐‿↩');
 let keys={}, revkeys={}, primhelp={};
 kk.map((k,i)=>{keys[k]=kv[i];revkeys[kv[i]]=k;});
-let buildKb = () => {
-  doc.kb.innerHTML = keydesc.map(d=>{
-    let s = syncls[d[0]];
+doc.kb.innerHTML = keydesc
+  .map(d=>'<span class="'+syncls[d[0]]+'">'+Array.from(d)[1]+'</span>')
+  .concat(['<a href="keymap.html" target="_blank">map</a>'])
+  .join("&#8203;"); // zero-width space
+let setPrefix = () => {
+  doc.kb.querySelectorAll("span").forEach((x,i) => {
+    let d = keydesc[i];
     let c = Array.from(d)[1];
     let t = d.slice(1+c.length).replace(';','\n');
     let k = revkeys[c]; if (k) t += '\n'+prefix+(k==='"'?'&quot;':k);
-    primhelp[c] = t;
-    return '<span title="'+t+'" class="'+s+'">'+c+'</span>'
-  }).concat(['<a href="keymap.html" target="_blank">map</span>']).join("&#8203;"); // zero-width space
+    x.title = primhelp[c] = t;
+  });
 }
-buildKb();
+setPrefix();
 doc.kb.onmousedown = ev => {
   let t = ev.target;
   if (t.nodeName === 'SPAN') {
@@ -135,17 +133,25 @@ doc.kb.onmousedown = ev => {
   }
 }
 
+doc.kb.innerHTML += '<div class="kbext"></div>';
+doc.kbext = doc.kb.querySelector('.kbext');
+
 if (doc.demo) {
   let fonts=[["BQN386"],["DejaVu","Mod"],["Fairfax","HD"],["3270","font"],["Iosevka","Term"],["Julia","Mono"]];
   let fclass = f => f==="3270"?"f"+f:f
   let fontsel = '<select>'+fonts.map(f =>
       '<option value="'+f[0]+'">'+f[0]+(f[1]?' '+f[1]:'')+'</option>'
     ).join("")+'select';
-  doc.kb.innerHTML += fontsel;
-  doc.kb.querySelector('select').onchange =
+  doc.kbext.innerHTML += fontsel;
+  doc.kbext.querySelector('select').onchange =
     e=>doc.cont.className='cont '+fclass(e.target.value);
 }
 
+doc.kbext.innerHTML += '<input class="prfx" type="text" maxlength="1" value="'+prefix+'"/>';
+doc.kbext.querySelector(".prfx").onchange = ev => {
+  prefix = ev.target.value; setPrefix();
+}
+
 if (doc.perm) doc.perm.onmouseover = doc.perm.onfocus = () => {
   let b=(new TextEncoder()).encode(doc.code.value);
   doc.perm.href='#code='+btoa(String.fromCharCode(...b));
diff --git a/docs/style.css b/docs/style.css
index cfc3e346..3388aed7 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -112,7 +112,7 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   padding: 0.3em 0;
   position: relative;
 }
-.kb span {
+.kb span, .kb div {
   cursor: default;
   padding: 1px;
 }
@@ -120,11 +120,14 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   margin-left: 0.8em;
   font-size: 0.8em; vertical-align: 0.08em; opacity: 0.8;
 }
-.kb select {
+.kbext {
   position: absolute; bottom: 0.4em; right: 0.1em;
-  color: currentColor; opacity: 0.5;
   font-size: 0.7em;
-  border: none;
+}
+.kbext select { opacity: 0.5; border: none; }
+.prfx {
+  width: 1.2em; text-align: center; border: 1px solid #bdcac4;
+  margin-left: 0.6em;
 }
 .rel { position: relative; }
 .demo {
@@ -187,7 +190,7 @@ a:visited     { color: #3d155f; }
   body, input, select { color: #d6d7d9; background-color: #141515; }
   input       { border-color: #0c0d0e; }
   textarea, pre, code, .primitives tr td:first-child { color: #969698; background-color: #0c0d0e; }
-  textarea, pre, code, .kb { border-color: #040509; }
+  textarea, pre, code, .kb, .prfx { border-color: #040509; }
   .code, .codeCover { fill: #0c0d0e; stroke: #040509; }
   .codeCover  { stroke: #0c0d0e; }
   code        { border-color: #0c0d0e; background-color: #0f1011; }
diff --git a/docs/try.html b/docs/try.html
index 0faa3131..97919d20 100644
--- a/docs/try.html
+++ b/docs/try.html
@@ -9,11 +9,10 @@
     li { margin:0.7em 0; }
     textarea { padding:0.2em; }
     .perm, .count { font-size:0.7em; margin:-0.2em 0.8em 0 0; }
-    .run, .doexplain, .perm, .prfx { float:right; margin-left:0.4em; }
+    .run, .doexplain, .perm { float:right; margin-left:0.4em; }
     .doexplain.selected { background:#777; }
     .count { float:left; opacity:0.6; }
     .rslt { border:none; background:none; min-height:8em; }
-    .prfx { width: 1.1em; }
   </style>
 </head>
 <body>
@@ -22,7 +21,6 @@
     <div class="kb"></div>
     <textarea class="code" rows="8" autofocus></textarea>
     <div class="count"></div>
-    <input class="prfx" type="text" maxlength="1" value="\"/>
     <input class="run" type="submit" value="Run (or shift-enter)"/>
     <input class="doexplain" type="button" value="Explain"/>
     <a class="perm" href="#" title="Link with the code above embedded">permalink</a>
@@ -32,7 +30,7 @@
   <p>
     Notes:
     <ul>
-      <li>You can type special characters with a back<em>slash</em> (customizable) prefix, as shown by hovering over the character bar above. Documentation links for primitives are <a href="doc/primitive.html#functions">here</a>.</li>
+      <li>You can type special characters with a back<em>slash</em> prefix (customize at the right), as shown by hovering over the character bar above. Documentation links for primitives are <a href="doc/primitive.html#functions">here</a>.</li>
       <li>Any modifier with enter will execute, not just shift. The code window is vertically resizeable.</li>
       <li>Support for function headers and multiple bodies is missing.</li>
     </ul>