@ascribed/review 0.1.2-next.8 → 0.2.1-next.10

package/dist/marks/index.js

@@ -1,17 +1,5 @@
-// @ascribed/review/marks: marks what changed on a rendered page, in the
-// browser.
-//
-// The page is Ascribe's site output rendered with source anchors (the
-// site-render contract, §7): every block's element carries
-// `data-ascribe-source`, and `data-ascribe-via` when it came through
-// includes. The changes are `ascribe diff --format json`'s, for that page.
-// `markChanges` applies them to the page's elements; `marks.css` (exported
-// as `@ascribed/review/marks.css`) draws them, and `setShow` switches between
-// the changes, the page as it will be, and the page as it was.
-//
-// Everything the marks add is an element with `data-ascribe-ui`, and every
-// element they change gets `data-ascribe-change`, so `clearMarks` can put the
-// page back as it was rendered.
+import { CLASS_DEL, CLASS_FLASH, CLASS_HINT, CLASS_INS, CLASS_LABEL, CLASS_LABEL_BEFORE, CLASS_MARKS, CLASS_MOVED_FROM, CLASS_MOVE_AFTER, CLASS_MOVE_LINK, CLASS_MOVE_NOTE, CLASS_OPEN, CLASS_REMOVED, CLASS_REMOVED_BODY, CLASS_TOGGLE, CLASS_WAS_COPY, CLASS_WHERE, DATA_CHANGE, DATA_HAS_WAS, DATA_HINT, DATA_LABEL, DATA_MOVE, DATA_SHOW, DATA_SOURCE, DATA_UI, DATA_VIA, DATA_WAS_ONLY, DATA_WAS_SOURCE, ELEMENT_TAB, } from "../names.js";
+export { titleNodes } from "./title.js";
 const LABELS = {
     added: "Added",
     changed: "Changed",
@@ -34,7 +22,7 @@ const LABEL_INSIDE = new Set([
     "td",
     "th",
     // A tab's panel: before it would put the label among the tab list's panels.
-    "ascribe-tab",
+    ELEMENT_TAB,
 ]);
 /** Parses `<path>:<first>-<last>`, splitting at the last `:`. */
 export function parseSource(source) {
@@ -78,7 +66,7 @@ export function describeSource(source, via) {
     return text;
 }
 function viaOf(element) {
-    return element.getAttribute("data-ascribe-via") ?? "";
+    return element.getAttribute(DATA_VIA) ?? "";
 }
 /**
  * The element of a block: the one with exactly its anchor, or, when there's
@@ -88,8 +76,8 @@ function viaOf(element) {
  */
 export function findBlock(root, anchor) {
     const via = anchor.via.join(" ");
-    const anchored = Array.from(root.querySelectorAll("[data-ascribe-source]"));
-    const exact = anchored.find((el) => el.getAttribute("data-ascribe-source") === anchor.source && viaOf(el) === via);
+    const anchored = Array.from(root.querySelectorAll(`[${DATA_SOURCE}]`));
+    const exact = anchored.find((el) => el.getAttribute(DATA_SOURCE) === anchor.source && viaOf(el) === via);
     if (exact)
         return exact;
     const want = parseSource(anchor.source);
@@ -100,7 +88,7 @@ export function findBlock(root, anchor) {
     for (const el of anchored) {
         if (viaOf(el) !== via)
             continue;
-        const has = parseSource(el.getAttribute("data-ascribe-source") ?? "");
+        const has = parseSource(el.getAttribute(DATA_SOURCE) ?? "");
         if (!has || has.path !== want.path)
             continue;
         if (has.first > want.first || has.last < want.last)
@@ -116,7 +104,7 @@ export function findBlock(root, anchor) {
 function ui(doc, tag, className, text) {
     const el = doc.createElement(tag);
     el.className = className;
-    el.setAttribute("data-ascribe-ui", "");
+    el.setAttribute(DATA_UI, "");
     if (text !== undefined)
         el.textContent = text;
     return el;
@@ -124,13 +112,13 @@ function ui(doc, tag, className, text) {
 /** A label, inside the block at its start, or just before it. */
 function addLabel(element, kind) {
     const doc = element.ownerDocument;
-    const label = ui(doc, "span", "ascribe-label", LABELS[kind]);
-    label.setAttribute("data-ascribe-label", kind);
+    const label = ui(doc, "span", CLASS_LABEL, LABELS[kind]);
+    label.setAttribute(DATA_LABEL, kind);
     if (LABEL_INSIDE.has(element.localName)) {
         element.prepend(label);
     }
     else {
-        label.classList.add("ascribe-label-before");
+        label.classList.add(CLASS_LABEL_BEFORE);
         element.before(label);
     }
 }
@@ -148,8 +136,8 @@ function contentOf(holder, before) {
 function copyOf(element) {
     const copy = element.cloneNode(true);
     for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
-        el.removeAttribute("data-ascribe-source");
-        el.removeAttribute("data-ascribe-via");
+        el.removeAttribute(DATA_SOURCE);
+        el.removeAttribute(DATA_VIA);
         el.removeAttribute("id");
     }
     return copy;
@@ -181,7 +169,7 @@ function ownText(element) {
         for (const child of Array.from(node.childNodes)) {
             if (child.nodeType === Node.TEXT_NODE)
                 text += child.nodeValue ?? "";
-            else if (child instanceof Element && !child.hasAttribute("data-ascribe-ui"))
+            else if (child instanceof Element && !child.hasAttribute(DATA_UI))
                 walk(child);
         }
     };
@@ -205,9 +193,7 @@ class Placer {
             let previous = this.#last.get(after) ?? after;
             // Past what the marks put after the block itself: its copy as it
             // was, or its "moved from" link.
-            for (let next = previous.nextElementSibling; next &&
-                (next.hasAttribute("data-ascribe-was-only") ||
-                    next.classList.contains("ascribe-move-after")); next = next.nextElementSibling) {
+            for (let next = previous.nextElementSibling; next && (next.hasAttribute(DATA_WAS_ONLY) || next.classList.contains(CLASS_MOVE_AFTER)); next = next.nextElementSibling) {
                 previous = next;
             }
             const el = make(after.parentElement);
@@ -226,7 +212,7 @@ class Placer {
         else {
             // First among the container's blocks: before its first anchored
             // child, or its first label, or at its end.
-            const first = Array.from(container.children).find((c) => c.hasAttribute("data-ascribe-source") || c.hasAttribute("data-ascribe-ui"));
+            const first = Array.from(container.children).find((c) => c.hasAttribute(DATA_SOURCE) || c.hasAttribute(DATA_UI));
             if (first)
                 first.before(el);
             else
@@ -270,8 +256,8 @@ function textMap(element) {
                 }
             }
             else if (child instanceof Element &&
-                !child.hasAttribute("data-ascribe-ui") &&
-                !child.hasAttribute("data-ascribe-source")) {
+                !child.hasAttribute(DATA_UI) &&
+                !child.hasAttribute(DATA_SOURCE)) {
                 walk(child);
             }
         }
@@ -342,10 +328,10 @@ function markWords(element, words) {
     edits.sort((a, b) => b.at - a.at || (a.kind === "del" ? -1 : 1));
     for (const edit of edits) {
         if (edit.kind === "ins") {
-            wrapRange(map, offset + edit.at, offset + edit.end, () => ui(doc, "ins", "ascribe-ins"));
+            wrapRange(map, offset + edit.at, offset + edit.end, () => ui(doc, "ins", CLASS_INS));
         }
         else {
-            const del = ui(doc, "del", "ascribe-del", edit.text);
+            const del = ui(doc, "del", CLASS_DEL, edit.text);
             insertAt(map, offset + edit.at, del, element);
         }
     }
@@ -407,33 +393,33 @@ export function markChanges(root, changes, options = {}) {
     const was = options.was ?? null;
     const placer = new Placer(root);
     const marks = [];
-    root.classList.add("ascribe-marks");
-    if (!root.hasAttribute("data-ascribe-show"))
-        root.setAttribute("data-ascribe-show", "changes");
+    root.classList.add(CLASS_MARKS);
+    if (!root.hasAttribute(DATA_SHOW))
+        root.setAttribute(DATA_SHOW, "changes");
     let moveCount = 0;
     for (const change of changes) {
         switch (change.kind) {
             case "added":
             case "changed": {
                 const element = change.now ? findBlock(root, change.now) : null;
-                if (!element || element.hasAttribute("data-ascribe-change"))
+                if (!element || element.hasAttribute(DATA_CHANGE))
                     break;
-                element.setAttribute("data-ascribe-change", change.kind);
+                element.setAttribute(DATA_CHANGE, change.kind);
                 addLabel(element, change.kind);
                 if (change.kind === "changed") {
                     // Where it was, for threads on its old text.
                     if (change.was)
-                        element.setAttribute("data-ascribe-was-source", change.was.source);
+                        element.setAttribute(DATA_WAS_SOURCE, change.was.source);
                     const before = was && change.was ? findBlock(was, change.was) : null;
                     if (change.words)
                         markWords(element, change.words);
                     if (before) {
                         // As it was, the block as the old page rendered it.
                         const copy = copyOf(before);
-                        copy.setAttribute("data-ascribe-ui", "");
-                        copy.setAttribute("data-ascribe-was-only", "");
+                        copy.setAttribute(DATA_UI, "");
+                        copy.setAttribute(DATA_WAS_ONLY, "");
                         element.after(copy);
-                        element.setAttribute("data-ascribe-has-was", "");
+                        element.setAttribute(DATA_HAS_WAS, "");
                     }
                 }
                 marks.push({ change, element });
@@ -442,23 +428,23 @@ export function markChanges(root, changes, options = {}) {
             case "removed": {
                 const before = was && change.was ? findBlock(was, change.was) : null;
                 const element = placer.place(change, (container) => {
-                    const holder = ui(doc, holderFor(container), "ascribe-removed");
-                    holder.setAttribute("data-ascribe-change", "removed");
+                    const holder = ui(doc, holderFor(container), CLASS_REMOVED);
+                    holder.setAttribute(DATA_CHANGE, "removed");
                     if (change.was)
-                        holder.setAttribute("data-ascribe-was-source", change.was.source);
-                    const label = ui(doc, "span", "ascribe-label", LABELS.removed);
-                    label.setAttribute("data-ascribe-label", "removed");
-                    const body = ui(doc, "div", "ascribe-removed-body");
+                        holder.setAttribute(DATA_WAS_SOURCE, change.was.source);
+                    const label = ui(doc, "span", CLASS_LABEL, LABELS.removed);
+                    label.setAttribute(DATA_LABEL, "removed");
+                    const body = ui(doc, "div", CLASS_REMOVED_BODY);
                     if (before)
                         body.append(...contentOf(holder, before));
                     else
                         body.textContent = change.text ?? "";
-                    const toggle = ui(doc, "button", "ascribe-toggle", "Show");
+                    const toggle = ui(doc, "button", CLASS_TOGGLE, "Show");
                     toggle.type = "button";
                     toggle.setAttribute("aria-expanded", "false");
                     toggle.addEventListener("click", (event) => {
                         event.stopPropagation();
-                        const open = holder.classList.toggle("ascribe-open");
+                        const open = holder.classList.toggle(CLASS_OPEN);
                         toggle.textContent = open ? "Collapse" : "Show";
                         toggle.setAttribute("aria-expanded", String(open));
                     });
@@ -470,25 +456,25 @@ export function markChanges(root, changes, options = {}) {
             }
             case "moved": {
                 const element = change.now ? findBlock(root, change.now) : null;
-                if (!element || element.hasAttribute("data-ascribe-change"))
+                if (!element || element.hasAttribute(DATA_CHANGE))
                     break;
                 const id = `ascribe-move-${++moveCount}`;
                 const before = was && change.was ? findBlock(was, change.was) : null;
                 const stub = placer.place(change, (container) => {
-                    const holder = ui(doc, holderFor(container), "ascribe-moved-from");
+                    const holder = ui(doc, holderFor(container), CLASS_MOVED_FROM);
                     holder.id = `${id}-from`;
-                    holder.setAttribute("data-ascribe-change", "moved-from");
+                    holder.setAttribute(DATA_CHANGE, "moved-from");
                     if (change.was)
-                        holder.setAttribute("data-ascribe-was-source", change.was.source);
-                    const note = ui(doc, "span", "ascribe-move-note");
+                        holder.setAttribute(DATA_WAS_SOURCE, change.was.source);
+                    const note = ui(doc, "span", CLASS_MOVE_NOTE);
                     note.append(doc.createTextNode(`A ${blockWord(element)} moved from here `));
-                    const link = ui(doc, "a", "ascribe-move-link");
+                    const link = ui(doc, "a", CLASS_MOVE_LINK);
                     link.href = `#${id}`;
                     note.append(link);
                     holder.append(note);
                     // As it was, the block itself.
-                    const copy = ui(doc, "div", "ascribe-was-copy");
-                    copy.setAttribute("data-ascribe-was-only", "");
+                    const copy = ui(doc, "div", CLASS_WAS_COPY);
+                    copy.setAttribute(DATA_WAS_ONLY, "");
                     if (before)
                         copy.append(...contentOf(holder, before));
                     else
@@ -496,26 +482,26 @@ export function markChanges(root, changes, options = {}) {
                     holder.append(copy);
                     return holder;
                 });
-                element.setAttribute("data-ascribe-change", "moved");
-                element.setAttribute("data-ascribe-move", id);
+                element.setAttribute(DATA_CHANGE, "moved");
+                element.setAttribute(DATA_MOVE, id);
                 if (!element.id)
                     element.id = id;
                 addLabel(element, "moved");
-                const back = ui(doc, "a", "ascribe-move-link");
+                const back = ui(doc, "a", CLASS_MOVE_LINK);
                 back.href = `#${stub.id}`;
                 back.textContent = `from “${headingBefore(root, stub) ?? "the top of the page"}” ↑`;
-                const forward = stub.querySelector(".ascribe-move-link");
+                const forward = stub.querySelector(`.${CLASS_MOVE_LINK}`);
                 if (forward) {
                     forward.href = `#${element.id}`;
                     forward.textContent = `to “${headingBefore(root, element) ?? "the top of the page"}” ↓`;
                 }
                 if (LABEL_INSIDE.has(element.localName)) {
-                    const note = ui(doc, "span", "ascribe-move-note");
+                    const note = ui(doc, "span", CLASS_MOVE_NOTE);
                     note.append(" ", back);
                     element.append(note);
                 }
                 else {
-                    const holder = ui(doc, "div", "ascribe-move-note ascribe-move-after");
+                    const holder = ui(doc, "div", `${CLASS_MOVE_NOTE} ${CLASS_MOVE_AFTER}`);
                     holder.append(back);
                     element.after(holder);
                 }
@@ -552,7 +538,7 @@ function hintHidden(root, marks) {
     const summaries = new Map();
     for (const { change, element } of marks) {
         for (let el = element; el && el !== root; el = el.parentElement) {
-            if (el.localName === "ascribe-tab") {
+            if (el.localName === ELEMENT_TAB) {
                 const tab = tabs.get(el) ?? { added: false, count: 0 };
                 if (el === element && change.kind === "added")
                     tab.added = true;
@@ -570,8 +556,8 @@ function hintHidden(root, marks) {
     const hint = (kind, text) => {
         // A space before it, not only a margin, so the label reads "Linux 1
         // change" to a screen reader, not "Linux1 change".
-        const el = ui(doc, "span", "ascribe-hint", ` ${text}`);
-        el.setAttribute("data-ascribe-hint", kind);
+        const el = ui(doc, "span", CLASS_HINT, ` ${text}`);
+        el.setAttribute(DATA_HINT, kind);
         return el;
     };
     const watching = [];
@@ -615,9 +601,9 @@ function summaryOf(element) {
  */
 export function tabButton(tab) {
     const group = tab.parentElement;
-    if (tab.localName !== "ascribe-tab" || !group)
+    if (tab.localName !== ELEMENT_TAB || !group)
         return null;
-    const tabs = Array.from(group.children).filter((c) => c.localName === "ascribe-tab");
+    const tabs = Array.from(group.children).filter((c) => c.localName === ELEMENT_TAB);
     const buttons = group.querySelectorAll(':scope > [role="tablist"] > [role="tab"]');
     return buttons[tabs.indexOf(tab)] ?? null;
 }
@@ -643,27 +629,27 @@ export function clearMarks(root) {
     for (const observer of tabWatchers.get(root) ?? [])
         observer.disconnect();
     tabWatchers.delete(root);
-    for (const el of Array.from(root.querySelectorAll("[data-ascribe-ui]"))) {
+    for (const el of Array.from(root.querySelectorAll(`[${DATA_UI}]`))) {
         if (el.localName === "ins")
             el.replaceWith(...Array.from(el.childNodes));
         else
             el.remove();
     }
-    for (const el of Array.from(root.querySelectorAll("[data-ascribe-change]"))) {
-        el.removeAttribute("data-ascribe-change");
-        el.removeAttribute("data-ascribe-has-was");
-        el.removeAttribute("data-ascribe-was-source");
-        if (el.hasAttribute("data-ascribe-move")) {
-            if (el.id === el.getAttribute("data-ascribe-move"))
+    for (const el of Array.from(root.querySelectorAll(`[${DATA_CHANGE}]`))) {
+        el.removeAttribute(DATA_CHANGE);
+        el.removeAttribute(DATA_HAS_WAS);
+        el.removeAttribute(DATA_WAS_SOURCE);
+        if (el.hasAttribute(DATA_MOVE)) {
+            if (el.id === el.getAttribute(DATA_MOVE))
                 el.removeAttribute("id");
-            el.removeAttribute("data-ascribe-move");
+            el.removeAttribute(DATA_MOVE);
         }
     }
     root.normalize();
 }
 /** Shows the changes, the page as it will be, or the page as it was. */
 export function setShow(root, show) {
-    root.setAttribute("data-ascribe-show", show);
+    root.setAttribute(DATA_SHOW, show);
 }
 /**
  * Makes `element` visible: opens the `<details>` and selects the tabs it's
@@ -673,7 +659,7 @@ export function reveal(element) {
     for (let el = element; el; el = el.parentElement) {
         if (el instanceof HTMLDetailsElement && !el.open)
             el.open = true;
-        if (el.localName === "ascribe-tab" && el.hidden)
+        if (el.localName === ELEMENT_TAB && el.hidden)
             tabButton(el)?.click();
     }
 }
@@ -684,10 +670,10 @@ export function goTo(element) {
     if (typeof element.scrollIntoView === "function") {
         element.scrollIntoView({ block: "center", behavior: "smooth" });
     }
-    element.classList.remove("ascribe-flash");
+    element.classList.remove(CLASS_FLASH);
     // Restart the animation.
     void element.offsetWidth;
-    element.classList.add("ascribe-flash");
+    element.classList.add(CLASS_FLASH);
     if (!element.hasAttribute("tabindex"))
         element.setAttribute("tabindex", "-1");
     element.focus({ preventScroll: true });
@@ -698,13 +684,11 @@ export function goTo(element) {
  */
 export function showSources(root) {
     const doc = root.ownerDocument;
-    const tip = ui(doc, "span", "ascribe-where");
+    const tip = ui(doc, "span", CLASS_WHERE);
     tip.setAttribute("role", "status");
     let current = null;
     const show = (target) => {
-        const el = target instanceof Element
-            ? target.closest("[data-ascribe-source], [data-ascribe-was-source]")
-            : null;
+        const el = target instanceof Element ? target.closest(`[${DATA_SOURCE}], [${DATA_WAS_SOURCE}]`) : null;
         if (el === current)
             return;
         current = el;
@@ -713,10 +697,10 @@ export function showSources(root) {
             current = null;
             return;
         }
-        const source = el.getAttribute("data-ascribe-source");
+        const source = el.getAttribute(DATA_SOURCE);
         tip.textContent = source
-            ? describeSource(source, el.getAttribute("data-ascribe-via"))
-            : `was ${describeSource(el.getAttribute("data-ascribe-was-source") ?? "")}`;
+            ? describeSource(source, el.getAttribute(DATA_VIA))
+            : `was ${describeSource(el.getAttribute(DATA_WAS_SOURCE) ?? "")}`;
         const box = el.getBoundingClientRect();
         const host = root.getBoundingClientRect();
         tip.style.top = `${box.top - host.top}px`;