@ascribed/review 0.2.0 → 0.2.1-next.11

package/dist/overlay/overlay.js

@@ -16,11 +16,12 @@
 //   root, so they sit in the page's reading and tab order.
 //
 // Comment bodies are rendered by `markdown.ts`, as DOM nodes.
-import { findBlock, goTo, reveal, tabButton } from "../marks/index.js";
+import { findBlock, goTo, reveal, tabButton, titleNodes } from "../marks/index.js";
 import { anchorKey, formatSource } from "../place/anchor.js";
 import { renderMarkdown } from "./markdown.js";
 import { OVERLAY_CSS } from "./style.js";
 import { authorName, blockText, hasUnsent, initials, linesLabel, listLabel, onRemovedText, plural, relativeTime, whereLabel, } from "./text.js";
+import { DATA_CHANGE, DATA_OVERLAY, DATA_SHOW, DATA_SOURCE, DATA_UI, DATA_VIA, DATA_WAS_SOURCE, ELEMENT_TAB, } from "../names.js";
 const COLUMN_WIDTH = 250;
 const COLUMN_GAP = 12;
 const MARKER_ROOM = "44px";
@@ -255,8 +256,8 @@ class ReviewOverlay {
     }
     uiHost(tag) {
         const host = this.doc.createElement(tag);
-        host.setAttribute("data-ascribe-ui", "");
-        host.setAttribute("data-ascribe-overlay", "");
+        host.setAttribute(DATA_UI, "");
+        host.setAttribute(DATA_OVERLAY, "");
         return host;
     }
     shadow(host) {
@@ -325,29 +326,29 @@ class ReviewOverlay {
         return this.container().clientWidth >= this.columnAt;
     }
     anchorOf(element) {
-        const source = element.getAttribute("data-ascribe-source");
+        const source = element.getAttribute(DATA_SOURCE);
         if (source === null)
             return undefined;
-        const via = (element.getAttribute("data-ascribe-via") ?? "").split(" ").filter(Boolean);
+        const via = (element.getAttribute(DATA_VIA) ?? "").split(" ").filter(Boolean);
         return { source, via };
     }
     /** The block an event's target is in: the innermost anchored element. */
     blockOf(target) {
         if (!(target instanceof Element))
             return undefined;
-        if (target.closest("[data-ascribe-overlay]") && target !== this.toolsHost) {
+        if (target.closest(`[${DATA_OVERLAY}]`) && target !== this.toolsHost) {
             // A marker: the block it's on.
-            const marker = this.markers.find((m) => m.host === target.closest("[data-ascribe-overlay]"));
+            const marker = this.markers.find((m) => m.host === target.closest(`[${DATA_OVERLAY}]`));
             if (marker)
                 return marker.block;
         }
-        const block = target.closest("[data-ascribe-source]");
+        const block = target.closest(`[${DATA_SOURCE}]`);
         return block && this.root.contains(block) ? block : undefined;
     }
     /** The block's text as the page shows it, for a comment to quote. */
     shownText(anchor) {
         const key = anchorKey(anchor);
-        for (const el of Array.from(this.root.querySelectorAll("[data-ascribe-source]"))) {
+        for (const el of Array.from(this.root.querySelectorAll(`[${DATA_SOURCE}]`))) {
             const at = this.anchorOf(el);
             if (at && anchorKey(at) === key)
                 return blockText(el) || undefined;
@@ -355,8 +356,8 @@ class ReviewOverlay {
         return undefined;
     }
     removedElement(anchor) {
-        for (const el of Array.from(this.root.querySelectorAll("[data-ascribe-was-source]"))) {
-            if (el.getAttribute("data-ascribe-was-source") === anchor.source)
+        for (const el of Array.from(this.root.querySelectorAll(`[${DATA_WAS_SOURCE}]`))) {
+            if (el.getAttribute(DATA_WAS_SOURCE) === anchor.source)
                 return el;
         }
         return null;
@@ -411,8 +412,8 @@ class ReviewOverlay {
     }
     /** Whether what the page shows hides a block: removed text in "as it will be", new text in "as it was". */
     hiddenByShow(element) {
-        const show = this.root.getAttribute("data-ascribe-show");
-        const kind = element.closest("[data-ascribe-change]")?.getAttribute("data-ascribe-change");
+        const show = this.root.getAttribute(DATA_SHOW);
+        const kind = element.closest(`[${DATA_CHANGE}]`)?.getAttribute(DATA_CHANGE);
         if (show === "will")
             return kind === "removed" || kind === "moved-from";
         if (show === "was")
@@ -422,7 +423,7 @@ class ReviewOverlay {
     /** Where a block is hidden in the page: an unselected tab or a closed `<details>`. */
     hiddenIn(element) {
         for (let node = element.parentElement; node !== null && node !== this.root.parentElement; node = node.parentElement) {
-            if (node.localName === "ascribe-tab" && node.hidden) {
+            if (node.localName === ELEMENT_TAB && node.hidden) {
                 return `In the ${node.getAttribute("label") ?? ""} tab, which isn't showing.`;
             }
             if (node.localName === "details" && !node.open) {
@@ -446,7 +447,7 @@ class ReviewOverlay {
     visibleFor(element) {
         let shown = element;
         for (let node = element?.parentElement ?? null; node !== null && node !== this.root; node = node.parentElement) {
-            if (node.localName === "ascribe-tab" && node.hidden)
+            if (node.localName === ELEMENT_TAB && node.hidden)
                 shown = node.parentElement;
             if (node.localName === "details" && !node.open) {
                 const summary = node.querySelector(":scope > summary");
@@ -502,7 +503,7 @@ class ReviewOverlay {
             this.root.style.setProperty("margin-inline-end", `${COLUMN_WIDTH + COLUMN_GAP}px`);
         else
             this.root.style.removeProperty("margin-inline-end");
-        for (const el of Array.from(this.root.querySelectorAll("[data-ascribe-source]"))) {
+        for (const el of Array.from(this.root.querySelectorAll(`[${DATA_SOURCE}]`))) {
             if (el.hasAttribute("tabindex"))
                 continue;
             el.tabIndex = 0;
@@ -550,7 +551,7 @@ class ReviewOverlay {
                 continue;
             for (let node = element.parentElement; node !== null && node !== this.root; node = node.parentElement) {
                 let on = null;
-                if (node.localName === "ascribe-tab")
+                if (node.localName === ELEMENT_TAB)
                     on = tabButton(node);
                 if (node.localName === "details") {
                     const summary = node.querySelector(":scope > summary");
@@ -950,16 +951,25 @@ class ReviewOverlay {
         for (const summary of groups[this.filter]) {
             const { thread, pages } = summary;
             const first = thread.comments[0];
-            const page = pages.length > 1 ? `on ${pages.length} pages` : (pages[0]?.title ?? pages[0]?.path ?? "");
+            const only = pages.length === 1 ? pages[0] : undefined;
+            const page = only
+                ? titleNodes(only.formatted_title, only.title ?? only.path, this.doc)
+                : pages.length > 1
+                    ? [`on ${pages.length} pages`]
+                    : [];
             // As on its card: a thread with no block is detached, not outdated.
             const outdated = thread.outdated && thread.detached === undefined;
-            const where = [listLabel(thread), outdated ? "outdated" : "", page]
-                .filter(Boolean)
-                .join(" · ");
+            const where = this.el("span", "where");
+            where.append([listLabel(thread), outdated ? "outdated" : ""].filter(Boolean).join(" · "));
+            if (page.length > 0) {
+                if (where.textContent)
+                    where.append(" · ");
+                where.append(...page);
+            }
             const more = thread.comments.length > 1 ? ` (+${thread.comments.length - 1})` : "";
             const item = this.el("li", "");
             const jump = this.button("", "", () => this.jump(summary), `jump:${thread.id}`);
-            jump.append(this.el("span", "where", where), this.el("span", "first", first ? `${authorName(first.author, data.viewer)}: ${oneLine(first.body)}${more}` : ""));
+            jump.append(where, this.el("span", "first", first ? `${authorName(first.author, data.viewer)}: ${oneLine(first.body)}${more}` : ""));
             item.append(jump);
             list.append(item);
         }