Spaces:
Sleeping
Sleeping
| ; | |
| (() => { | |
| const editable = "h1,h2,h3,p,strong,summary,label,button,small,figcaption,svg text"; | |
| const protectedAreas = "#run,#matching-query-form input,#encoder-values,#encoder-phrase,#results,#bridge-product,#bridge-adjustment,#bridge-score,#matching-detail,#bridge-calculation,#bridge-prompt,#bridge-region,#sigmoid-chart,#scene-panel .scene-footer,#status,#filename,#runtime,#matching-query-status,.architecture-input,select,option"; | |
| let edits = {}, enabled = false, selected = null, selectedKey = null; | |
| function keyFor(node) { | |
| const parts = []; | |
| for (let current = node; current && current !== document.body; current = current.parentElement) { | |
| if (current.id) {parts.unshift(`#${CSS.escape(current.id)}`); break;} | |
| const siblings = [...current.parentElement.children].filter(sibling => sibling.tagName === current.tagName); | |
| parts.unshift(`${current.localName}:nth-of-type(${siblings.indexOf(current) + 1})`); | |
| } | |
| let context = ""; | |
| if (["view-title", "view-copy", "view-reading"].includes(node.id)) context = document.querySelector("[data-view][aria-selected='true']")?.dataset.view || "matching"; | |
| if (node.id.startsWith("architecture-description-")) context = document.querySelector("[data-architecture-component].described")?.dataset.componentName || "default"; | |
| return `${parts.join(" > ")}||${context}`; | |
| } | |
| function targets() { | |
| return [...document.querySelectorAll(editable)].filter(node => !node.closest("#text-editor") && !node.closest(protectedAreas) && !node.querySelector("input,select,canvas,svg,img") && !node.querySelector(editable)); | |
| } | |
| function applyEdits() { | |
| for (const node of targets()) { | |
| const key = keyFor(node); | |
| if (Object.hasOwn(edits, key) && node.textContent !== edits[key]) node.textContent = edits[key]; | |
| } | |
| } | |
| // Saved copy also applies when the editing controls are disabled. | |
| fetch("/api/text-edits").then(response => { | |
| if (!response.ok) throw new Error("Could not load saved text."); | |
| return response.json(); | |
| }).then(value => {edits = value; applyEdits();}).catch(error => {if (message) message.textContent = error.message;}); | |
| const observer = new MutationObserver(applyEdits); | |
| observer.observe(document.querySelector("main"), {childList:true, subtree:true, characterData:true}); | |
| let message = null; | |
| if (document.getElementById("text-editor-script").dataset.enabled !== "true") return; | |
| const panel = document.createElement("aside"); | |
| panel.id = "text-editor"; | |
| panel.innerHTML = '<div class="editor-toolbar"><strong>Text editor (temporary)</strong><button type="button" id="edit-toggle">Edit text</button></div><div id="editor-fields" hidden><p>Click the text you want to change. Turn editing off to use the app.</p><textarea id="edit-value" aria-label="Replacement text" rows="5" maxlength="6000"></textarea><button type="button" id="edit-save" disabled>Save text</button><button type="button" id="edit-cancel">Cancel</button></div><p id="edit-message" role="status"></p>'; | |
| document.body.append(panel); | |
| const toggle = document.getElementById("edit-toggle"), fields = document.getElementById("editor-fields"), input = document.getElementById("edit-value"), save = document.getElementById("edit-save"); | |
| message = document.getElementById("edit-message"); | |
| function clearSelection() {selected?.classList.remove("text-edit-selected"); selected = null; selectedKey = null; save.disabled = true; input.value = "";} | |
| toggle.addEventListener("click", () => { | |
| enabled = !enabled; fields.hidden = !enabled; | |
| document.body.classList.toggle("editing-copy", enabled); | |
| toggle.textContent = enabled ? "Done editing" : "Edit text"; | |
| if (!enabled) clearSelection(); | |
| }); | |
| document.addEventListener("click", event => { | |
| if (!enabled || event.target.closest("#text-editor")) return; | |
| const node = event.target.closest(editable); | |
| if (!node || !targets().includes(node)) return; | |
| event.preventDefault(); event.stopImmediatePropagation(); | |
| clearSelection(); selected = node; selectedKey = keyFor(node); | |
| node.classList.add("text-edit-selected"); input.value = node.textContent; | |
| save.disabled = false; input.focus(); message.textContent = ""; | |
| }, true); | |
| document.getElementById("edit-cancel").addEventListener("click", clearSelection); | |
| save.addEventListener("click", async () => { | |
| if (!selectedKey) return; | |
| const key = selectedKey, text = input.value; | |
| save.disabled = true; | |
| try { | |
| const response = await fetch("/api/text-edits", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({key, text})}); | |
| const data = await response.json(); | |
| if (!response.ok) throw new Error(data.error || "Text could not be saved."); | |
| edits[key] = text; applyEdits(); message.textContent = "Saved to text_edits.json. Your text will stay after refresh."; | |
| } catch (error) {message.textContent = error.message;} | |
| finally {save.disabled = !selected;} | |
| }); | |
| })(); | |