homegrade_theme_production/resources/js/header.js

export default function menuInit() {
  const header = document.querySelector('#main-header');

  // Search module
  const searchModule = header.querySelector('.search-module');
  const searchModuleToggle = header.querySelector('#search-module-toggle');

  // Mobile Menu
  const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');

  /* -----------------------------------------------------------
	HANDLE SUBMENUS
 -----------------------------------------------------------*/
  // SubmenusToggles
  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
  const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');

  function isSubmenuOpen() {
    // console.log(header.querySelector('.sub-menu--open') !== null);
    return header.querySelector('.sub-menu--open') !== null;
  }

  function openSubmenu(buttonToggle) {
    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
    buttonToggle.setAttribute('aria-expanded', !isExpanded);
    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
  }
  function closeSubmenus() {
    const openSubmenus = header.querySelectorAll('.sub-menu--open');
    openSubmenus.forEach((submenu) => {
      submenu.classList.remove('sub-menu--open');
      submenu.classList.add('sub-menu--closed');
      submenu.parentElement
        .querySelector('.menu-item__submenu-toggle')
        .setAttribute('aria-expanded', 'false');
    });
  }

  function handleSubmenuToggle(buttonToggle) {
    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';

    if (!isExpanded) {
      closeSubmenus();
      openSubmenu(buttonToggle);
    } else {
      closeSubmenus();
    }
  }

  function closeCurrentSubmenu(buttonClose) {
    // console.log('close submenu');
    // console.log(buttonClose.parentElement);
    const currentOpenedSubmenu = buttonClose.parentElement;

    currentOpenedSubmenu.classList.remove('sub-menu--open');
    currentOpenedSubmenu.classList.add('sub-menu--closed');
    currentOpenedSubmenu.parentElement
      .querySelector('.menu-item__submenu-toggle')
      .setAttribute('aria-expanded', 'false');
  }
  // SUBMENU TOGGGLES open/close
  submenuToggles.forEach((button) => {
    button.addEventListener('click', () => {
      if (isSearchOpen() === true) {
        closeSearch();
      }

      handleSubmenuToggle(button);
      // closeSearch();
    });
  });

  submenuCloseBtns.forEach((button) => {
    button.addEventListener('click', () => closeCurrentSubmenu(button));
  });

  /* -----------------------------------------------------------
	HANDLE SEARCH
 -----------------------------------------------------------*/
  function isSearchOpen() {
    // IF CLOSED
    if (
      searchModule.getAttribute('mobile-closed') != null &&
      searchModule.getAttribute('aria-hidden') != null &&
      searchModule.getAttribute('mobile-opened') === null
    ) {
      return false;
    }

    // IF OPENED
    if (
      searchModule.getAttribute('mobile-opened') != null &&
      searchModule.getAttribute('mobile-closed') === null &&
      searchModule.getAttribute('aria-hidden') === null
    ) {
      return true;
    }
    // IF TRANSITIONNING OR PROBLEM
    return null;
  }
  function openSearch() {
    const searchFieldInput = header.querySelector('.search-module__search-form__input');
    searchModuleToggle.setAttribute('aria-expanded', 'true');
    searchModule.setAttribute('mobile-opened', '');
    searchModule.removeAttribute('mobile-closed');
    searchFieldInput.focus();
    setTimeout(() => {
      searchModule.removeAttribute('aria-hidden');
    }, 400);
  }
  function closeSearch() {
    searchModuleToggle.setAttribute('aria-expanded', 'false');
    searchModuleToggle.focus();
    searchModule.setAttribute('aria-hidden', '');
    searchModule.removeAttribute('mobile-opened', '');

    searchModule.setAttribute('mobile-closing', '');

    searchModule.addEventListener(
      'animationend',
      () => {
        searchModule.setAttribute('mobile-closed', '');
        searchModule.removeAttribute('mobile-closing', '');
      },
      { once: true }
    );
    // setTimeout(() => {
    //   searchModule.setAttribute('mobile-closed', '');
    //   searchModule.removeAttribute('mobile-opened', '');
    // }, 50);
  }

  // SEARCH TOGGLE open/close
  searchModuleToggle.addEventListener('click', function (e) {
    closeSubmenus();

    // SEARCH IS CLOSED --> OPEN IT
    if (isSearchOpen() === false) {
      openSearch();
      return;
    }

    // SEARCH IS OPEN --> CLOSE IT
    if (isSearchOpen() === true) {
      closeSearch();
    }
  });

  /* -----------------------------------------------------------
	HANDLE MOBILE
 -----------------------------------------------------------*/
  const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
  const HomegradeNavListContainer = header.querySelector('.menu-homegrade');
  function isMobileNavOpened() {
    console.log('is mobile nav opened');
    console.log(
      renovateurNavListContainer.hasAttribute('opened') &&
        mobileMenuToggle.getAttribute('aria-expanded') === 'true'
    );
    return (
      renovateurNavListContainer.hasAttribute('opened') &&
      mobileMenuToggle.getAttribute('aria-expanded') === 'true'
    );
  }

  function openMenu(menuContainer) {
    console.log('open menu');
    // Change Toggle expanded
    mobileMenuToggle.setAttribute('aria-expanded', 'true');

    // Change Text button
    const textContent = mobileMenuToggle.querySelector('span.text-content');
    textContent.textContent = mobileMenuToggle.getAttribute('data-text-close');

    function openRenovateur() {
      renovateurNavListContainer.removeAttribute('closed', '');
      renovateurNavListContainer.setAttribute('opened', '');
      renovateurNavListContainer.removeAttribute('aria-hidden', '');
      renovateurNavListContainer.setAttribute('opening', '');

      renovateurNavListContainer.addEventListener(
        'animationend',
        () => {
          renovateurNavListContainer.removeAttribute('opening', '');
        },
        { once: true }
      );

      console.log('#######');
    }

    function openHomegrade() {
      HomegradeNavListContainer.removeAttribute('closed', '');
      HomegradeNavListContainer.setAttribute('opened', '');
      HomegradeNavListContainer.removeAttribute('aria-hidden', '');
      HomegradeNavListContainer.setAttribute('opening', '');

      HomegradeNavListContainer.addEventListener(
        'animationend',
        () => {
          HomegradeNavListContainer.removeAttribute('opening', '');
        },
        { once: true }
      );
    }

    openRenovateur();
    openHomegrade();
  }
  function closeMenu(menuContainer) {
    // Change Toggle expanded
    mobileMenuToggle.setAttribute('aria-expanded', 'false');

    // Button Text Content
    let textContent = mobileMenuToggle.querySelector('span.text-content');
    textContent.textContent = mobileMenuToggle.getAttribute('data-text-open');
    // console.log(test.textContent);

    // CLOSING #RENOVATEUR
    renovateurNavListContainer.removeAttribute('opened');
    renovateurNavListContainer.setAttribute('aria-hidden', '');
    renovateurNavListContainer.setAttribute('closing', '');

    renovateurNavListContainer.addEventListener(
      'animationend',
      () => {
        renovateurNavListContainer.setAttribute('closed', '');
        renovateurNavListContainer.removeAttribute('closing', '');
      },
      { once: true }
    );

    // CLOSING #HOMEGRADE
    HomegradeNavListContainer.removeAttribute('opened');
    HomegradeNavListContainer.setAttribute('aria-hidden', '');
    HomegradeNavListContainer.setAttribute('closing', '');

    HomegradeNavListContainer.addEventListener(
      'animationend',
      () => {
        HomegradeNavListContainer.setAttribute('closed', '');
        HomegradeNavListContainer.removeAttribute('closing', '');
      },
      { once: true }
    );
  }
  mobileMenuToggle.addEventListener('click', function (e) {
    // Button Text Content

    if (isMobileNavOpened() === false) {
      openMenu();
      return;
    }
    if (isMobileNavOpened() === true) {
      closeMenu();
    }
  });

  /* -----------------------------------------------------------
	HANDLE FOCUS CHANGE
 -----------------------------------------------------------*/
  function getFirstLink(menuLinks) {
    return menuLinks[0].querySelector('button')
      ? menuLinks[0].querySelector('button')
      : menuLinks[0].querySelector('a');
  }
  function getLastLink(menuLinks) {
    return menuLinks[menuLinks.length - 1].querySelector('button')
      ? menuLinks[menuLinks.length - 1].querySelector('button')
      : menuLinks[menuLinks.length - 1].querySelector('a');
  }

  // Menu Renovateur elements
  const renovateurLinks = header.querySelectorAll('.menu-renovateur__navlist .menu-item');
  const renovateurFirstLink = getFirstLink(renovateurLinks);
  const renovateurLastLink = getLastLink(renovateurLinks);

  // Menu homegrade elements
  const homegradeLinks = header.querySelectorAll('.menu-homegrade__navlist .menu-item');
  const homegradeFirstLink = getFirstLink(homegradeLinks);
  const homegradeLastLink = getLastLink(homegradeLinks);

  // Leaving the mobile menu Toggle --> Focus on Menu Homegrade
  mobileMenuToggle.addEventListener('focusout', (e) => {
    if (isMobileNavOpened()) {
      renovateurFirstLink.focus();
    }
  });

  // Si shift tab pour retour --> Focuser correctement sur le mobile menu toggle
  renovateurFirstLink.addEventListener('focusout', (e) => {
    if (e.relatedTarget.id == 'website-logo-link' && isMobileNavOpened()) {
      mobileMenuToggle.focus();
    }
  });

  // Leaving the Menu Rénovateur --> Focus on Menu Homegrade
  renovateurLastLink.addEventListener('focusout', (e) => {
    if (isMobileNavOpened()) {
      homegradeFirstLink.focus();
    }
  });

  // Leaving the Menu Homegrade --> Focus on the toggle
  homegradeLastLink.addEventListener('focusout', (e) => {
    if (isMobileNavOpened()) {
      mobileMenuToggle.focus();
    }
  });

  /* -----------------------------------------------------------
	HANDLE ESCAPE KEY
 -----------------------------------------------------------*/
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      if (isMobileNavOpened()) {
        closeMenu(renovateurNavListContainer);
        closeMenu(HomegradeNavListContainer);
      }
      if (isSearchOpen() === true) {
        closeSearch();
      }
      if (isSubmenuOpen()) {
        closeSubmenus();
      }
    }
  });
}