╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
285 if (left < container.scrollLeft) { 286 container.scrollLeft = left; 287 } else if (container.dataset.scrollDirection === "horiz" && right > container.scrollLeft + container.clientWidth) { 288 container.scrollLeft = right - container.clientWidth; 289 } 290 }, 291 }, 292 }; 293 294 function sendTextInputValue(focusId, value) { 295 const bytes = encoder.encode(value); 296 const ptr = wasmInstance.exports._alloc(bytes.length); 297 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 298 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 299 wasmInstance.exports._tick(minRows(), maxCols()); 300 } 301 302 // upload as soon as the file dialog returns, so attaching is one click. the 303 // file is the whole request body, so its name travels in a header. 304 document.addEventListener("change", (event) => { 305 const t = event.target; 306 if (!t || t.tagName !== "INPUT" || t.type !== "file" || !t.dataset.action) return; 307 const file = t.files[0]; 308 if (!file) return; 309 fetch(t.dataset.action, { 310 method: "POST", 311 headers: { "x-attachment-name": encodeURIComponent(file.name) }, 312 body: file, 313 }).then((res) => { 314 if (res.ok) window.location.reload(); 315 else res.text().then((message) => console.error("upload failed:", message)); 316 }); 317 }); 318 319 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 320 wasmInstance = result.instance; 321 322 // wait for the @font-face to load before measuring cell width, otherwise 323 // we get the fallback font's metrics. 324 if (document.fonts && document.fonts.ready) { 325 await document.fonts.ready; 326 } 327 328 // the page is embedded as raw json in a script tag. 329 // encode to utf-8 bytes and hand it to the wasm. 330 const jsonBytes = encoder.encode(pageJson); 331 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 332 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 333 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 334 335 document.addEventListener("keydown", (event) => { 336 // let the browser handle modifier combos. the TUI only uses unmodified keys, 337 // so intercepting these would just break normal browser navigation. 338 if (event.altKey || event.ctrlKey || event.metaKey) return; 339 // when a form element (text input or submit button) owns focus, the 340 // browser handles typing and Tab natively (and Enter on the button 341 // submits). we only forward keys into the TUI when focus is elsewhere. 342 // exception: arrow up/down on an input unfocuses it and forwards 343 // the event so the TUI can move focus between widgets. 344 if (document.activeElement) { 345 const tag = document.activeElement.tagName; 346 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 347 event.key === "ArrowLeft" || event.key === "ArrowRight"; 348 // a file picker is an input but behaves like a button: every key 349 // but an arrow is native (enter opens its dialog), and an arrow 350 // navigates away from it 351 if (tag === "INPUT" && document.activeElement.type === "file") { 352 if (!isArrow) return; 353 document.activeElement.blur(); 354 } else if (tag === "INPUT" && document.activeElement.readOnly && 355 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 356 event.preventDefault(); 357 if (event.key === "Enter") { 358 document.activeElement.select(); 359 return; 360 } 361 wasmInstance.exports._onKeyDown(event.keyCode); 362 wasmInstance.exports._tick(minRows(), maxCols()); 363 return; 364 } else if (tag === "INPUT" && event.key === "Enter") { 365 // enter in a text input never submits the form; only the 366 // submit button does 367 event.preventDefault(); 368 return; 369 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 370 // up/down moves between widgets; left/right stay in the input 371 document.activeElement.blur(); 372 } else if (tag === "BUTTON" && isArrow) { 373 // arrows navigate away from a focused submit button 374 document.activeElement.blur(); 375 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 376 // Enter (submit / newline), typing, Tab, and a textarea's 377 // arrows — handled natively by the browser 378 return; 379 } 380 } 381 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 382 event.preventDefault(); 383 return; 384 } 385 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 386 event.preventDefault(); 387 return; 388 } 389 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 390 event.preventDefault(); 391 } 392 wasmInstance.exports._onKeyDown(event.keyCode); 393 wasmInstance.exports._tick(minRows(), maxCols()); 394 }); 395 396 // delegated listeners survive cell-layer replacement. the controls 397 // themselves are retained inside #grid. 398 document.addEventListener("input", (event) => { 399 const t = event.target; 400 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 401 sendTextInputValue(Number(t.dataset.focusId), t.value); 402 }); 403 404 document.addEventListener("focusin", (event) => { 405 const t = event.target; 406 if (!t || !t.dataset || !t.dataset.focusId) return; 407 // sync the wasm focus to wherever the browser moved focus 408 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 409 // keyed controls survive a redraw before click. cell links live in the 410 // replaceable backdrop, so their click handler redraws after activation. 411 if (nodeKey(t)?.startsWith("control:")) wasmInstance.exports._tick(minRows(), maxCols()); 412 }); 413 414 grid.addEventListener("click", (event) => { 415 if (event.target.matches("input[readonly]")) { 416 wasmInstance.exports._tick(minRows(), maxCols()); 417 return; 418 } 419 const span = event.target.closest(".clickable"); 420 if (!span) return; 421 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 422 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 423 // wasm routes the click: an in-page link updates focus and re-renders, 424 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 425 // an in-page link doesn't also trigger a redundant full page load. 426 event.preventDefault(); 427 const focusId = Number(span.dataset.focusId); 428 wasmInstance.exports._onMouseClick(focusId); 429 wasmInstance.exports._tick(minRows(), maxCols()); 430 }); 431 432 let resizeTimer = null; 433 window.addEventListener("resize", () => { 434 clearTimeout(resizeTimer); 435 resizeTimer = setTimeout(() => { 436 wasmInstance.exports._tick(minRows(), maxCols()); 437 }, 100); 438 }); 439 }); 440