Add BQN language bar (#9)

* add bqn page, js and font * added Array.from * fixed striked characters * removed escaping * add space and stuff, bqn readme * add Array.from AGAIN, and corrected spacers * changed capture char to \ * more adjustments from dzaima * removed backtick * DejaVu-pilled * based and DejaVu-pilled pt 2
abrudz · Dec 28, 2020 · c197d19 · c197d19
1 parent 4e024cd
commit c197d19
Show file tree

Hide file tree

Showing 13 changed files with 543 additions and 370 deletions.
diff --git a/05ab1e.js b/05ab1e.js
diff --git a/Apl385.woff b/Apl385.woff
diff --git a/DejaVuSansMono.ttf → DejaVuBQNSansMono.ttf b/DejaVuSansMono.ttf → DejaVuBQNSansMono.ttf
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 <a href="https://abrudz.github.io/lb/05ab1e"><kbd>05AB1E</kbd></a>
 <a href="https://abrudz.github.io/lb/actually"><kbd>Actually</kbd></a>
 <a href="https://abrudz.github.io/lb/apl"><kbd>APL</kbd></a>
+<a href="https://abrudz.github.io/lb/bqn"><button>BQN</button></a>
 <a href="https://abrudz.github.io/lb/brachylog"><kbd>Brachylog</kbd></a>
 <a href="https://abrudz.github.io/lb/husk"><kbd>Husk</button></a>
 <a href="https://abrudz.github.io/lb/jelly"><kbd>Jelly</kbd></a>

diff --git a/actually.js b/actually.js
diff --git a/apl.html b/apl.html
@@ -1,40 +1,59 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset=utf-8><title>APL</title>
-    <style>kbd{border: 1px solid buttonshadow;border-radius:.5ex;padding:0 .25ex;margin:0 .2ex;background:buttonface;}</style>
-  </head>
-  <body>
-    <article>
-      <h1><a href="https://aplwiki.com">APL</a> language bar, key-bindings, and character compositions <a href="."><button>Other languages</button></a></h1>
-      <p>This provides three ways to easily enter APL characters into pretty much any input field on any webpage:</p>
-      <ol>
-        <li>Use backtick <kbd>`</kbd> as prefix APL key, e.g. <kbd>`</kbd><kbd>a</kbd> gives <code>⍺</code>.</li>
-        <li>Enter a combo sequence and hit Tab, e.g. <kbd>a</kbd><kbd>a</kbd><kbd>Tab</kbd> gives <code>⍺</code>.</li>
-        <li>Click on symbols in the language bar.</li>
-      </ol>
-      <p>Try it here: <input autofocus/></p>
-      <p>Hover over a symbol in the language bar for keybindings and combo sequences.</p>
-      <h2>Installation</h2>
-      <h3>Desktop browser</h3>
-      <ol>
-        <li>Drag this link to your bookmarks bar: <a href='javascript:(d=>{let e=d.createElement("script");e.src="https://abrudz.github.io/lb/lb.js";d.body.appendChild(e)})(document)'>APL</a></li>
-      </ol>
-      <h3>Mobile browser</h3>
-      <ol>
-        <li>Add a bookmark for this page.</li>
-        <li>Edit the bookmark's target URL address to <code>javascript:(d=&gt;{let%20e=d.createElement("script");e.src="https://abrudz.github.io/lb/lb.js";d.body.appendChild(e)})(document)</code></li>
-      </ol>
-      <h3>Webpage</h3>
-      <ol>
-        <li>Include this HTML in your page: <code>&lt;script src="https://abrudz.github.io/lb/lb.js">&lt;/script></code></li>
-      </ol>
-      <h2>Activation</h2>
-      <ol>
-        <li>Navigate to the web page where you want to enter APL characters.</li>
-        <li>Click on the <em>APL</em> bookmark. The language bar should appear at the web page's top.</li>
-      </ol>
-    </article>
-    <script src="https://abrudz.github.io/lb/lb.js"></script>
-  </body>
-</html>
+
+<head>
+	<meta charset=utf-8>
+	<title>APL</title>
+	<style>
+		kbd {
+			border: 1px solid buttonshadow;
+			border-radius: .5ex;
+			padding: 0 .25ex;
+			margin: 0 .2ex;
+			background: buttonface;
+		}
+	</style>
+</head>
+
+<body>
+	<article>
+		<h1><a href="https://aplwiki.com">APL</a> language bar, key-bindings, and character compositions <a
+				href="."><button>Other languages</button></a></h1>
+		<p>This provides three ways to easily enter APL characters into pretty much any input field on any webpage:</p>
+		<ol>
+			<li>Use backtick <kbd>`</kbd> as prefix APL key, e.g. <kbd>`</kbd><kbd>a</kbd> gives <code>⍺</code>.</li>
+			<li>Enter a combo sequence and hit Tab, e.g. <kbd>a</kbd><kbd>a</kbd><kbd>Tab</kbd> gives <code>⍺</code>.
+			</li>
+			<li>Click on symbols in the language bar.</li>
+		</ol>
+		<p>Try it here: <input autofocus /></p>
+		<p>Hover over a symbol in the language bar for keybindings and combo sequences.</p>
+		<h2>Installation</h2>
+		<h3>Desktop browser</h3>
+		<ol>
+			<li>Drag this link to your bookmarks bar: <a
+					href='javascript:(d=>{let e=d.createElement("script");e.src="https://abrudz.github.io/lb/lb.js";d.body.appendChild(e)})(document)'>APL</a>
+			</li>
+		</ol>
+		<h3>Mobile browser</h3>
+		<ol>
+			<li>Add a bookmark for this page.</li>
+			<li>Edit the bookmark's target URL address to
+				<code>javascript:(d=&gt;{let%20e=d.createElement("script");e.src="https://abrudz.github.io/lb/lb.js";d.body.appendChild(e)})(document)</code>
+			</li>
+		</ol>
+		<h3>Webpage</h3>
+		<ol>
+			<li>Include this HTML in your page:
+				<code>&lt;script src="https://abrudz.github.io/lb/lb.js">&lt;/script></code></li>
+		</ol>
+		<h2>Activation</h2>
+		<ol>
+			<li>Navigate to the web page where you want to enter APL characters.</li>
+			<li>Click on the <em>APL</em> bookmark. The language bar should appear at the web page's top.</li>
+		</ol>
+	</article>
+	<script src="lb.js"></script>
+</body>
+
+</html>
diff --git a/bqn.html b/bqn.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset=utf-8>
+	<title>BQN</title>
+	<style>
+		kbd {
+			border: 1px solid buttonshadow;
+			border-radius: .5ex;
+			padding: 0 .25ex;
+			margin: 0 .2ex;
+			background: buttonface;
+		}
+	</style>
+</head>
+
+<body>
+	<article>
+		<h1>
+			<a href="https://mlochbaum.github.io/BQN">BQN</a> language bar, key-bindings, and character compositions
+			<a href="."><button>Other languages</button></a>
+		</h1>
+		<p>This provides two ways to easily enter BQN characters into pretty much any input field on any webpage:</p>
+		<ol>
+			<li>Use backslash <kbd>\</kbd> as prefix BQN key, e.g. <kbd>\</kbd><kbd>G</kbd> gives <code>𝔾</code>.</li>
+			<li>Click on symbols in the language bar.</li>
+		</ol>
+		<p>Try it here: <input style="font-family:'BQN386 Unicode',monospace;" autofocus /></p>
+		<p>Hover over a symbol in the language bar for keybindings.</p>
+		<h2>Installation</h2>
+		<h3>Desktop browser</h3>
+		<ol>
+			<li>Drag this link to your bookmarks bar: <a
+					href='javascript:(d=>{let e=d.createElement("script");e.src="https://abrudz.github.io/lb/bqn.js";d.body.appendChild(e)})(document)'>BQN</a>
+			</li>
+		</ol>
+		<h3>Mobile browser</h3>
+		<ol>
+			<li>Add a bookmark for this page.</li>
+			<li>Edit the bookmark's target URL address to
+				<code>javascript:(d=&gt;{let%20e=d.createElement("script");e.src="https://abrudz.github.io/lb/bqn.js";d.body.appendChild(e)})(document)</code>
+			</li>
+		</ol>
+		<h3>Webpage</h3>
+		<ol>
+			<li>Include this HTML in your page:
+				<code>&lt;script src="https://abrudz.github.io/lb/bqn.js">&lt;/script></code></li>
+		</ol>
+		<h2>Activation</h2>
+		<ol>
+			<li>Navigate to the web page where you want to enter BQN characters.</li>
+			<li>Click on the <em>BQN</em> bookmark. The language bar should appear at the web page's top.</li>
+		</ol>
+	</article>
+	<script src="bqn.js"></script>
+</body>
+
+</html>
diff --git a/bqn.js b/bqn.js
@@ -0,0 +1,64 @@
+; (_ => {
+	let hc = { '<': '&lt;', '&': '&amp;', "'": '&apos;', '"': '&quot;' }, he = x => x.replace(/[<&'"]/g, c => hc[c]) //html chars and escape fn
+		, tcs = ''
+		, lbs = ['+Conjugate\nAdd', '-Negate\nSubtract', '×Sign\nMultiply', '÷Reciprocal\nDivide', '⋆Exponential\nPower', '√Square Root\nRoot', '⌊Floor\nMinimum', '⌈Ceiling\nMaximum', '∧Sort Up\nAnd', '∨Sort Down\nOr', '¬Not\nSpan', '|Absolute Value\nModulus', '≤Less Than or Equal to', '<Enclose\nLess Than', '>Merge\nGreater Than', '≥Greater Than or Equal to', '=Rank\nEquals', '≠Length\nNot Equals', '≡Depth\nMatch', '≢Shape\nNot Match', '⊣Identity\nLeft', '⊢Identity\nRight', '⥊Deshape\nReshape', '∾Join\nJoin to', '≍Solo\nCouple', '↑Prefixes\nTake', '↓Suffixes\nDrop', '↕Range\nWindows', '«Shift Before', '»Shift After', '⌽Reverse\nRotate', '⍉Transpose\nReorder axes', '/Indices\nReplicate', '⍋Grade Up\nBins Up', '⍒Grade Down\nBins Down', '⊏First Cell\nSelect', '⊑First\nPick', '⊐Index of', '⊒Occurrence Count\nProgressive Index of', '∊Unique Mask\nMember of', '⍷Deduplicate\nFind', '⊔Group Indices\nGroup', '!Assert\nAssert with message', ' ', '˙Constant', '˜Self/Swap', '∘Atop', '○Over', '⊸Before/Bind', '⟜After/Bind', '⌾Under', '⊘Valences', '◶Choose', '⎉Rank', '˘Cells', '⚇Depth', '¨Each', '⌜Table', '⍟Repeat', '⁼Undo', '´Fold', '˝Insert', '`Scan', ' ', '←Define', '⇐Export', '↩Change', '→Return', '⋄Separator', ',Separator', '(Begin expression', ')End expression', '{Begin block', '}End block', '⟨Begin list', '⟩End list', '‿Strand', ' ', '·Nothing', '•System', '𝕨Left argument', '𝕎Left argument (as function)', '𝕩Right argument', '𝕏Right argument (as function)', '𝕗Modifier left operand (as subject)', '𝔽Modifier left operand', '𝕘2-modifier right operand (as subject)', '𝔾2-modifier right operand', '𝕤Current function (as subject)', '𝕊Current function', '𝕣Current modifier', ' ', '¯Minus', 'πPi', '∞Infinity', '@Null character', '#Comment']
+		, bqk = Array.from('`123456890-=~!@#$%^&*()_+qwertuiop[]QWERTIOP{}asdfghjkl;ASFGHKL:"zxcvbm,./XVBM<>? \'')
+		, bqv = Array.from('˜˘¨⁼⌜´˝∞¯•÷×¬⎉⚇⍟◶⊘⎊⍎⍕⟨⟩√⋆⌽𝕨∊↑∧⊔⊏⊐π←→↙𝕎⍷𝕣⍋⊑⊒⍳⊣⊢⍉𝕤↕𝕗𝕘⊸∘○⟜⋄↖𝕊𝔽𝔾«⌾»·˙⥊𝕩↓∨⌊≡∾≍≠𝕏⍒⌈≢≤≥⇐‿↩')
+		, tc = {}, bqc = {} //tab completions and ` completions
+	for (let i = 0; i < bqk.length; i++)bqc[bqk[i]] = bqv[i]
+	for (let i = 0; i < tcs.length; i += 3)tc[tcs[i] + tcs[i + 1]] = tcs[i + 2]
+	for (let i = 0; i < tcs.length; i += 3) { let k = tcs[i + 1] + tcs[i]; tc[k] = tc[k] || tcs[i + 2] }
+	let lbh = ''; for (let i = 0; i < lbs.length; i++) {
+		let [k, ...v] = [...lbs[i]]; v = v.join('');
+		let ks = []
+		for (let j = 0; j < tcs.length; j += 3)if (k === tcs[j + 2]) ks.push('\n' + tcs[j] + ' ' + tcs[j + 1] + ' <tab>')
+		for (let j = 0; j < bqk.length; j++)if (k === bqv[j]) ks.push('\n` ' + bqk[j])
+		lbh += '<b title="' + he(v + (ks.length ? '\n' + ks.join('') : '')) + '">' + k + '</b>'
+	}
+	let d = document, el = d.createElement('div'); el.innerHTML =
+		`<div class=ngn_lb><span class=ngn_x title=Close>❎</span>${lbh}</div>
+ <style>@font-face{font-family:"DejaVu Sans Mono";src:local("DejaVu Sans Mono"),url(DejaVuBQNSansMono.ttf)format('ttf');}</style>
+ <style>
+  .ngn_lb{position:fixed;top:0;left:0;right:0;background-color:#eee;color:#000;cursor:default;z-index:2147483647;
+    font-family:"DejaVu Sans Mono",monospace;border-bottom:solid #999 1px;padding:2px 2px 0 2px;word-wrap:break-word;}
+  .ngn_lb b{cursor:pointer;padding:0 1px;font-weight:normal}
+  .ngn_lb b:hover,.ngn_bq .ngn_lb{background-color:#777;color:#fff}
+  .ngn_x{float:right;color:#999;cursor:pointer;margin-top:-3px}
+  .ngn_x:hover{color:#f00}
+ </style>`
+	d.body.appendChild(el)
+	let t, ts = [], lb = el.firstChild, bqm = 0 //t:textarea or input, lb:language bar, bqm:backquote mode
+	let pd = x => x.preventDefault()
+	let ev = (x, t, f, c) => x.addEventListener(t, f, c)
+	ev(lb, 'mousedown', x => {
+		if (x.target.classList.contains('ngn_x')) { lb.hidden = 1; upd(); pd(x); return }
+		if (x.target.nodeName === 'B' && t) {
+			let i = t.selectionStart, j = t.selectionEnd, v = t.value, s = x.target.textContent
+			if (i != null && j != null) { t.value = v.slice(0, i) + s + v.slice(j); t.selectionStart = t.selectionEnd = i + s.length }
+			pd(x); return
+		}
+	})
+	let fk = x => {
+		let t = x.target
+		if (bqm) {
+			let i = t.selectionStart, v = t.value, c = bqc[x.key]; if (x.which > 31) { bqm = 0; d.body.classList.remove('ngn_bq') }
+			if (c) { t.value = v.slice(0, i) + c + v.slice(i); t.selectionStart = t.selectionEnd = i + c.length; pd(x); return !1 }
+		}
+		else if (!x.ctrlKey && !x.shiftKey && !x.altKey && !x.metaKey) {
+			if ("\\½²^º§ùµ°".indexOf(x.key) > -1) {
+				bqm = 1; d.body.classList.add('ngn_bq'); pd(x); // ` or other trigger symbol pressed, wait for next key
+			} else if (x.key == "Tab") {
+				let i = t.selectionStart, v = t.value, c = tc[v.slice(i - 2, i)]
+				if (c) { t.value = v.slice(0, i - 2) + c + v.slice(i); t.selectionStart = t.selectionEnd = i - 1; pd(x) }
+			}
+		}
+	}
+	let ff = x => {
+		let t0 = x.target, nn = t0.nodeName.toLowerCase()
+		if (nn !== 'textarea' && (nn !== 'input' || t0.type !== 'text' && t0.type !== 'search')) return
+		t = t0; if (!t.ngn) { t.ngn = 1; ts.push(t); ev(t, 'keydown', fk) }
+	}
+	let upd = _ => { d.body.style.marginTop = lb.clientHeight + 'px' }
+	upd(); ev(window, 'resize', upd)
+	ev(d, 'focus', ff, !0); let ae = d.activeElement; ae && ff({ type: 'focus', target: ae })
+})();