╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
153 }, 154 }; 155 156 function sendTextInputValue(focusId, value) { 157 const bytes = encoder.encode(value); 158 const ptr = wasmInstance.exports._alloc(bytes.length); 159 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 160 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 161 wasmInstance.exports._tick(minRows(), maxCols()); 162 } 163 164 function sendEnter(form) { 165 const btn = form.querySelector("button[type=submit][data-focus-id]"); 166 if (!btn) return; 167 wasmInstance.exports._onMouseClick(Number(btn.dataset.focusId)); 168 wasmInstance.exports._onKeyDown(13); 169 wasmInstance.exports._tick(minRows(), maxCols()); 170 } 171 172 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 173 wasmInstance = result.instance; 174 175 // wait for the @font-face to load before measuring cell width, otherwise 176 // we get the fallback font's metrics. 177 if (document.fonts && document.fonts.ready) { 178 await document.fonts.ready; 179 } 180 181 // the page is embedded as raw json in a script tag. 182 // encode to utf-8 bytes and hand it to the wasm. 183 const jsonBytes = encoder.encode(pageJson); 184 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 185 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 186 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 187 188 document.addEventListener("keydown", (event) => { 189 // let the browser handle modifier combos. the TUI only uses unmodified keys, 190 // so intercepting these would just break normal browser navigation. 191 if (event.altKey || event.ctrlKey || event.metaKey) return; 192 // when a form element (text input or submit button) owns focus, the 193 // browser handles typing and Tab natively (and Enter on the button 194 // submits). we only forward keys into the TUI when focus is elsewhere. 195 // exception: arrow up/down on an input unfocuses it and forwards 196 // the event so the TUI can move focus between widgets. 197 if (document.activeElement) { 198 const tag = document.activeElement.tagName; 199 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 200 event.key === "ArrowLeft" || event.key === "ArrowRight"; 201 if (tag === "INPUT" && event.key === "Enter") { 202 // enter in a text input never submits the form; only the 203 // submit button does 204 event.preventDefault(); 205 return; 206 } 207 if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 208 // up/down moves between widgets; left/right stay in the input 209 document.activeElement.blur(); 210 } else if (tag === "BUTTON" && isArrow) { 211 // arrows navigate away from a focused submit button 212 document.activeElement.blur(); 213 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 214 // Enter (submit / newline), typing, Tab, and a textarea's 215 // arrows — handled natively by the browser 216 return; 217 } 218 } 219 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 220 event.preventDefault(); 221 } 222 wasmInstance.exports._onKeyDown(event.keyCode); 223 wasmInstance.exports._tick(minRows(), maxCols()); 224 }); 225 226 // submit on mousedown rather than waiting for click: the focusin this 227 // same mousedown fires ticks the wasm, and a resulting overlay rebuild 228 // would detach the button before its click could land. the form is 229 // guaranteed live at mousedown time. 230 document.addEventListener("mousedown", (event) => { 231 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 232 const btn = event.target.closest ? event.target.closest("button[type=submit][data-focus-id]") : null; 233 if (!btn || !btn.form) return; 234 // empty-action forms are handled by their onsubmit on the click path 235 if (!btn.form.getAttribute("action")) return; 236 // if the button survives to receive the click, don't submit twice 237 btn.addEventListener("click", (e) => e.preventDefault(), { once: true }); 238 btn.form.requestSubmit(btn); 239 }); 240 241 // listeners on document (not #grid) since the form lives outside #grid; 242 // input/focus events from form elements still bubble up to document. 243 document.addEventListener("input", (event) => { 244 const t = event.target; 245 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 246 sendTextInputValue(Number(t.dataset.focusId), t.value); 247 }); 248 249 document.addEventListener("focusin", (event) => { 250 const t = event.target; 251 if (!t || !t.dataset || !t.dataset.focusId) return; 252 // sync the wasm focus to wherever the browser moved focus 253 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 254 // a click's mousedown fires this focusin before the click event. ticking 255 // here would rebuild #grid and destroy the node before its click lands, 256 // swallowing the navigation and forcing a second click — so don't 257 // re-render for a grid element. overlay controls live outside #grid and 258 // survive the diff, so they still tick. 259 if (!grid.contains(t)) wasmInstance.exports._tick(minRows(), maxCols()); 260 }); 261 262 grid.addEventListener("click", (event) => { 263 const span = event.target.closest(".clickable"); 264 if (!span) return; 265 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 266 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 267 // wasm routes the click: an in-page link just moves focus and re-renders, 268 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 269 // an in-page link doesn't also trigger a redundant full page load. 270 event.preventDefault(); 271 const focusId = Number(span.dataset.focusId); 272 wasmInstance.exports._onMouseClick(focusId); 273 wasmInstance.exports._tick(minRows(), maxCols()); 274 }); 275 276 let resizeTimer = null; 277 window.addEventListener("resize", () => { 278 clearTimeout(resizeTimer); 279 resizeTimer = setTimeout(() => { 280 wasmInstance.exports._tick(minRows(), maxCols()); 281 }, 100); 282 }); 283 }); 284