Merge pull request #1271 from vivliostyle/fix/issue1270

fix: All `<nav epub:type="…">` elements in EPUB navigation doc should be shown in TOC box
vivliostyle · Feb 11, 2024 · a461262 · a461262
2 parents 9e3e116 + d31010f
commit a461262
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/packages/core/src/vivliostyle/assets.ts b/packages/core/src/vivliostyle/assets.ts
@@ -1371,33 +1371,33 @@ ncx|content {
   display: none;
 }
 
-*:not([role=doc-toc],
-  [role=doc-toc] *,
-  :has([role=doc-toc]),
-  :is(h1,h2,h3,h4,h5,h6):has(+:not(nav)[role=doc-toc])) {
+*:not([data-vivliostyle-role=doc-toc],
+  [data-vivliostyle-role=doc-toc] *,
+  :has([data-vivliostyle-role=doc-toc]),
+  :is(h1,h2,h3,h4,h5,h6):has(+:not(nav)[data-vivliostyle-role=doc-toc])) {
   display: none;
 }
 
 [hidden] {
   display: revert;
 }
 
-[role=doc-toc] li a,
+[data-vivliostyle-role=doc-toc] li a,
 ncx|navLabel {
   -adapt-behavior: toc-node-anchor;
 }
 
-[role=doc-toc] li,
+[data-vivliostyle-role=doc-toc] li,
 ncx|navPoint {
   -adapt-behavior: toc-node;
 }
 
-[role=doc-toc] li > :not(ul,ol):first-child {
+[data-vivliostyle-role=doc-toc] li > :not(ul,ol):first-child {
   -adapt-behavior: toc-node-first-child;
 }
 
-[role=doc-toc] :is(ol,ul),
-[role=doc-toc]:is(ol,ul) {
+[data-vivliostyle-role=doc-toc] :is(ol,ul),
+[data-vivliostyle-role=doc-toc]:is(ol,ul) {
   -adapt-behavior: toc-container;
 }
 `;

diff --git a/packages/core/src/vivliostyle/toc.ts b/packages/core/src/vivliostyle/toc.ts
@@ -45,16 +45,19 @@ export type TOCItem = {
 };
 
 export function findTocElements(doc: Document): Array<Element> {
-  // Find `role="doc-toc"` for webpub or `<nav epub:type="toc">` etc. for EPUB.
-  const tocElems = Array.from(
-    doc.querySelectorAll(
-      "[role=doc-toc],nav[*|type=toc],nav[*|type=landmarks],nav[*|type=page-list]",
-    ),
+  // Find `<nav epub:type="toc">` etc. for EPUB.
+  let tocElems = Array.from(
+    doc.querySelectorAll("nav[*|type],nav[epub\\:type]"),
   );
   if (tocElems.length > 0) {
     return tocElems;
   }
-  // If not found, find TOC elements with the following selector.
+  // Find `role="doc-toc"` for webpub.
+  tocElems = Array.from(doc.querySelectorAll("[role=doc-toc]"));
+  if (tocElems.length > 0) {
+    return tocElems;
+  }
+  // If neither found, find TOC elements with the following selector.
   const navs = "nav,.toc,#toc,#table-of-contents,#contents,[role=directory]";
   for (const elem of doc.querySelectorAll(navs)) {
     if (tocElems.find((e) => e.contains(elem))) {
@@ -267,8 +270,8 @@ export class TOCView implements Vgen.CustomRendererFactory {
 
     this.store.load(tocBoxUrl).then((xmldoc) => {
       for (const tocElem of findTocElements(xmldoc.document)) {
-        // Set `role="doc-toc"`
-        tocElem.setAttribute("role", "doc-toc");
+        // Set `data-vivliostyle-role="doc-toc"`
+        tocElem.setAttribute("data-vivliostyle-role", "doc-toc");
       }
 
       const style = this.store.getStyleForDoc(xmldoc);