homegrade_theme_production/js/app.js

(() => {
  // resources/js/header.js
  function menuInit() {
    const header = document.querySelector("#main-header");
    const searchModule = header.querySelector(".search-module");
    const searchModuleToggle = header.querySelector("#search-module-toggle");
    const mobileMenuToggle = header.querySelector("#mobile-menu-toggle");
    const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
    const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
    function isSubmenuOpen() {
      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");
    }
    submenuToggles.forEach((button) => {
      button.addEventListener("click", () => {
        if (isSearchOpen() === true) {
          closeSearch();
        }
        handleSubmenuToggle(button);
      });
    });
    submenuCloseBtns.forEach((button) => {
      button.addEventListener("click", () => closeCurrentSubmenu(button));
    });
    function isSearchOpen() {
      if (searchModule.getAttribute("mobile-closed") != null && searchModule.getAttribute("aria-hidden") != null && searchModule.getAttribute("mobile-opened") === null) {
        return false;
      }
      if (searchModule.getAttribute("mobile-opened") != null && searchModule.getAttribute("mobile-closed") === null && searchModule.getAttribute("aria-hidden") === null) {
        return true;
      }
      return null;
    }
    function openSearch() {
      searchModuleToggle.setAttribute("aria-expanded", "");
      searchModule.setAttribute("mobile-opened", "");
      searchModule.removeAttribute("mobile-closed");
      setTimeout(() => {
        searchModule.removeAttribute("aria-hidden");
      }, 400);
    }
    function closeSearch() {
      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 });
      searchModuleToggle.toggleAttribute("aria-expanded");
    }
    searchModuleToggle.addEventListener("click", function(e) {
      closeSubmenus();
      if (isSearchOpen() === false) {
        openSearch();
        return;
      }
      if (isSearchOpen() === true) {
        closeSearch();
      }
    });
    const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container");
    const HomegradeNavListContainer = header.querySelector(".menu-homegrade");
    function openMenu(menuContainer) {
      menuContainer.removeAttribute("closed", "");
      menuContainer.setAttribute("opened", "");
      menuContainer.removeAttribute("aria-hidden", "");
      menuContainer.setAttribute("opening", "");
      menuContainer.addEventListener("animationend", () => {
        menuContainer.removeAttribute("opening", "");
      }, { once: true });
    }
    function closeMenu(menuContainer) {
      menuContainer.removeAttribute("opened");
      menuContainer.setAttribute("aria-hidden", "");
      menuContainer.setAttribute("closing", "");
      menuContainer.addEventListener("animationend", () => {
        menuContainer.setAttribute("closed", "");
        menuContainer.removeAttribute("closing", "");
      }, { once: true });
    }
    mobileMenuToggle.addEventListener("click", function(e) {
      const isNavOpened = renovateurNavListContainer.hasAttribute("opened");
      const textContent = mobileMenuToggle.querySelector("span.text-content");
      const dataTextOpen = mobileMenuToggle.getAttribute("data-text-open");
      const dataTextClose = mobileMenuToggle.getAttribute("data-text-close");
      textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
      mobileMenuToggle.toggleAttribute("aria-expanded");
      if (isNavOpened) {
        closeMenu(renovateurNavListContainer);
        closeMenu(HomegradeNavListContainer);
      }
      if (!isNavOpened) {
        openMenu(renovateurNavListContainer);
        openMenu(HomegradeNavListContainer);
      }
    });
  }

  // resources/js/app.js
  window.addEventListener("load", function() {
    menuInit();
  });
})();