api.js

'use strict';

function setupTheme() {
  const kCustomPreference = 'customDarkTheme';
  const userSettings = sessionStorage.getItem(kCustomPreference);
  const themeToggleButton = document.getElementById('theme-toggle-btn');

  if (userSettings === null && window.matchMedia) {
    const mq = window.matchMedia('(prefers-color-scheme: dark)');

    if ('onchange' in mq) {
      function mqChangeListener(e) {
        document.documentElement.classList.toggle('dark-mode', e.matches);
      }
      mq.addEventListener('change', mqChangeListener);
      if (themeToggleButton) {
        themeToggleButton.addEventListener('click', function() {
          mq.removeEventListener('change', mqChangeListener);
        }, { once: true });
      }
    }

    if (mq.matches) {
      document.documentElement.classList.add('dark-mode');
    }
  } else if (userSettings === 'true') {
    document.documentElement.classList.add('dark-mode');
  }

  if (themeToggleButton) {
    themeToggleButton.hidden = false;
    themeToggleButton.addEventListener('click', function() {
      sessionStorage.setItem(
        kCustomPreference,
        document.documentElement.classList.toggle('dark-mode')
      );
    });
  }
}

function setupPickers() {
  function closeAllPickers() {
    for (const picker of pickers) {
      picker.parentNode.classList.remove('expanded');
    }

    window.removeEventListener('click', closeAllPickers);
    window.removeEventListener('keydown', onKeyDown);
  }

  function onKeyDown(e) {
    if (e.key === 'Escape') {
      closeAllPickers();
    }
  }

  const pickers = document.querySelectorAll('.picker-header > a');

  for (const picker of pickers) {
    const parentNode = picker.parentNode;

    picker.addEventListener('click', (e) => {
      e.preventDefault();

      /*
        closeAllPickers as window event trigger already closed all the pickers,
        if it already closed there is nothing else to do here
      */
      if (parentNode.classList.contains('expanded')) {
        return;
      }

      /*
        In the next frame reopen the picker if needed and also setup events
        to close pickers if needed.
      */

      requestAnimationFrame(() => {
        parentNode.classList.add('expanded');
        window.addEventListener('click', closeAllPickers);
        window.addEventListener('keydown', onKeyDown);
      });
    });
  }
}

function setupStickyHeaders() {
  const header = document.querySelector('.header');
  let ignoreNextIntersection = false;

  new IntersectionObserver(
    ([e]) => {
      const currentStatus = header.classList.contains('is-pinned');
      const newStatus = e.intersectionRatio < 1;

      // Same status, do nothing
      if (currentStatus === newStatus) {
        return;
      } else if (ignoreNextIntersection) {
        ignoreNextIntersection = false;
        return;
      }

      /*
        To avoid flickering, ignore the next changes event that is triggered
        as the visible elements in the header change once we pin it.

        The timer is reset anyway after few milliseconds.
      */
      ignoreNextIntersection = true;
      setTimeout(() => {
        ignoreNextIntersection = false;
      }, 50);

      header.classList.toggle('is-pinned', newStatus);
    },
    { threshold: [1] }
  ).observe(header);
}

function bootstrap() {
  // Check if we have JavaScript support
  document.querySelector(':root').classList.add('has-js');

  // Restore user mode preferences
  setupTheme();

  // Handle pickers with click/taps rather than hovers
  setupPickers();

  // Track when the header is in sticky position
  setupStickyHeaders();
}

if (document.readyState === 'complete') {
  bootstrap();
} else {
  document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
}