@firstandthird/toc/index.js

Table Of Content Library

import { find, findOne, ready, on, fire } from 'domassist';
import scrollTriggers from 'scroll-triggers';
import { init as smoothScroll, scroll } from 'smooth-scroller';

function init(el) {
  if (!el) {
    el = find('[data-toc]');
    el.forEach(e => init(e));
    return;
  }

  if (!el) {
    return;
  }

  const container = el.dataset.tocContainer ?
    findOne(el.dataset.tocContainer) || document.body : document.body;
  const selectors = el.dataset.toc.split(',').map(s => s.trim());
  const tocItems = [];
  const offset = el.dataset.tocOffset ? parseInt(el.dataset.tocOffset, 10) : 1;
  let i = 1;

  // Building dict
  selectors.forEach(selector => {
    const items = find(selector, container);

    items.forEach(item => {
      // Keep the id if already there
      const index = item.id || `toc-${i++}`;
      const text = item.dataset.tocTitle ?
      item.dataset.tocTitle.trim() : item.textContent.trim();
      const sanitizedClassName = selector.replace(/((:+[\w-\d]*)|[^A-z0-9-\s])/g, ' ').replace(/\s{2,}/g, ' ').trim();
      const className = `toc-${sanitizedClassName}`;

      // Set it if none
      if (item.id !== index) {
        item.id = index;
      }

      tocItems.push({ index, text, className });
    });
  });

  let html = '<ul>';
  const triggerOptions = [];

  // Building markup
  tocItems.forEach((item, j) => {
    const nextEl = tocItems[j + 1];
    const options = {
      el: `.toc-li-${j}`,
      fixed: 'true',
      start: `#${item.index}`,
      position: 'top',
      positionEnd: 'top',
      className: 'toc-visible'
    };
    html += `\n<li class="toc-li-${j} ${item.className}"><a href="#${item.index}">${item.text}</a></li>`;

    if (nextEl) {
      options.end = `#${nextEl.index}`;
    }

    triggerOptions.push(options);
  });

  html += '</ul>';

  el.innerHTML = html;
  const tocs = find('li', el);
  const anchors = find('a', el);

  // Setting up scroll triggers and smooth scroll
  scrollTriggers(triggerOptions);
  smoothScroll(anchors, offset);

  // Pause scroll triggers while smoothscrolling
  on(document.body, 'smoothscroll:start', () => {
    fire(tocs, 'scrolltriggers:pause');
  });

  on(document.body, 'smoothscroll:end', () => {
    fire(tocs, 'scrolltriggers:resume');
    fire(window, 'scroll');
  });

  if (window.location.hash) {
    anchors.some(anchor => {
      const found = anchor.getAttribute('href') === window.location.hash;

      if (found) {
        setTimeout(() => {
          const element = findOne(window.location.hash);
          if (element) {
            // Silent scroll to element
            scroll(element, null, offset, true);
          }
        });
      }

      return found;
    });
  }
}

export default init;

ready(init);