From d257f04851382d93d7d8ad69626e7d5365918d3d Mon Sep 17 00:00:00 2001 From: Marshall Lochbaum Date: Fri, 21 Jan 2022 10:46:21 -0500 Subject: Change keybar keys to links with custom onclick --- docs/repl.js | 25 ++++++----------- docs/style.css | 89 +++++++++++++++++++++++++++++----------------------------- docs/try.html | 2 +- 3 files changed, 54 insertions(+), 62 deletions(-) (limited to 'docs') diff --git a/docs/repl.js b/docs/repl.js index 6ed4f725..bac0ca98 100644 --- a/docs/repl.js +++ b/docs/repl.js @@ -58,7 +58,7 @@ if (doc.doexplain) doc.doexplain.onclick = () => { if (!h) return; t.innerHTML = t.textContent+''+h+''; t.classList.add('clickable'); - t.onclick = ev => { window.open('help/'+helpurl[c]+'.html'); } + t.onclick = ev => { window.open(helpurl[c]); } }); }, 0); } @@ -122,33 +122,24 @@ let kv=Array.from('˜˘¨⁼⌜´˝∞¯•÷׬⎉⚇⍟◶⊘⎊⍎⍕⟨⟩ let keys={}, revkeys={}, primhelp={}, helpurl={}; kk.map((k,i)=>{keys[k]=kv[i];revkeys[kv[i]]=k;}); doc.kb.innerHTML = keydesc - .map(d=>''+Array.from(d)[1]+'') + .map(d=>''+Array.from(d)[1]+'') .concat(['map']) .join("​"); // zero-width space let setPrefix = () => { - doc.kb.querySelectorAll("span").forEach((x,i) => { + doc.kb.querySelectorAll("a.key").forEach((x,i) => { let d = keydesc[i]; let c = Array.from(d)[1]; let t = d.slice(1+c.length).replace(';','\n'); - helpurl[c] = t.toLowerCase().replace(/ (\(.*)?/g,'') - .replace(/[\n/]/g,'_'); + let h = t.toLowerCase().replace(/ (\(.*)?/g,'') + .replace(/[\n/]/g,'_'); let k = revkeys[c]; if (k) t += '\n'+prefix+(k==='"'?'"':k); x.title = primhelp[c] = t; + x.href = helpurl[c] = 'help/'+h+'.html'; + x.onclick = ev => ev.button || modified(ev) ? true + : typeChar(doc.code, c, ev); }); } setPrefix(); -doc.kb.onmousedown = ev => { - let t = ev.target; - if (t.nodeName === 'SPAN') { - let c = t.textContent; - if (ev.button || modified(ev)) { - window.open('help/'+helpurl[c]+'.html'); - } else { - typeChar(doc.code, c, ev); - } - return false; - } -} let appendHTML = (e,a) => e.insertAdjacentHTML('beforeend', a); appendHTML(doc.kb, '
'); diff --git a/docs/style.css b/docs/style.css index 78344eab..8d4222b5 100644 --- a/docs/style.css +++ b/docs/style.css @@ -73,14 +73,14 @@ table th { font-family: f3270; src: url(3270_sub.woff2) format('woff2'); } -pre.DejaVu , .DejaVu .kb span, .DejaVu .code, .DejaVu .rslt { font-family:BQNMod,monospace; } -pre.BQN386 , .BQN386 .kb span, .BQN386 .code, .BQN386 .rslt { font-family:BQN,monospace; } -pre.Iosevka, .Iosevka .kb span, .Iosevka .code, .Iosevka .rslt { font-family:Iosevka,f3270,monospace; } -pre.Julia , .Julia .kb span, .Julia .code, .Julia .rslt { font-family:JuliaMono,monospace; } -pre.Fairfax, .Fairfax .kb span, .Fairfax .code, .Fairfax .rslt { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; } -.Fairfax .kb span { line-height:1.25; } -pre.f3270 , .f3270 .kb span, .f3270 .code, .f3270 .rslt { font-family:f3270,monospace; font-size:1rem; line-height:1.1; } -.f3270 .kb span { line-height:1.4; } +pre.DejaVu , .DejaVu .key, .DejaVu .code, .DejaVu .rslt { font-family:BQNMod,monospace; } +pre.BQN386 , .BQN386 .key, .BQN386 .code, .BQN386 .rslt { font-family:BQN,monospace; } +pre.Iosevka, .Iosevka .key, .Iosevka .code, .Iosevka .rslt { font-family:Iosevka,f3270,monospace; } +pre.Julia , .Julia .key, .Julia .code, .Julia .rslt { font-family:JuliaMono,monospace; } +pre.Fairfax, .Fairfax .key, .Fairfax .code, .Fairfax .rslt { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; } +.Fairfax .key { line-height:1.25; } +pre.f3270 , .f3270 .key, .f3270 .code, .f3270 .rslt { font-family:f3270,monospace; font-size:1rem; line-height:1.1; } +.f3270 .key { line-height:1.4; } code, kbd, svg text { white-space: pre; @@ -126,11 +126,12 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; } padding: 0.3em 0; position: relative; } -.kb span, .kb div { +.key, .kb div { cursor: default; padding: 1px; } -.kb a { +a.key { text-decoration:none; } +.kb a:not(.key) { margin-left: 0.8em; font-size: 0.8em; vertical-align: 0.08em; opacity: 0.8; } @@ -181,26 +182,26 @@ kbd { box-shadow: -0.02em 0.05em 0 0 currentColor; } -.Value { color: #1f2020; } -.Function { color: #1f7229; } -.Modifier { color: #7b3b60; } -.Modifier2 { color: #857614; } -.Gets { color: #16170a; } -.Paren { color: #585f5b; } -.Ligature, -.Separator, -.Bracket { color: #30241f; } -.Brace { color: #9130ad; } -.Nothing, -.Number { color: #6f251f; } -.Comment { color: #32328b; } -.String { color: #2d7583; } -.Error { color: #ee3030; } - a:link { color: #0b39dc; text-decoration-color: #0b39dc91; } a:visited { color: #3d155f; } -.kb span:hover{ background-color: #bce; } +.Value ,a.Value { color: #1f2020; } +.Function ,a.Function { color: #1f7229; } +.Modifier ,a.Modifier { color: #7b3b60; } +.Modifier2 ,a.Modifier2 { color: #857614; } +.Gets ,a.Gets { color: #16170a; } +.Paren ,a.Paren { color: #585f5b; } +.Ligature ,a.Ligature, +.Separator ,a.Separator, +.Bracket ,a.Bracket { color: #30241f; } +.Brace ,a.Brace { color: #9130ad; } +.Nothing ,a.Nothing, +.Number ,a.Number { color: #6f251f; } +.Comment ,a.Comment { color: #32328b; } +.String ,a.String { color: #2d7583; } +.Error ,a.Error { color: #ee3030; } + +.key:hover { background-color: #bce; } .kb.prefix { background-color: #cee; } @media (prefers-color-scheme: dark) { @@ -214,27 +215,27 @@ a:visited { color: #3d155f; } code { border-color: #0c0d0e; background-color: #0f1011; } table td, th{ border-color: #636967; } table th { border-color: #88918c; background-color: #292a2b; } - .kb span:hover { background-color: #237; } + .key:hover { background-color: #237; } .kb.prefix { background-color: #1e2430; } - .Value { color: #b2b9bb; } - .Function { color: #3aa548; } - .Modifier { color: #93428b; } - .Modifier2 { color: #998819; } - .Gets { color: #cccdcb; } - .Paren { color: #5a524a; } - .Ligature, - .Separator, - .Bracket { color: #9c7dc1; } - .Brace { color: #862f9e; } - .Nothing, - .Number { color: #a73227; } - .Comment { color: #3f3daa; } - .String { color: #3e99ab; } - .Error { color: #bb0e0e; } - a:link { color: #5592d9; text-decoration-color: #508dd978; } a:visited { color: #8781c1; } + + .Value ,a.Value { color: #b2b9bb; } + .Function ,a.Function { color: #3aa548; } + .Modifier ,a.Modifier { color: #93428b; } + .Modifier2 ,a.Modifier2 { color: #998819; } + .Gets ,a.Gets { color: #cccdcb; } + .Paren ,a.Paren { color: #5a524a; } + .Ligature ,a.Ligature, + .Separator ,a.Separator, + .Bracket ,a.Bracket { color: #9c7dc1; } + .Brace ,a.Brace { color: #862f9e; } + .Nothing ,a.Nothing, + .Number ,a.Number { color: #a73227; } + .Comment ,a.Comment { color: #3f3daa; } + .String ,a.String { color: #3e99ab; } + .Error ,a.Error { color: #bb0e0e; } } svg tspan { diff --git a/docs/try.html b/docs/try.html index 5b4526b9..916bbbbc 100644 --- a/docs/try.html +++ b/docs/try.html @@ -32,7 +32,7 @@ -- cgit v1.2.3