Improve toc-depth in html output

The `toc-depth` option will now control how deep html table of contents will display (previously, we always displayed to TOC to a depth of 3). This will control what depth of items are show when the `toc-location` is body. It will control what depth of items will be opened / tracked when scrolling when `toc-location` is left or right.

Author: dragonstyle

src/config/constants.ts

@@ -384,6 +384,7 @@ export const kSyntaxDefinition = "syntax-definition";
 export const kReferenceDoc = "reference-doc";
 export const kHtmlMathMethod = "html-math-method";
 export const kToc = "toc";
+export const kTocDepth = "toc-depth";
 export const kTableOfContents = "table-of-contents";
 export const kSectionDivs = "section-divs";
 export const kEPubCoverImage = "epub-cover-image";
@@ -499,7 +500,7 @@ export const kPandocDefaultsKeys = [
   "extract-media",
   kToc,
   kTableOfContents,
-  "toc-depth",
+  kTocDepth,
   kNumberSections,
   kNumberOffset,
   kShiftHeadingLevelBy,

src/config/types.ts

@@ -169,6 +169,7 @@ import {
   kTitleBlockPublished,
   kTitlePrefix,
   kToc,
+  kTocDepth,
   kTocTitleDocument,
   kTocTitleWebsite,
   kTopLevelDivision,
@@ -401,6 +402,7 @@ export interface FormatPandoc {
   [kCss]?: string | string[];
   [kToc]?: boolean;
   [kTableOfContents]?: boolean;
+  [kTocDepth]?: number;
   [kListings]?: boolean;
   [kNumberSections]?: boolean;
   [kNumberOffset]?: number[];

src/format/html/format-html-bootstrap.ts

@@ -18,6 +18,7 @@ import {
   kLinkCitations,
   kQuartoTemplateParams,
   kSectionDivs,
+  kTocDepth,
   kTocLocation,
 } from "../../config/constants.ts";
 import {
@@ -255,6 +256,9 @@ function bootstrapHtmlPostprocessor(
 
     const tocTarget = doc.getElementById("quarto-toc-target");
     if (toc && tocTarget) {
+      // activate selection behavior for this
+      toc.classList.add("toc-active");
+
       // add nav-link class to the TOC links
       const tocLinks = doc.querySelectorAll('nav[role="doc-toc"] > ul a');
       for (let i = 0; i < tocLinks.length; i++) {
@@ -275,11 +279,17 @@ function bootstrapHtmlPostprocessor(
       }
 
       // default collapse non-top level TOC nodes
-      const nestedUls = toc.querySelectorAll("ul ul");
-      for (let i = 0; i < nestedUls.length; i++) {
-        const ul = nestedUls[i] as Element;
-        ul.classList.add("collapse");
+      const tocDepth = format.pandoc[kTocDepth] || 3;
+      if (tocDepth > 1) {
+        const ulSelector = "ul ".repeat(tocDepth - 1).trim();
+
+        const nestedUls = toc.querySelectorAll(ulSelector);
+        for (let i = 0; i < nestedUls.length; i++) {
+          const ul = nestedUls[i] as Element;
+          ul.classList.add("collapse");
+        }
       }
+
       toc.remove();
       tocTarget.replaceWith(toc);
     } else {

src/resources/formats/html/quarto.js

@@ -6,7 +6,7 @@ const sectionChanged = new CustomEvent("quarto-sectionChanged", {
 });
 
 window.document.addEventListener("DOMContentLoaded", function (_event) {
-  const tocEl = window.document.querySelector('nav[role="doc-toc"]');
+  const tocEl = window.document.querySelector('nav.toc-active[role="doc-toc"]');
   const sidebarEl = window.document.getElementById("quarto-sidebar");
   const leftTocEl = window.document.getElementById("quarto-sidebar-toc-left");
   const marginSidebarEl = window.document.getElementById(