diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/repl.js | 36 | ||||
| -rw-r--r-- | docs/style.css | 13 | ||||
| -rw-r--r-- | docs/try.html | 6 |
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("​"); // 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==='"'?'"':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 + 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> |