decor-6-site/assets/js/plugins/toc.js

// ------------------ 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])
      }
    }

    const chapter = tocElement.closest('.chapter');
    const author = chapter?.querySelector('.nav-author')?.textContent || '';
    const chapterType = chapter?.dataset.chapter || '';
    tocNewLi.dataset.author = author;
    if (chapterType) tocNewLi.classList.add('toc-' + chapterType);
    const typeSymbols = { entretien: '@', portfolio: '+', essai: '*' };
    const symbol = typeSymbols[chapterType] || '';
    tocNewLi.innerHTML =
      '<a class="toc-link" href="#' + tocElement.id + '">' +
        (chapterType ? '<span class="toc-type" data-toc-chapter="' + chapterType + '">' + (symbol ? '<span class="toc-type-symbole_before">' + symbol + '</span>' : '') + '<span class="text">' + chapterType + ' </span>' + (symbol ? '<span class="toc-type-symbole_after">' + symbol + '</span>' : '') + '</span>' : '') +
        '<span class="toc-title">' + tocElement.innerHTML + '</span>' +
        (author ? '<span class="toc-author">' + author + '</span>' : '') +
      '</a>';

    tocUl.appendChild(tocNewLi)
 }
}