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) {
      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() {
      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 });
    }
    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 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");
      mobileMenuToggle.setAttribute("aria-expanded", "true");
      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) {
      mobileMenuToggle.setAttribute("aria-expanded", "false");
      let textContent = mobileMenuToggle.querySelector("span.text-content");
      textContent.textContent = mobileMenuToggle.getAttribute("data-text-open");
      renovateurNavListContainer.removeAttribute("opened");
      renovateurNavListContainer.setAttribute("aria-hidden", "");
      renovateurNavListContainer.setAttribute("closing", "");
      renovateurNavListContainer.addEventListener("animationend", () => {
        renovateurNavListContainer.setAttribute("closed", "");
        renovateurNavListContainer.removeAttribute("closing", "");
      }, { once: true });
      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) {
      if (isMobileNavOpened() === false) {
        openMenu();
        return;
      }
      if (isMobileNavOpened() === true) {
        closeMenu();
      }
    });
    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");
    }
    const renovateurLinks = header.querySelectorAll(".menu-renovateur__navlist .menu-item");
    const renovateurFirstLink = getFirstLink(renovateurLinks);
    const renovateurLastLink = getLastLink(renovateurLinks);
    const homegradeLinks = header.querySelectorAll(".menu-homegrade__navlist .menu-item");
    const homegradeFirstLink = getFirstLink(homegradeLinks);
    const homegradeLastLink = getLastLink(homegradeLinks);
    mobileMenuToggle.addEventListener("focusout", (e) => {
      if (isMobileNavOpened()) {
        renovateurFirstLink.focus();
      }
    });
    renovateurFirstLink.addEventListener("focusout", (e) => {
      if (e.relatedTarget.id == "website-logo-link" && isMobileNavOpened()) {
        mobileMenuToggle.focus();
      }
    });
    renovateurLastLink.addEventListener("focusout", (e) => {
      if (isMobileNavOpened()) {
        homegradeFirstLink.focus();
      }
    });
    homegradeLastLink.addEventListener("focusout", (e) => {
      if (isMobileNavOpened()) {
        mobileMenuToggle.focus();
      }
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        if (isMobileNavOpened()) {
          closeMenu(renovateurNavListContainer);
          closeMenu(HomegradeNavListContainer);
        }
        if (isSearchOpen() === true) {
          closeSearch();
        }
        if (isSubmenuOpen()) {
          closeSubmenus();
        }
      }
    });
  }

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