╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
221 } 222 223 // upload as soon as the file dialog returns, so attaching is one click. the 224 // file is the whole request body, so its name travels in a header. 225 document.addEventListener("change", (event) => { 226 const t = event.target; 227 if (!t || t.tagName !== "INPUT" || t.type !== "file" || !t.dataset.action) return; 228 const file = t.files[0]; 229 if (!file) return; 230 fetch(t.dataset.action, { 231 method: "POST", 232 headers: { "x-attachment-name": encodeURIComponent(file.name) }, 233 body: file, 234 }).then((res) => { 235 if (res.ok) window.location.reload(); 236 else res.text().then((message) => console.error("upload failed:", message)); 237 }); 238 }); 239 240 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 241 wasmInstance = result.instance; 242 243 // wait for the @font-face to load before measuring cell width, otherwise 244 // we get the fallback font's metrics. 245 if (document.fonts && document.fonts.ready) { 246 await document.fonts.ready; 247 } 248 249 // the page is embedded as raw json in a script tag. 250 // encode to utf-8 bytes and hand it to the wasm. 251 const jsonBytes = encoder.encode(pageJson); 252 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 253 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 254 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 255 256 document.addEventListener("keydown", (event) => { 257 // let the browser handle modifier combos. the TUI only uses unmodified keys, 258 // so intercepting these would just break normal browser navigation. 259 if (event.altKey || event.ctrlKey || event.metaKey) return; 260 // when a form element (text input or submit button) owns focus, the 261 // browser handles typing and Tab natively (and Enter on the button 262 // submits). we only forward keys into the TUI when focus is elsewhere. 263 // exception: arrow up/down on an input unfocuses it and forwards 264 // the event so the TUI can move focus between widgets. 265 if (document.activeElement) { 266 const tag = document.activeElement.tagName; 267 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 268 event.key === "ArrowLeft" || event.key === "ArrowRight"; 269 // a file picker is an input but behaves like a button: every key 270 // but an arrow is native (enter opens its dialog), and an arrow 271 // navigates away from it 272 if (tag === "INPUT" && document.activeElement.type === "file") { 273 if (!isArrow) return; 274 document.activeElement.blur(); 275 } else if (tag === "INPUT" && document.activeElement.readOnly && 276 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 277 event.preventDefault(); 278 if (event.key === "Enter") { 279 document.activeElement.select(); 280 return; 281 } 282 wasmInstance.exports._onKeyDown(event.keyCode); 283 wasmInstance.exports._tick(minRows(), maxCols()); 284 return; 285 } else if (tag === "INPUT" && event.key === "Enter") { 286 // enter in a text input never submits the form; only the 287 // submit button does 288 event.preventDefault(); 289 return; 290 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 291 // up/down moves between widgets; left/right stay in the input 292 document.activeElement.blur(); 293 } else if (tag === "BUTTON" && isArrow) { 294 // arrows navigate away from a focused submit button 295 document.activeElement.blur(); 296 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 297 // Enter (submit / newline), typing, Tab, and a textarea's 298 // arrows — handled natively by the browser 299 return; 300 } 301 } 302 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 303 event.preventDefault(); 304 return; 305 } 306 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 307 event.preventDefault(); 308 return; 309 } 310 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 311 event.preventDefault(); 312 } 313 wasmInstance.exports._onKeyDown(event.keyCode); 314 wasmInstance.exports._tick(minRows(), maxCols()); 315 }); 316 317 // submit on mousedown rather than waiting for click: the focusin this 318 // same mousedown fires ticks the wasm, and a resulting overlay rebuild 319 // would detach the button before its click could land. the form is 320 // guaranteed live at mousedown time. 321 document.addEventListener("mousedown", (event) => { 322 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 323 const btn = event.target.closest ? event.target.closest("button[type=submit][data-focus-id]") : null; 324 if (!btn || !btn.form) return; 325 // empty-action forms are handled by their onsubmit on the click path 326 if (!btn.form.getAttribute("action")) return; 327 // if the button survives to receive the click, don't submit twice 328 btn.addEventListener("click", (e) => e.preventDefault(), { once: true }); 329 btn.form.requestSubmit(btn); 330 }); 331 332 // listeners on document (not #grid) since the form lives outside #grid; 333 // input/focus events from form elements still bubble up to document. 334 document.addEventListener("input", (event) => { 335 const t = event.target; 336 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 337 sendTextInputValue(Number(t.dataset.focusId), t.value); 338 }); 339 340 document.addEventListener("focusin", (event) => { 341 const t = event.target; 342 if (!t || !t.dataset || !t.dataset.focusId) return; 343 // sync the wasm focus to wherever the browser moved focus 344 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 345 // a click's mousedown fires this focusin before the click event. ticking 346 // here would rebuild #grid and destroy the node before its click lands, 347 // swallowing the navigation and forcing a second click — so don't 348 // re-render for a grid element. a file input is also skipped because a 349 // changed overlay would replace it between mousedown and click, before 350 // the browser opens its picker. 351 if (!grid.contains(t) && !(t.tagName === "INPUT" && t.type === "file")) { 352 wasmInstance.exports._tick(minRows(), maxCols()); 353 } 354 }); 355 356 grid.addEventListener("click", (event) => { 357 if (event.target.matches("input[readonly]")) { 358 wasmInstance.exports._tick(minRows(), maxCols()); 359 return; 360 } 361 const span = event.target.closest(".clickable"); 362 if (!span) return; 363 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 364 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 365 // wasm routes the click: an in-page link updates focus and re-renders, 366 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 367 // an in-page link doesn't also trigger a redundant full page load. 368 event.preventDefault(); 369 const focusId = Number(span.dataset.focusId); 370 wasmInstance.exports._onMouseClick(focusId); 371 wasmInstance.exports._tick(minRows(), maxCols()); 372 }); 373 374 let resizeTimer = null; 375 window.addEventListener("resize", () => { 376 clearTimeout(resizeTimer); 377 resizeTimer = setTimeout(() => { 378 wasmInstance.exports._tick(minRows(), maxCols()); 379 }, 100); 380 }); 381 }); 382