HAXY

▄▄ ▀▀▀▄ ▄▄ ▀▀▀▀▀▄ ▄▀▀▀▀ ▀▀▀▀▀▀ ▄▀▀▀▀▀▀ ▀▀▀▀▀▀ ▀ ▀ ▄▀▀▀▀▀▀ ▀▀▀▀▀▀ ▄▀ ▄▀ ▄▀▀▀▀▀▀▀▀ ▀▀▀▄▄ ▀▀▀▀▀▀ ▀▀ ▀▄▀▀ ▄▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▄ ▀▀▀▀▀▄ ▄▀▀▀▀▀▀▀ ▄ ▄▀▄▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▄ ▄▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀ ▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄▄▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▄▀▀▀▀▀▀▀▀▀▀▄ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▄▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀ ▀▀▀▀▀▀▀▀▄ ▀▀▀ ▀▀▀▀▀▀▀▀ ▀▀▀ ▀▀▀ ▀▀▀▀▀ ▀▀ ▀▀▀▀▀▀ ▀▀▀▄▀▄ ▄▄▄▀▀ ▀▀▀▀▀▀ ▀▀▄▀▀▀▀▀▀▀ ▀▀▀▀▀▄▀▀▀▀▀ ▀▀▀▀▀▄ ▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▄▀ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀ ▀

╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯

╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯

.. ansi/ index.html not-found.txt ╭─────────────────────────────────╮ │script.js │ ╰─────────────────────────────────╯ term.ttf

