nav-in-page (version 1): Version 1

const NAVINPAGE = (function(window, undefined) {
  const modes = {
    mobile: 'mobile',
    desktop: 'desktop',
  };

  const settings = {
    debug: false,
    mode: modes.mobile,
    delay: 100,
    observer: {
      threshold: [0, .5, 1],
    },
    defaultLabel: '',
  };

  const selectors = {
    wrapper: '.nav-in-page',
    anchor: '.nav-in-page__anchor',
    trigger: '.nav-in-page__trigger',
    items: '.nav-in-page__items',
    item: '.nav-in-page__item',
    link: '.nav-in-page__link:not(.nav-in-page__trigger)',
    linkLabel: '.link__label',
    header: '.header',
    hero: '.hero-product__actions',
    target: '[data-nav-in-page]',
    notSticky: '.nav-in-page--not-sticky',
  };

  const classes = {
    open: 'nav--open',
    isSticky: 'is-sticky',
    active: 'active',
    heroIsOutView: 'hero-is-out-view',
  };

  let resizeTimer = 0;
  let canBeSticky = true;

  const openIt = ($wrapper) => {
    if (!$wrapper) { return; }

    if (settings.debug) { console.log('NAV IN PAGE OPEN', $wrapper); }

    $wrapper.classList.add(classes.open);
  };

  const closeIt = ($wrapper) => {
    if (!$wrapper) { return; }

    if (settings.debug) { console.log('NAV IN PAGE CLOSE', $wrapper); }

    $wrapper.classList.remove(classes.open);
  };

  const toggle = ($wrapper) => {
    if (!$wrapper) { return; }

    if (settings.debug) { console.log('NAV IN PAGE TOGGLE', $wrapper); }

    if ($wrapper.classList.contains(classes.open)) {
      closeIt($wrapper);
    } else {
      openIt($wrapper);
    }
  };

  const updateMode = () => {
    const $wrapper = document.querySelector(selectors.wrapper);

    if (!$wrapper) { return; }

    let mode = window.getComputedStyle($wrapper, ':after').getPropertyValue('content');

    if (mode) { mode = mode.replace(/"/g, ''); }

    settings.mode = mode;
  }

  const onObserve = (entries) => {
    const [entry] = entries;
    if (!entry) { return; }

    const { target: $target } = entry;

    if (!$target) { return; }

    const targetID = `#${$target.id}`;
    const $link = document.querySelector(`${selectors.link}[href="${targetID}"]`);
    const $wrapper = $link.closest(selectors.wrapper);
    const $links = $wrapper.querySelectorAll(selectors.link);
    const $trigger = $wrapper.querySelector(selectors.trigger);
    const $triggerLabel = $trigger.querySelector(selectors.linkLabel);

    if (settings.debug) { console.log('NAV IN PAGE OBSERVE', targetID, $link, $trigger, entry.isIntersecting); }

    if (entry.isIntersecting) {
      [...$links].forEach($link => {
        if ($link.getAttribute('href') === targetID) {
          $triggerLabel.innerText = $link.innerText;
          $link.closest(selectors.item).classList.remove(classes.active);

          $link.closest(selectors.item).classList.add(classes.active);
          $trigger.classList.remove(classes.active);
        } else {
          $links[0].closest(selectors.item).classList.remove(classes.active);
        }
      });
    } else {
      $triggerLabel.innerText = settings.defaultLabel;
      $link.closest(selectors.item).classList.remove(classes.active);
    }

    const $activeLinks = $wrapper.querySelectorAll(`${selectors.item}.${classes.active}`);

    if (!$activeLinks.length) {
      $links[0].closest(selectors.item).classList.add(classes.active);
    }
  }

  const observeTarget = ($link) => {
    const href = $link.getAttribute('href');

    if (href.indexOf('#') !== 0 || href.length < 3) { return; }
    // anchor link, find target
    $target = document.querySelector(href);

    if (!$target) { return; }

    const observer = new window.IntersectionObserver(onObserve, settings.observer);
    observer.observe($target);
  }

  const observeHero = () => {
    const $wrapper = document.querySelector(selectors.wrapper);
    const $hero = document.querySelector(selectors.hero);

    if (!$hero) { return; }

    const observer = new window.IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting) {
        $wrapper.classList.add(classes.heroIsOutView);
      } else {
        $wrapper.classList.remove(classes.heroIsOutView);
      }
    }, settings.observer);

    observer.observe($hero);
  };

  const observeSelf = () => {
    const $wrapper = document.querySelector(selectors.wrapper);
    const $anchor = document.querySelector(selectors.anchor);

    const observer = new window.IntersectionObserver((entries) => {
     if (!entries[0].isIntersecting) {
        $wrapper.classList.add(classes.isSticky);
      } else {
        $wrapper.classList.remove(classes.isSticky);
      }
    }, settings.observer);

    observer.observe($anchor);
  };

  const updateTop = () => {
    const $wrapper = document.querySelector(selectors.wrapper);
    const $header = document.querySelector(selectors.header);

    if ($wrapper && canBeSticky && $header) {
      $wrapper.style.top = `${$header.offsetHeight}px`;
    }
  }

  const onResize = () => {
    clearTimeout(resizeTimer);

    resizeTimer = setTimeout(() => {
      const $wrappers = document.querySelectorAll(selectors.wrapper);

      [...$wrappers].forEach(closeIt);

      updateMode($wrappers[0]);

      canBeSticky && updateTop();
    }, 200);
  }

  const onTriggerClick = (e) => {
    e.preventDefault();

    if (settings.mode === modes.desktop) {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
      return;
    }

    if (settings.debug) { console.log('NAV IN PAGE TRIGGER CLICK', e); }

    const $trigger = e.currentTarget;
    const $wrapper = $trigger.closest(selectors.wrapper);

    toggle($wrapper);
  };

  const onLinkClick = (e) => {
    const $link = e.currentTarget;

    if (settings.debug) { console.log('NAV IN PAGE LINK CLICK', $link); }

    const $wrapper = $link.closest(selectors.wrapper);

    closeIt($wrapper);
  };

  const onDocumentClick = ({ target: $target }) => {
    if (settings.mode === modes.desktop) { return; }

    const $targetWrapper = $target.closest(selectors.wrapper);

    if (!$targetWrapper) {

      if (settings.debug) { console.log('NAV IN PAGE OUTSIDE CLICK', $targetWrapper); }

      const $wrappers = document.querySelectorAll(selectors.wrapper, settings.observer);

      [...$wrappers].forEach(closeIt);
    }
  }

  const addItem = (href, label) => {
    const $items = document.querySelector(selectors.items);

    if (!$items || !href || !label) { return; }

    const $item = document.createElement('li');
    const html = `
      <a href="#${href}" class="nav-in-page__link">
        <span class="link__label">${label}</span>
      </a>
    `;

    $item.classList.add('nav-in-page__item');
    $item.innerHTML = html;

    $items.appendChild($item);
  };

  const init = () => {
    const $wrapper = document.querySelector(selectors.wrapper);

    if (!$wrapper) { return; }

    if (settings.debug) { console.log('NAV IN PAGE INIT'); }

    canBeSticky = !document.querySelector(selectors.notSticky);
    const $trigger = document.querySelector(selectors.trigger);

    $trigger && $trigger.addEventListener('click', onTriggerClick);

    settings.defaultLabel = $trigger.innerText || '';

    const $links = document.querySelectorAll(selectors.link);

    [...$links].forEach($link => {
      $link.addEventListener('click', onLinkClick);

      if ($link.getAttribute('href').indexOf('#') !== 0) { return; }

      observeTarget($link);
    });

    observeHero();
    observeSelf();

    const $items = document.querySelectorAll(selectors.item);
    [...$items].forEach(($item, i) => $item.style.transitionDelay = `${(i + 1) * settings.delay}ms`);

    const $targets = document.querySelectorAll(selectors.target);
    const targetArray = [...$targets];

    targetArray.sort((a, b) => {
      if (a.id > b.id) {
        return 1;
      }

      if (a.id < b.id) {
        return -1;
      }

      return 0;
    });

    targetArray.forEach(($target) => {
      if (!$target.dataset.navInPage) { console.error('Label for page-in-nav is missing!'); return; }
      if (!$target.id) { console.error(`ID on ${$target} for page-in-nav is missing!`); return; }

      addItem($target.id, $target.dataset.navInPage);
    });

    document.addEventListener('click', onDocumentClick);

    updateMode($wrapper);

    canBeSticky && updateTop();
  };

  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('resize', onResize);
} (window));