document.addEventListener("DOMContentLoaded", function() {
  // ---------------- TOC Scrollspy --------------------
  if (document.getElementById('toc') !== null) {

    const table_of_content_links = document.querySelectorAll('#toc li a')

    let page_titles_ids = [];
    [...table_of_content_links].forEach((item)=> {
      page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
    })
    const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));

    let reversed_title_elements = [...page_titles_elements].reverse();
    let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
    findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
    var previous_elem = elem

    window.addEventListener('scroll', () => {
      let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];

      if (element !== previous_elem) {
        findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
        findCorrespondingTocTitle(element).classList.add('bg-blue-700')
        previous_elem = element
      }
    })
  }
});
function getActiveTocElement(elements) {
  return [...elements].find((item) => {
    return (item.getBoundingClientRect().y <= 0)
  })
}
function findCorrespondingTocTitle(element) {
  return [...document.querySelectorAll('#toc li a')].find((item) => {
    return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
  })
}