╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
136 // wait for the @font-face to load before measuring cell width, otherwise 137 // we get the fallback font's metrics. 138 if (document.fonts && document.fonts.ready) { 139 await document.fonts.ready; 140 } 141 142 // the page is embedded as base64 so it can sit inside the host html 143 // without worrying about characters that would terminate the script tag. 144 // decode here and hand the raw json bytes to the wasm. 145 const jsonBytes = Uint8Array.from(atob(pageJsonBase64), (c) => c.charCodeAt(0)); 146 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 147 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 148 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 149 150 document.addEventListener("keydown", (event) => { 151 // let the browser handle modifier combos. the TUI only uses unmodified keys, 152 // so intercepting these would just break normal browser navigation. 153 if (event.altKey || event.ctrlKey || event.metaKey) return; 154 // when a form element (text input or submit button) owns focus, 155 // the browser handles typing, Enter-to-submit, and Tab natively. 156 // we only forward keys into the TUI when focus is elsewhere. 157 // exception: arrow up/down on an input unfocuses it and forwards 158 // the event so the TUI can move focus between widgets. 159 if (document.activeElement) { 160 const tag = document.activeElement.tagName; 161 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 162 event.key === "ArrowLeft" || event.key === "ArrowRight"; 163 if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 164 // up/down moves between widgets; left/right stay in the input 165 document.activeElement.blur(); 166 } else if (tag === "BUTTON" && isArrow) { 167 // arrows navigate away from a focused submit button 168 document.activeElement.blur(); 169 } else if (tag === "INPUT" || tag === "BUTTON") { 170 // Enter (submit), typing, Tab — handled natively by the browser 171 return; 172 } 173 } 174 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 175 event.preventDefault(); 176 } 177 wasmInstance.exports._onKeyDown(event.keyCode); 178 wasmInstance.exports._tick(minRows(), maxCols()); 179 }); 180 181 // listeners on document (not #grid) since the form lives outside #grid; 182 // input/focus events from form elements still bubble up to document. 183 document.addEventListener("input", (event) => { 184 const t = event.target; 185 if (!t || t.tagName !== "INPUT" || !t.dataset.focusId) return; 186 sendTextInputValue(Number(t.dataset.focusId), t.value); 187 }); 188 189 document.addEventListener("focusin", (event) => { 190 const t = event.target; 191 if (!t || !t.dataset || !t.dataset.focusId) return; 192 // sync the wasm focus to wherever the browser moved focus 193 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 194 // a click's mousedown fires this focusin before the click event. ticking 195 // here would rebuild #grid and destroy the node before its click lands, 196 // swallowing the navigation and forcing a second click — so don't 197 // re-render for a grid element. overlay controls live outside #grid and 198 // survive the diff, so they still tick. 199 if (!grid.contains(t)) wasmInstance.exports._tick(minRows(), maxCols()); 200 }); 201 202 grid.addEventListener("click", (event) => { 203 const span = event.target.closest(".clickable"); 204 if (!span) return; 205 const focusId = Number(span.dataset.focusId); 206 wasmInstance.exports._onMouseClick(focusId); 207 wasmInstance.exports._tick(minRows(), maxCols()); 208 }); 209 210 let resizeTimer = null; 211 window.addEventListener("resize", () => { 212 clearTimeout(resizeTimer); 213 resizeTimer = setTimeout(() => { 214 wasmInstance.exports._tick(minRows(), maxCols()); 215 }, 100); 216 }); 217 }); 218