215 scrolls.set(el.dataset.key, { 216 id: el.dataset.scrollId, 217 offsetTop: Number(el.dataset.scrollY || 0), 218 offsetLeft: Number(el.dataset.scrollX || 0), 219 top: el.scrollTop, 220 left: el.scrollLeft, 221 }); 222 } 223 patchHtml(grid, html); 224 for (const el of grid.querySelectorAll(".scroll[data-key]")) { 225 const offset = { top: Number(el.dataset.scrollY || 0), left: Number(el.dataset.scrollX || 0) }; 226 const previous = scrolls.get(el.dataset.key); 227 if (previous && previous.id === el.dataset.scrollId && previous.offsetTop === offset.top && previous.offsetLeft === offset.left) { 228 el.scrollTop = previous.top; 229 el.scrollLeft = previous.left; 230 } else { 231 // the wasm's offset changed (or this div is new — a fresh 232 // page load or a bumped content version): apply it, 233 // converted from cells to pixels. 234 if (!cellWidth || !cellHeight) measureCell(); 235 el.scrollTop = offset.top * cellHeight; 236 el.scrollLeft = offset.left * cellWidth; 237 } 238 } 239 }, 240 _replaceState: function (ptr, len) { 241 const url = readWasmString(ptr, len); 242 // passive same-page URL changes. replaceState changes the URL 243 // without adding a history entry, so the back button isn't 244 // cluttered with unnecessary entries. 245 if (window.location.pathname !== url) { 246 history.replaceState({}, "", url); 247 } 248 }, 249 _focusInput: function (id) { 250 const target = grid.querySelector(`[data-key="control:${id}"]`); 251 if (!target) return; 252 if (document.activeElement !== target) target.focus(); 253 if (target.readOnly) target.select(); 254 }, 255 _navigate: function (ptr, len) { 256 // a real browser navigation to another top-level page (the wasm 257 // can't render it client-side without server data). 258 window.location.assign(readWasmString(ptr, len)); 259 }, 260 _scrollToFocus: function (id) { 261 grid.dataset.focusId = id; 262 // bring the focused widget into view within its own .scroll div. it's 263 // several spans (one per row) sharing this id, in top-to-bottom order, 264 // so the first gives its top/left edge and the last its bottom. 265 const els = focusElements(id); 266 if (els.length === 0) return; 267 const container = els[0].closest(".scroll"); 268 if (!container) return; 269 270 const c = container.getBoundingClientRect(); 271 const first = els[0].getBoundingClientRect(); 272 const last = els[els.length - 1].getBoundingClientRect(); 273 const top = first.top - c.top + container.scrollTop; 274 const bottom = last.bottom - c.top + container.scrollTop; 275 const left = first.left - c.left + container.scrollLeft; 276 let right = left; 277 for (const el of els) { 278 right = Math.max(right, el.getBoundingClientRect().right - c.left + container.scrollLeft); 279 } 280 281 // vertical is the priority axis. keep the viewport in place when it 282 // already overlaps a tall widget; otherwise reveal its nearest edge. 283 if (bottom - top > container.clientHeight) { 284 if (bottom <= container.scrollTop) { 285 container.scrollTop = bottom - container.clientHeight; 286 } else if (top >= container.scrollTop + container.clientHeight) { 287 container.scrollTop = top; 288 } 289 } else if (top < container.scrollTop) { 290 container.scrollTop = top; 291 } else if (bottom > container.scrollTop + container.clientHeight) { 292 container.scrollTop = bottom - container.clientHeight; 293 } 294 // horizontal-only scrolls are rows of controls, so reveal either 295 // edge. other scrolls reveal only the row's start; chasing varying 296 // right edges while moving vertically would yank their view sideways. 297 if (left < container.scrollLeft) { 298 container.scrollLeft = left; 299 } else if (container.dataset.scrollDirection === "horiz" && right > container.scrollLeft + container.clientWidth) { 300 container.scrollLeft = right - container.clientWidth; 301 } 302 }, 303 }, 304 }; 305 306 function sendTextInputValue(focusId, value) { 307 const bytes = encoder.encode(value); 308 const ptr = wasmInstance.exports._alloc(bytes.length); 309 // an empty allocation's pointer lies outside the buffer, so a view onto it 310 // would throw and leave the wasm holding the old value 311 if (bytes.length > 0) { 312 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 313 } 314 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 315 wasmInstance.exports._tick(minRows(), maxCols()); 316 } 317 318 // upload as soon as the file dialog returns, so attaching is one click. the 319 // file is the whole request body, so its name travels in a header. 320 document.addEventListener("change", (event) => { 321 const t = event.target; 322 if (!t || t.tagName !== "INPUT" || t.type !== "file" || !t.dataset.action) return; 323 const file = t.files[0]; 324 if (!file) return; 325 fetch(t.dataset.action, { 326 method: "POST", 327 headers: { "x-attachment-name": encodeURIComponent(file.name) }, 328 body: file, 329 }).then((res) => { 330 if (res.ok) window.location.reload(); 331 else res.text().then((message) => console.error("upload failed:", message)); 332 }); 333 }); 334 335 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 336 wasmInstance = result.instance; 337 338 // wait for the @font-face to load before measuring cell width, otherwise 339 // we get the fallback font's metrics. 340 if (document.fonts && document.fonts.ready) { 341 await document.fonts.ready; 342 } 343 344 // the page is embedded as raw json in a script tag. 345 // encode to utf-8 bytes and hand it to the wasm. 346 const jsonBytes = encoder.encode(pageJson); 347 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 348 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 349 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 350 351 document.addEventListener("keydown", (event) => { 352 // let the browser handle modifier combos. the TUI only uses unmodified keys, 353 // so intercepting these would just break normal browser navigation. 354 if (event.altKey || event.ctrlKey || event.metaKey) return; 355 // when a form element (text input or submit button) owns focus, the 356 // browser handles typing and Tab natively (and Enter on the button 357 // submits). we only forward keys into the TUI when focus is elsewhere. 358 // exception: arrow up/down on an input unfocuses it and forwards 359 // the event so the TUI can move focus between widgets. 360 if (document.activeElement) { 361 const tag = document.activeElement.tagName; 362 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 363 event.key === "ArrowLeft" || event.key === "ArrowRight"; 364 // a file picker is an input but behaves like a button: every key 365 // but an arrow is native (enter opens its dialog), and an arrow 366 // navigates away from it 367 if (tag === "INPUT" && document.activeElement.type === "file") { 368 if (!isArrow) return; 369 document.activeElement.blur(); 370 } else if (tag === "INPUT" && document.activeElement.readOnly && 371 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 372 event.preventDefault(); 373 if (event.key === "Enter") { 374 document.activeElement.select(); 375 return; 376 } 377 wasmInstance.exports._onKeyDown(event.keyCode); 378 wasmInstance.exports._tick(minRows(), maxCols()); 379 return; 380 } else if (tag === "INPUT" && event.key === "Enter") { 381 // enter in a form's text input never submits it; only the 382 // submit button does. an input outside a form has no submit 383 // button, so the TUI handles its enter instead. 384 event.preventDefault(); 385 if (!document.activeElement.form) { 386 wasmInstance.exports._onKeyDown(event.keyCode); 387 wasmInstance.exports._tick(minRows(), maxCols()); 388 } 389 return; 390 } else if (tag === "INPUT" && !document.activeElement.form && !document.activeElement.readOnly && 391 (event.key === "Tab" && !event.shiftKey || 392 event.key === "ArrowRight" && caretAtEnd(document.activeElement))) { 393 // an input outside a form (a search box) reaches the widgets 394 // beside it: Tab, and ArrowRight once the caret is at the end. 395 // blurred first, so the next key isn't the input's; the tick 396 // refocuses it if the TUI focus stayed. 397 event.preventDefault(); 398 document.activeElement.blur(); 399 wasmInstance.exports._onKeyDown(event.keyCode); 400 wasmInstance.exports._tick(minRows(), maxCols()); 401 return; 402 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 403 // up/down moves between widgets; left/right stay in the input 404 document.activeElement.blur(); 405 } else if (tag === "BUTTON" && isArrow) { 406 // arrows navigate away from a focused submit button 407 document.activeElement.blur(); 408 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 409 // Enter (submit / newline), typing, Tab, and a textarea's 410 // arrows — handled natively by the browser 411 return; 412 } 413 } 414 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 415 event.preventDefault(); 416 return; 417 } 418 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 419 event.preventDefault(); 420 return; 421 } 422 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 423 event.preventDefault(); 424 } 425 wasmInstance.exports._onKeyDown(event.keyCode); 426 wasmInstance.exports._tick(minRows(), maxCols()); 427 }); 428 429 // delegated listeners survive cell-layer replacement. the controls 430 // themselves are retained inside #grid. 431 document.addEventListener("input", (event) => { 432 const t = event.target; 433 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 434 sendTextInputValue(Number(t.dataset.focusId), t.value); 435 }); 436 437 document.addEventListener("focusin", (event) => { 438 const t = event.target; 439 if (!t || !t.dataset || !t.dataset.focusId) return; 440 // sync the wasm focus to wherever the browser moved focus 441 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 442 // keyed controls survive a redraw before click. cell links live in the 443 // replaceable backdrop, so their click handler redraws after activation. 444 if (nodeKey(t)?.startsWith("control:")) wasmInstance.exports._tick(minRows(), maxCols()); 445 }); 446 447 grid.addEventListener("click", (event) => { 448 if (event.target.matches("input[readonly]")) { 449 wasmInstance.exports._tick(minRows(), maxCols()); 450 return; 451 } 452 // a link inside a cell's text opens in a new tab on its own 453 if (event.target.closest("a.cell-link")) return; 454 const span = event.target.closest(".clickable"); 455 if (!span) return; 456 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 457 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 458 // wasm routes the click: an in-page link updates focus and re-renders, 459 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 460 // an in-page link doesn't also trigger a redundant full page load. 461 event.preventDefault(); 462 const focusId = Number(span.dataset.focusId); 463 wasmInstance.exports._onMouseClick(focusId); 464 wasmInstance.exports._tick(minRows(), maxCols()); 465 }); 466 467 let resizeTimer = null; 468 window.addEventListener("resize", () => { 469 clearTimeout(resizeTimer); 470 resizeTimer = setTimeout(() => { 471 wasmInstance.exports._tick(minRows(), maxCols()); 472 }, 100); 473 }); 474 }); 475