IL QUOTIDIANO # LA REPUBBLICA #

<?php

wp_enqueue_script('wcd_toc_js');
//CSS is only needed if you don't want to style the TOC yourself!
wp_enqueue_style('wcd_toc_css');

add_action('wp_footer', function() {
  ?>

<script>
  const myTOC = new WCD_toc({
    target : '#myTOC',
    taglist : [ 'h2', 'h3', 'h4' ],
    highlight : [ 'h2', 'h3' ],
  });
  
  
</script>

<?php  
  
}, 99);
?>

<script>
function WCD_toc(options) {
  const tableID = document.querySelector(options.target);
  const tagList = [];
  options.taglist.forEach((tag, i) => {
    tagList[i] = tag + ":not(.wcd_tableOfContents_skip)";
  });

  const headings = document.querySelectorAll(tagList);

  for (var i = 0; i < headings.length; i++) {
    attribute = headings[i].getAttribute("id");

    // IN CASE THERE ISN'T AN ID ON THE ELEMENT - GENERATE ONE:
    if (attribute === "" || null === attribute || attribute === undefined) {
      tmpID = headings[i].innerText;
      tmpID = tmpID.replace(/\s/g, "").toLowerCase();
      tmpID = tmpID.replace(/[^\w\s]/gi, "");

      headings[i].setAttribute("id", "wcd_" + tmpID);
      attribute = headings[i].getAttribute("id");
    }

    currentTag = headings[i].tagName;
    classes = "wcd_tableOfContents_" + currentTag;

    if (options.highlight) {
      // FOR MORE SCROLL-TRIGGERS USE: if (currentTag == 'H2' || currentTag == 'H3') ...
      options.highlight.forEach((highlightTag) => {
        highlightTag = highlightTag.toUpperCase();

        if (currentTag == highlightTag) {
          classes += " wcd_tableOfContents_scrollTrigger";
        }
      });
    }

    // CREATE ELEMENT & APPEND IT TO TOC
    var listElement = document.createElement("a");
    listElement.classList = classes;
    listElement.href = "#" + attribute;
    listElement.append(headings[i].innerText);
    tableID.append(listElement);
  }

  if (options.highlight) {
    // SCROLLTRIGGER
    document.addEventListener("scroll", function () {
      offset = 250;
      scrollPos = document.body.scrollTop || document.documentElement.scrollTop;
      scrollTrigger = document.querySelectorAll(
        ".wcd_tableOfContents_scrollTrigger"
      );

      for (i = 0; i < scrollTrigger.length; i++) {
        targetElement = scrollTrigger[i].getAttribute("href");
        targetElement = targetElement.replace("#", "");
        targetElement = document.getElementById(targetElement);

        elementPosition =
          targetElement.getBoundingClientRect().top + scrollPos - offset;
        if (scrollPos > elementPosition) {
          Array.from(
            document.querySelectorAll(".wcd_tableOfContents_active")
          ).forEach((el) => el.classList.remove("wcd_tableOfContents_active"));
          scrollTrigger[i].classList.add("wcd_tableOfContents_active");
        }
      }
    });
  }
}
</script>