╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
353 if (document.activeElement) { 354 const tag = document.activeElement.tagName; 355 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 356 event.key === "ArrowLeft" || event.key === "ArrowRight"; 357 // a file picker is an input but behaves like a button: every key 358 // but an arrow is native (enter opens its dialog), and an arrow 359 // navigates away from it 360 if (tag === "INPUT" && document.activeElement.type === "file") { 361 if (!isArrow) return; 362 document.activeElement.blur(); 363 } else if (tag === "INPUT" && document.activeElement.readOnly && 364 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 365 event.preventDefault(); 366 if (event.key === "Enter") { 367 document.activeElement.select(); 368 return; 369 } 370 wasmInstance.exports._onKeyDown(event.keyCode); 371 wasmInstance.exports._tick(minRows(), maxCols()); 372 return; 373 } else if (tag === "INPUT" && event.key === "Enter") { 374 // enter in a form's text input never submits it; only the 375 // submit button does. an input outside a form has no submit 376 // button, so the TUI handles its enter instead. 377 event.preventDefault(); 378 if (!document.activeElement.form) { 379 wasmInstance.exports._onKeyDown(event.keyCode); 380 wasmInstance.exports._tick(minRows(), maxCols()); 381 } 382 return; 383 } else if (tag === "INPUT" && !document.activeElement.form && !document.activeElement.readOnly && 384 (event.key === "Tab" && !event.shiftKey || 385 event.key === "ArrowRight" && caretAtEnd(document.activeElement))) { 386 // an input outside a form (a search box) reaches the widgets 387 // beside it: Tab, and ArrowRight once the caret is at the end. 388 // blurred first, so the next key isn't the input's; the tick 389 // refocuses it if the TUI focus stayed. 390 event.preventDefault(); 391 document.activeElement.blur(); 392 wasmInstance.exports._onKeyDown(event.keyCode); 393 wasmInstance.exports._tick(minRows(), maxCols()); 394 return; 395 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 396 // up/down moves between widgets; left/right stay in the input 397 document.activeElement.blur(); 398 } else if (tag === "BUTTON" && isArrow) { 399 // arrows navigate away from a focused submit button 400 document.activeElement.blur(); 401 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 402 // Enter (submit / newline), typing, Tab, and a textarea's 403 // arrows — handled natively by the browser 404 return; 405 } 406 } 407 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 408 event.preventDefault(); 409 return; 410 } 411 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 412 event.preventDefault(); 413 return; 414 } 415 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 416 event.preventDefault(); 417 } 418 wasmInstance.exports._onKeyDown(event.keyCode); 419 wasmInstance.exports._tick(minRows(), maxCols()); 420 }); 421 422 // delegated listeners survive cell-layer replacement. the controls 423 // themselves are retained inside #grid. 424 document.addEventListener("input", (event) => { 425 const t = event.target; 426 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 427 sendTextInputValue(Number(t.dataset.focusId), t.value); 428 }); 429 430 document.addEventListener("focusin", (event) => { 431 const t = event.target; 432 if (!t || !t.dataset || !t.dataset.focusId) return; 433 // sync the wasm focus to wherever the browser moved focus 434 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 435 // keyed controls survive a redraw before click. cell links live in the 436 // replaceable backdrop, so their click handler redraws after activation. 437 if (nodeKey(t)?.startsWith("control:")) wasmInstance.exports._tick(minRows(), maxCols()); 438 }); 439 440 grid.addEventListener("click", (event) => { 441 if (event.target.matches("input[readonly]")) { 442 wasmInstance.exports._tick(minRows(), maxCols()); 443 return; 444 } 445 // a link inside a cell's text opens in a new tab on its own 446 if (event.target.closest("a.cell-link")) return; 447 const span = event.target.closest(".clickable"); 448 if (!span) return; 449 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 450 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 451 // wasm routes the click: an in-page link updates focus and re-renders, 452 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 453 // an in-page link doesn't also trigger a redundant full page load. 454 event.preventDefault(); 455 const focusId = Number(span.dataset.focusId); 456 wasmInstance.exports._onMouseClick(focusId); 457 wasmInstance.exports._tick(minRows(), maxCols()); 458 }); 459 460 let resizeTimer = null; 461 window.addEventListener("resize", () => { 462 clearTimeout(resizeTimer); 463 resizeTimer = setTimeout(() => { 464 wasmInstance.exports._tick(minRows(), maxCols()); 465 }, 100); 466 }); 467 }); 468