refactor: modernize and streamline js

alexanderdavide

13.13.2022 5816cb7a4519bcdf48f548f9fd16ac2282498fb5

refactor: modernize and streamline js

 assets/js/anatole-header.js

@@ -1,18 +1,13 @@
document.addEventListener('DOMContentLoaded', function () {
  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  var nav = document.querySelector('nav');
  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {
    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        var $target = document.getElementById(target);
        $el.classList.toggle('nav--active');
        $target.classList.toggle('nav--active');
        nav.classList.toggle('nav--active');
      });
document.addEventListener('DOMContentLoaded', () => {
  const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  const nav = document.querySelector('nav');
  if (navbarBurgers.length < 1) return;
  navbarBurgers.forEach((navbarBurger) => {
    navbarBurger.addEventListener('click', () => {
      const target = document.getElementById(navbarBurger.dataset.target);
      target.classList.toggle('nav--active');
      navbarBurger.classList.toggle('nav--active');
      nav.classList.toggle('nav--active');
    });
  }
  });
});

 assets/js/anatole-theme-switcher.js

@@ -1,74 +1,61 @@
// initialize default value
function getTheme() {
  return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
}
const getStoredThemeStyle = () => localStorage.getItem('theme');

function setTheme(style) {
const setThemeClass = (style) => {
  const body = document.body;
  const prevTheme = [...body.classList].find((c) => c.match(/theme--(light|dark)/));
  if (!prevTheme) return;
  body.classList.remove(prevTheme);
  body.classList.add(`theme--${style}`);
};

const setThemeStyle = (style) => {
  document.documentElement.setAttribute('data-theme', style);
  localStorage.setItem('theme', style);
  setCssClass(style);
}
  setThemeClass(style);
};

function init() {
  // initialize default value
  const theme = getTheme();
const switchTheme = () => {
  const currThemeStyle = getStoredThemeStyle();
  switch (currThemeStyle) {
    case 'light':
      setThemeStyle('dark');
      break;
    case 'dark':
      setThemeStyle('light');
      break;
    default:
      setThemeStyle('light');
      break;
  }
};

  // check if a preferred color theme is set for users that have never been to our site
const initTheme = () => {
  const currThemeStyle = getStoredThemeStyle();
  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (theme === null) {
    if (userPrefersDark) {
      setTheme('dark');
    } else if (!document.documentElement.getAttribute('data-theme')) {
      setTheme('light');
    } else {
      setTheme(document.documentElement.getAttribute('data-theme'));
    }

  if (currThemeStyle) {
    document.documentElement.setAttribute('data-theme', currThemeStyle);
    setThemeClass(currThemeStyle);
    return;
  }
  if (userPrefersDark) {
    setThemeStyle('dark');
  } else if (!document.documentElement.getAttribute('data-theme')) {
    setThemeStyle('light');
  } else {
    // load a stored theme
    if (theme === 'light') {
      document.documentElement.setAttribute('data-theme', 'light');
      setCssClass('light');
    } else {
      document.documentElement.setAttribute('data-theme', 'dark');
      setCssClass('dark');
    }
    setThemeStyle(document.documentElement.getAttribute('data-theme'));
  }
}
};

function setCssClass(style) {
  var body = document.body;
  if (style === 'light') {
    body.classList.remove('theme--dark');
    body.classList.add('theme--light');
  } else if (style === 'dark') {
    body.classList.remove('theme--light');
    body.classList.add('theme--dark');
  }
}

// switch themes
function switchTheme() {
  const theme = getTheme();
  if (theme === 'light') {
    setTheme('dark');
  } else {
    setTheme('light');
  }
}

// Manual Switch
document.addEventListener(
  'DOMContentLoaded',
  function () {
  () => {
    const themeSwitcher = document.querySelector('.themeswitch');
    themeSwitcher.addEventListener('click', switchTheme, false);
  },
  false,
);

// Automatic Switching
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);

document.addEventListener('DOMContentLoaded', function () {
  init();
});
document.addEventListener('DOMContentLoaded', () => initTheme());