Initial commit

assets/js/plugins/toc.js

@@ -0,0 +1,105 @@
+// ------------------ TABLE OF CONTENTS --------------
+class toc extends Paged.Handler {
+    constructor(chunker, polisher, caller) {
+      super(chunker, polisher, caller);
+    }
+
+    beforeParsed(content){   
+      const toc = content.querySelector('#table-of-contents');
+      let elements = ['.chapter h2'];
+
+      createToc({
+        content: content,
+        container: '#table-of-contents',
+        titleElements: elements,
+      });
+    }
+    
+  }
+Paged.registerHandlers(toc);
+
+
+function createToc(config) {
+
+  const content = config.content;
+  const tocElement = config.container;
+  const titleElements = config.titleElements;
+
+  let tocElementDiv = content.querySelector(tocElement)
+  if(!tocElementDiv) return console.warn('couldn’t start the toc')
+  tocElementDiv.innerHTML = ''
+  let tocUl = document.createElement('ul')
+  tocUl.id = 'list-toc-generated'
+
+
+  if(config.before){
+    tocUl.style.setProperty('--before-page', '"' + config.before + '"');
+  }
+
+
+  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) {
+      // check if shouldbe shown
+      if (
+        !element.classList.contains('toc-ignore') || 
+        !element.classList.contains('toc-ignore')
+      ) {
+        // add classes to the element
+        element.classList.add('title-element')
+        element.setAttribute('data-title-level', titleHierarchy)
+
+        // add an id if doesn't exist
+        tocElementNbr++
+
+        if (element.id == '') {
+          element.id = 'title-element-' + tocElementNbr
+        }
+        let newIdElement = element.id
+      }
+    })
+  }
+
+  // create toc list
+  let tocElements = content.querySelectorAll('.title-element')
+
+  for (var i = 0; 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)
+
+    let classes = [
+      ...(tocElement.className ? tocElement.className.split(' ') : []),
+      ...(tocElement.closest('section')?.className ? tocElement.closest('section')?.className.split(' ') : []),
+    ];
+    
+    classes.forEach((meta) => {
+      if (!meta || meta === 'title-element') return;
+      tocNewLi.classList.add(`toc-${meta}`);
+    });
+
+    //get the exisiting class
+    // 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])
+      }
+    }
+
+     tocNewLi.innerHTML =
+      '<a class="toc-link" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
+
+    tocUl.appendChild(tocNewLi)
+ }
+}