╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ script.js ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
🬐 🬠 🬞🬂🬏 🬟 🬑 🬟 🬑 ╭master╮ master haxy: 🬋🬋🬋 🬋🬋🬋 🬋 🬋 │files │ commits refs discuss issues patches new login 🬐 🬠 🬐 🬠 🬑 🬟 🬰 ╰──────╯ (716) user
╭ find file ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╮ ╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╮ │ │ │http│ ssh │ │ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
.. ansi/ index.html not-found.txt ╭─────────────────────────────────╮ │script.js │ ╰─────────────────────────────────╯ term.ttf
13 // measured once after the font is loaded. recomputed lazily if either reads 14 // back as zero (e.g. measured before the font was actually ready). 15 let cellWidth = null; 16 let cellHeight = null; 17 18 function measureCell() { 19 const probe = document.createElement("span"); 20 probe.style.position = "absolute"; 21 probe.style.visibility = "hidden"; 22 probe.style.whiteSpace = "pre"; 23 probe.textContent = "X".repeat(100); 24 grid.appendChild(probe); 25 const rect = probe.getBoundingClientRect(); 26 probe.remove(); 27 cellWidth = rect.width / 100; 28 cellHeight = rect.height; 29 } 30 31 function maxCols() { 32 if (!cellWidth) measureCell(); 33 return Math.max(MIN_COLS, Math.floor(document.body.clientWidth / cellWidth)); 34 } 35 36 // minimum row count for the wasm build — the TUI fills at least the 37 // viewport height, longer content extends past it and the browser scrolls. 38 function minRows() { 39 if (!cellHeight) measureCell(); 40 return Math.max(1, Math.floor(document.documentElement.clientHeight / cellHeight)); 41 } 42 43 function readWasmString(ptr, len) { 44 const memory = wasmInstance.exports.memory; 45 return decoder.decode(new Uint8Array(memory.buffer, ptr, len)); 46 } 47 48 function focusElements(id) { 49 // a native control is the authoritative geometry for its widget. the cell 50 // layer also contains spans with this id, but those are only its backdrop. 51 const control = grid.querySelector(`[data-key="control:${id}"]`); 52 return control ? [control] : Array.from(grid.querySelectorAll(`[data-focus-id="${id}"]`)); 53 } 54 55 // whether an input's caret sits past its last character, with nothing selected 56 function caretAtEnd(input) { 57 return input.selectionStart === input.value.length && input.selectionEnd === input.value.length; 58 } 59 60 function focusedNativeScroll() { 61 const id = grid.dataset.focusId; 62 if (!id) return null; 63 const focused = focusElements(id); 64 if (focused.length === 0) return null; 65 const container = focused[0].closest(".scroll"); 66 return container ? { focused, container } : null; 67 } 68 69 // scroll a step while the focused widget continues past the viewport edge. 70 function scrollFocusedWidget(down) { 71 const stepLines = 3; // see step_lines in widget.zig's scrollThroughRow for the terminal equivalent 72 const native = focusedNativeScroll(); 73 if (!native) return false; 74 const viewport = native.container.getBoundingClientRect(); 75 const edge = (down ? native.focused[native.focused.length - 1] : native.focused[0]).getBoundingClientRect(); 76 const overflow = down ? edge.bottom - viewport.bottom : viewport.top - edge.top; 77 if (overflow <= 0.5) return false; 78 if (!cellHeight) measureCell(); 79 native.container.scrollTop += (down ? 1 : -1) * Math.min(stepLines * cellHeight, overflow); 80 return true; 81 } 82 83 // page the focused native scroll, then focus its leading visible widget. 84 function pageFocusedScroll(down) { 85 const native = focusedNativeScroll(); 86 if (!native) return false; 87 const container = native.container; 88 89 container.scrollTop += (down ? 1 : -1) * container.clientHeight; 90 const viewport = container.getBoundingClientRect(); 91 let chosen = null; 92 for (const el of container.querySelectorAll(".clickable[data-focus-id]")) { 93 const rect = el.getBoundingClientRect(); 94 if (rect.bottom <= viewport.top || rect.top >= viewport.bottom) continue; 95 chosen = el; 96 if (!down) break; 97 } 98 if (chosen) wasmInstance.exports._setFocus(Number(chosen.dataset.focusId)); 99 wasmInstance.exports._tick(minRows(), maxCols()); 100 return true; 101 } 102 103 // stateful controls, scroll panels, and form owners are keyed. everything 104 // unkeyed is replaced wholesale, including each panel's cell layer. 105 function nodeKey(node) { 106 if (node.nodeType !== Node.ELEMENT_NODE) return null; 107 return node.dataset.key || null; 108 } 109 110 function nodesMatch(current, desired) { 111 if (nodeKey(current) !== nodeKey(desired) || current.tagName !== desired.tagName) return false; 112 return current.tagName !== "INPUT" || current.type === desired.type; 113 } 114 115 function syncAttributes(current, desired) { 116 const preserveValue = desired.hasAttribute("data-preserve-value"); 117 for (const attr of Array.from(current.attributes)) { 118 if (!desired.hasAttribute(attr.name)) current.removeAttribute(attr.name); 119 } 120 for (const attr of Array.from(desired.attributes)) { 121 // updating the default value of a dirty input is usually harmless, but 122 // avoiding it entirely gives browsers no opportunity to disturb the 123 // live value, selection, undo stack, or an open file picker. 124 if (preserveValue && attr.name === "value") continue; 125 if (current.getAttribute(attr.name) !== attr.value) current.setAttribute(attr.name, attr.value); 126 } 127 128 if (current.tagName === "INPUT" && !preserveValue && current.type !== "file" && current.value !== desired.value) { 129 current.value = desired.value; 130 } 131 // the live checked state is what posts, so it follows the grid's selection 132 if (current.tagName === "INPUT" && current.type === "radio") current.checked = desired.checked; 133 } 134 135 function patchNode(current, desired) { 136 syncAttributes(current, desired); 137 if (current.tagName === "TEXTAREA") { 138 if (!desired.hasAttribute("data-preserve-value")) { 139 if (current.value !== desired.value) current.value = desired.value; 140 if (current.defaultValue !== desired.defaultValue) current.defaultValue = desired.defaultValue; 141 } 142 return; 143 } 144 145 patchChildren(current, desired); 146 } 147 148 function patchChildren(current, desired) { 149 const keyed = new Map(); 150 for (const child of Array.from(current.childNodes)) { 151 const key = nodeKey(child); 152 if (key) keyed.set(key, child); 153 } 154 155 let cursor = current.firstChild; 156 for (const wanted of Array.from(desired.childNodes)) { 157 const key = nodeKey(wanted); 158 if (!key) { 159 const replacement = wanted.cloneNode(true); 160 if (cursor && !nodeKey(cursor)) { 161 const next = cursor.nextSibling; 162 current.replaceChild(replacement, cursor); 163 cursor = next; 164 } else { 165 current.insertBefore(replacement, cursor); 166 } 167 continue; 168 } 169 170 let found = keyed.get(key); 171 if (found && !nodesMatch(found, wanted)) found = null; 172 if (!found) { 173 found = wanted.cloneNode(true); 174 current.insertBefore(found, cursor); 175 } else { 176 keyed.delete(key); 177 while (cursor && cursor !== found && !nodeKey(cursor)) { 178 const next = cursor.nextSibling; 179 cursor.remove(); 180 cursor = next; 181 } 182 if (found !== cursor) current.insertBefore(found, cursor); 183 patchNode(found, wanted); 184 } 185 cursor = found.nextSibling; 186 } 187 188 while (cursor) { 189 const next = cursor.nextSibling; 190 cursor.remove(); 191 cursor = next; 192 } 193 } 194 195 function patchHtml(container, html) { 196 const template = document.createElement("template"); 197 template.innerHTML = html; 198 patchChildren(container, template.content); 199 } 200 201 const importObject = { 202 env: { 203 _consoleLog: function (ptr, len) { 204 console.log(readWasmString(ptr, len)); 205 }, 206 _setHtml: function (ptr, len) { 207 const html = readWasmString(ptr, len); 208 if (html === currentHtml) return; 209 currentHtml = html; 210 // snapshot browser and wasm scroll state before reconciling. a stable 211 // scroll with the same version and wasm offset keeps its browser 212 // position; new content or an intentional wasm move uses the offset. 213 const scrolls = new Map(); 214 for (const el of grid.querySelectorAll(".scroll[data-key]")) { 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 // reveal a widget that fits the view's width. a wider one keeps the 295 // horizontal position, which only arrow left/right changes. 296 if (right - left <= container.clientWidth) { 297 if (left < container.scrollLeft) { 298 container.scrollLeft = left; 299 } else if (right > container.scrollLeft + container.clientWidth) { 300 container.scrollLeft = right - container.clientWidth; 301 } 302 } 303 }, 304 }, 305 }; 306 307 function sendTextInputValue(focusId, value) { 308 const bytes = encoder.encode(value); 309 const ptr = wasmInstance.exports._alloc(bytes.length); 310 // an empty allocation's pointer lies outside the buffer, so a view onto it 311 // would throw and leave the wasm holding the old value 312 if (bytes.length > 0) { 313 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, bytes.length).set(bytes); 314 } 315 wasmInstance.exports._setTextInputValue(focusId, ptr, bytes.length); 316 wasmInstance.exports._tick(minRows(), maxCols()); 317 } 318 319 // upload as soon as the file dialog returns, so attaching is one click. the 320 // file is the whole request body, so its name travels in a header. 321 document.addEventListener("change", (event) => { 322 const t = event.target; 323 if (!t || t.tagName !== "INPUT" || t.type !== "file" || !t.dataset.action) return; 324 const file = t.files[0]; 325 if (!file) return; 326 fetch(t.dataset.action, { 327 method: "POST", 328 headers: { "x-attachment-name": encodeURIComponent(file.name) }, 329 body: file, 330 }).then((res) => { 331 if (res.ok) window.location.reload(); 332 else res.text().then((message) => console.error("upload failed:", message)); 333 }); 334 }); 335 336 WebAssembly.instantiateStreaming(fetch("/haxy.wasm"), importObject).then(async (result) => { 337 wasmInstance = result.instance; 338 339 // wait for the @font-face to load before measuring cell width, otherwise 340 // we get the fallback font's metrics. 341 if (document.fonts && document.fonts.ready) { 342 await document.fonts.ready; 343 } 344 345 // the page is embedded as raw json in a script tag. 346 // encode to utf-8 bytes and hand it to the wasm. 347 const jsonBytes = encoder.encode(pageJson); 348 const ptr = wasmInstance.exports._alloc(jsonBytes.length); 349 new Uint8Array(wasmInstance.exports.memory.buffer, ptr, jsonBytes.length).set(jsonBytes); 350 wasmInstance.exports._init(ptr, jsonBytes.length, minRows(), maxCols()); 351 352 document.addEventListener("keydown", (event) => { 353 // let the browser handle modifier combos. the TUI only uses unmodified keys, 354 // so intercepting these would just break normal browser navigation. 355 if (event.altKey || event.ctrlKey || event.metaKey) return; 356 // when a form element (text input or submit button) owns focus, the 357 // browser handles typing and Tab natively (and Enter on the button 358 // submits). we only forward keys into the TUI when focus is elsewhere. 359 // exception: arrow up/down on an input unfocuses it and forwards 360 // the event so the TUI can move focus between widgets. 361 if (document.activeElement) { 362 const tag = document.activeElement.tagName; 363 const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown" || 364 event.key === "ArrowLeft" || event.key === "ArrowRight"; 365 // a file picker is an input but behaves like a button: every key 366 // but an arrow is native (enter opens its dialog), and an arrow 367 // navigates away from it 368 if (tag === "INPUT" && document.activeElement.type === "file") { 369 if (!isArrow) return; 370 document.activeElement.blur(); 371 } else if (tag === "INPUT" && document.activeElement.readOnly && 372 ["Enter", "ArrowLeft", "ArrowRight"].includes(event.key)) { 373 event.preventDefault(); 374 if (event.key === "Enter") { 375 document.activeElement.select(); 376 return; 377 } 378 wasmInstance.exports._onKeyDown(event.keyCode); 379 wasmInstance.exports._tick(minRows(), maxCols()); 380 return; 381 } else if (tag === "INPUT" && event.key === "Enter") { 382 // enter in a form's text input never submits it; only the 383 // submit button does. a form with no button submits on enter. 384 // an input outside a form has no submit button, so the TUI 385 // handles its enter instead. 386 const form = document.activeElement.form; 387 if (form && ![...form.elements].some((element) => element.tagName === "BUTTON")) return; 388 event.preventDefault(); 389 if (!document.activeElement.form) { 390 wasmInstance.exports._onKeyDown(event.keyCode); 391 wasmInstance.exports._tick(minRows(), maxCols()); 392 } 393 return; 394 } else if (tag === "INPUT" && !document.activeElement.form && !document.activeElement.readOnly && 395 (event.key === "Tab" && !event.shiftKey || 396 event.key === "ArrowRight" && caretAtEnd(document.activeElement))) { 397 // an input outside a form (a search box) reaches the widgets 398 // beside it: Tab, and ArrowRight once the caret is at the end. 399 // blurred first, so the next key isn't the input's; the tick 400 // refocuses it if the TUI focus stayed. 401 event.preventDefault(); 402 document.activeElement.blur(); 403 wasmInstance.exports._onKeyDown(event.keyCode); 404 wasmInstance.exports._tick(minRows(), maxCols()); 405 return; 406 } else if (tag === "INPUT" && (event.key === "ArrowUp" || event.key === "ArrowDown")) { 407 // up/down moves between widgets; left/right stay in the input 408 document.activeElement.blur(); 409 } else if (tag === "BUTTON" && isArrow) { 410 // arrows navigate away from a focused submit button 411 document.activeElement.blur(); 412 } else if (tag === "INPUT" || tag === "BUTTON" || tag === "TEXTAREA") { 413 // Enter (submit / newline), typing, Tab, and a textarea's 414 // arrows — handled natively by the browser 415 return; 416 } 417 } 418 if ((event.key === "ArrowUp" || event.key === "ArrowDown") && scrollFocusedWidget(event.key === "ArrowDown")) { 419 event.preventDefault(); 420 return; 421 } 422 if ((event.key === "PageUp" || event.key === "PageDown") && pageFocusedScroll(event.key === "PageDown")) { 423 event.preventDefault(); 424 return; 425 } 426 if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"].includes(event.key)) { 427 event.preventDefault(); 428 } 429 wasmInstance.exports._onKeyDown(event.keyCode); 430 wasmInstance.exports._tick(minRows(), maxCols()); 431 }); 432 433 // delegated listeners survive cell-layer replacement. the controls 434 // themselves are retained inside #grid. 435 document.addEventListener("input", (event) => { 436 const t = event.target; 437 if (!t || (t.tagName !== "INPUT" && t.tagName !== "TEXTAREA") || !t.dataset.focusId) return; 438 sendTextInputValue(Number(t.dataset.focusId), t.value); 439 }); 440 441 document.addEventListener("focusin", (event) => { 442 const t = event.target; 443 if (!t || !t.dataset || !t.dataset.focusId) return; 444 // sync the wasm focus to wherever the browser moved focus 445 wasmInstance.exports._setFocus(Number(t.dataset.focusId)); 446 // keyed controls survive a redraw before click. cell links live in the 447 // replaceable backdrop, so their click handler redraws after activation. 448 if (nodeKey(t)?.startsWith("control:")) wasmInstance.exports._tick(minRows(), maxCols()); 449 }); 450 451 grid.addEventListener("click", (event) => { 452 if (event.target.matches("input[readonly]")) { 453 wasmInstance.exports._tick(minRows(), maxCols()); 454 return; 455 } 456 // a link inside a cell's text opens in a new tab on its own 457 if (event.target.closest("a.cell-link")) return; 458 const span = event.target.closest(".clickable"); 459 if (!span) return; 460 // leave modified / non-left clicks (open-in-new-tab, etc.) to the browser 461 if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; 462 // wasm routes the click: an in-page link updates focus and re-renders, 463 // a cross-page one calls _navigate. suppress the <a>'s own navigation so 464 // an in-page link doesn't also trigger a redundant full page load. 465 event.preventDefault(); 466 const focusId = Number(span.dataset.focusId); 467 wasmInstance.exports._onMouseClick(focusId); 468 wasmInstance.exports._tick(minRows(), maxCols()); 469 }); 470 471 let resizeTimer = null; 472 window.addEventListener("resize", () => { 473 clearTimeout(resizeTimer); 474 resizeTimer = setTimeout(() => { 475 wasmInstance.exports._tick(minRows(), maxCols()); 476 }, 100); 477 }); 478 }); 479