diff options
| author | pkova <pyry.kovanen@gmail.com> | 2021-07-31 23:37:23 +0300 |
|---|---|---|
| committer | pkova <pyry.kovanen@gmail.com> | 2021-07-31 23:37:23 +0300 |
| commit | f9925688329fb02b46e524cd31ac733f37549eeb (patch) | |
| tree | 7a0e0a52f04da91b4705cf8b19f606d5710f87cc /docs | |
| parent | c2afaad9f6951c2f635f2ac63842f190dd799573 (diff) | |
Add customizable prefix key in js repl
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/repl.js | 33 | ||||
| -rw-r--r-- | docs/style.css | 4 | ||||
| -rw-r--r-- | docs/try.html | 6 |
3 files changed, 27 insertions, 16 deletions
diff --git a/docs/repl.js b/docs/repl.js index 5ec386a5..1aaeb218 100644 --- a/docs/repl.js +++ b/docs/repl.js @@ -78,7 +78,13 @@ sysvals.plot = (x,w) => { return '\0'; } -let keymode=0; // 1 for backslash +doc.prfx.onchange = ev => { + prefix = ev.target.value; + buildKb(); +} + +let keymode=0; // 1 for prefix +let prefix=doc.prfx.value; doc.code.onkeydown = ev => { let k = ev.which; if (16<=k && k<=20) { @@ -87,12 +93,12 @@ doc.code.onkeydown = ev => { repl(); return false; } if (keymode) { keymode = 0; - doc.kb.classList.remove('backslash'); + doc.kb.classList.remove('prefix'); let c = keys[ev.key]; if (c) return typeChar(ev.target, c, ev); - } else if (ev.key=='\\') { + } else if (ev.key==prefix) { keymode = 1; - doc.kb.classList.add('backslash'); + doc.kb.classList.add('prefix'); ev.preventDefault(); } } @@ -111,14 +117,17 @@ 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;}); -doc.kb.innerHTML = keydesc.map(d=>{ - let s = syncls[d[0]]; - let c = Array.from(d)[1]; - let t = d.slice(1+c.length).replace(';','\n'); - let k = revkeys[c]; if (k) t += '\n\\ '+(k==='"'?'"':k); - primhelp[c] = t; - return '<span title="'+t+'" class="'+s+'">'+c+'</span>' -}).concat(['<a href="keymap.html" target="_blank">map</span>']).join("​"); // zero-width space +let buildKb = () => { + doc.kb.innerHTML = keydesc.map(d=>{ + let s = syncls[d[0]]; + 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==='"'?'"':k); + primhelp[c] = t; + return '<span title="'+t+'" class="'+s+'">'+c+'</span>' + }).concat(['<a href="keymap.html" target="_blank">map</span>']).join("​"); // zero-width space +} +buildKb(); doc.kb.onmousedown = ev => { let t = ev.target; if (t.nodeName === 'SPAN') { diff --git a/docs/style.css b/docs/style.css index 847e7448..cfc3e346 100644 --- a/docs/style.css +++ b/docs/style.css @@ -181,7 +181,7 @@ a:link { color: #0b39dc; text-decoration-color: #0b39dc91; } a:visited { color: #3d155f; } .kb span:hover{ background-color: #bce; } -.kb.backslash { background-color: #cee; } +.kb.prefix { background-color: #cee; } @media (prefers-color-scheme: dark) { body, input, select { color: #d6d7d9; background-color: #141515; } @@ -194,7 +194,7 @@ a:visited { color: #3d155f; } table td, th{ border-color: #636967; } table th { border-color: #88918c; background-color: #292a2b; } .kb span:hover { background-color: #237; } - .kb.backslash { background-color: #1e2430; } + .kb.prefix { background-color: #1e2430; } .Value { color: #b2b9bb; } .Function { color: #3aa548; } diff --git a/docs/try.html b/docs/try.html index d5871c0d..0faa3131 100644 --- a/docs/try.html +++ b/docs/try.html @@ -9,10 +9,11 @@ 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 { float:right; margin-left:0.4em; } + .run, .doexplain, .perm, .prfx { 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> @@ -21,6 +22,7 @@ <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> @@ -30,7 +32,7 @@ <p> Notes: <ul> - <li>You can type special characters with a back<em>slash</em> 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> (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>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> |