Table of Contents Example

templates/Demo/_00_01_toc.css

@@ -0,0 +1,76 @@
+#list-toc-generated li a::after {
+    content: target-counter(attr(href), page);
+    font-style: italic;
+    float: right;
+}
+
+/* set the style for the list numbering to none */
+#list-toc-generated {
+    list-style: none;
+    padding-inline-start: 0;
+}
+
+#list-toc-generated .toc-element-level-1 {
+    font-weight: bold;
+
+    & a {
+        text-decoration: none;
+    }
+}
+
+#list-toc-generated .toc-element-level-2{
+    margin-left: 25px;
+}
+
+
+
+/* counters */
+/* 
+#list-toc-generated {
+    counter-reset: counterTocLevel1;
+}
+
+#list-toc-generated .toc-element-level-1 {
+    counter-increment: counterTocLevel1;
+    counter-reset: counterTocLevel2;
+}
+
+#list-toc-generated .toc-element-level-1::before {
+    content: counter(counterTocLevel1) ". ";
+    padding-right: 5px;
+} */
+
+
+/* hack for leaders */
+
+#list-toc-generated {
+    overflow-x: hidden;
+}
+
+/* fake leading */
+/* #list-toc-generated .toc-element::after {
+    content:
+        ".............................................."
+        ".............................................."
+        ".............................................."
+        "........";
+    float: left;
+    width: 0;
+    padding-left: 5px;
+    letter-spacing: 2px;
+} */
+
+#list-toc-generated .toc-element {
+    display: flex;
+}
+
+#list-toc-generated .toc-element a::after {
+    position: absolute;
+    right: 0;
+    background-color: white;
+    padding-left: 6px;
+}
+
+#list-toc-generated .toc-element a {
+    right: 0;
+}

templates/Demo/_00_01_toc.js

@@ -0,0 +1,84 @@
+function createToc(config) {
+    const content = config.content;
+    const tocElement = config.tocElement;
+    const titleElements = config.titleElements;
+    const startElement = config.startElement;
+
+    let tocElementDiv = content.querySelector(tocElement);
+    let tocUl = document.createElement("ul");
+    tocUl.id = "list-toc-generated";
+    tocElementDiv.appendChild(tocUl);
+
+    // add class to all title elements
+    let tocElementNbr = 0;
+    for (var i = 0; i < titleElements.length; i++) {
+
+        let titleHierarchy = i + 1;
+        let titleElement = content.querySelectorAll(titleElements[i]);
+
+
+        titleElement.forEach(function (element) {
+
+            // add classes to the element
+            element.classList.add("title-element");
+            element.setAttribute("data-title-level", titleHierarchy);
+
+            // add id if doesn't exist
+            tocElementNbr++;
+            idElement = element.id;
+            if (idElement == '') {
+                element.id = 'title-element-' + tocElementNbr;
+            }
+            let newIdElement = element.id;
+
+        });
+
+    }
+
+    // create toc list
+    let tocElements = content.querySelectorAll(".title-element");
+
+    for (var i = startElement; i < tocElements.length; i++) {
+        let tocElement = tocElements[i];
+
+        let tocNewLi = document.createElement("li");
+
+        // Add class for the hierarcy of toc
+        tocNewLi.classList.add("toc-element");
+        tocNewLi.classList.add("toc-element-level-" + tocElement.dataset.titleLevel);
+
+        // Keep class of title elements
+        let classTocElement = tocElement.classList;
+        for (var n = 0; n < classTocElement.length; n++) {
+            if (classTocElement[n] != "title-element") {
+                tocNewLi.classList.add(classTocElement[n]);
+            }
+        }
+
+        // Create the element
+        tocNewLi.innerHTML = '<a href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+        tocUl.appendChild(tocNewLi);
+    }
+}
+
+class handlers extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+        super(chunker, polisher, caller);
+    }
+
+    beforeParsed(content) {
+        createToc({
+            content: content,
+            // Currently, the application will expect a page called "Table of Contents" to generate it.
+            // If your TOC page has another name (or does not have name), fix the `tocElement` selector below
+            tocElement: 'section.table-of-contents',
+            // Defines which elements will generate the Titles. You can pass more than one.
+            titleElements: ['h1'],
+            // If you have headers that should not be considered on the TOC, increase the startElement here
+            startElement: 0,
+        });
+    }
+
+}
+// Uncomment the line below to create a table of content
+// Paged.registerHandlers(handlers);