111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
export default function menuInit() {
|
|
const header = document.querySelector('#main-header');
|
|
|
|
// Search module
|
|
searchModule = header.querySelector('.search-module');
|
|
const searchModuleToggle = header.querySelector('#search-module-toggle');
|
|
|
|
// Submenus
|
|
const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
|
|
const submenusItems = header.querySelectorAll('.sub-menu');
|
|
|
|
function isSubmenuOpen() {
|
|
return header.querySelector('sub-menu-open') !== null;
|
|
}
|
|
|
|
function openSubmenu(buttonToggle) {
|
|
closeSubmenus();
|
|
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
|
|
buttonToggle.setAttribute('aria-expanded', !isExpanded);
|
|
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
|
|
}
|
|
function closeSubmenus() {
|
|
const openSubmenus = header.querySelectorAll('.sub-menu-open');
|
|
openSubmenus.forEach((submenu) => {
|
|
submenu.classList.remove('sub-menu-open');
|
|
submenu.parentElement
|
|
.querySelector('.menu-item-submenu-toggle')
|
|
.setAttribute('aria-expanded', 'false');
|
|
console.log(submenu.parentElement);
|
|
});
|
|
}
|
|
|
|
|
|
function isSearchOpen() {
|
|
return searchModule.getAttribute('aria-hidden') === 'true';
|
|
}
|
|
function openSearch() {
|
|
searchModule.classList.remove('search-module-open');
|
|
searchModule.classList.add('search-module-closed');
|
|
setTimeout(() => {
|
|
searchModule.setAttribute('aria-hidden', 'true');
|
|
}, 400);
|
|
}
|
|
function closeSearch() {
|
|
searchModule.setAttribute('aria-hidden', 'false');
|
|
|
|
setTimeout(() => {
|
|
searchModule.classList.remove('search-module-closed');
|
|
searchModule.classList.add('search-module-open');
|
|
}, 50);
|
|
|
|
searchModuleToggle.toggleAttribute('aria-expanded');
|
|
}
|
|
|
|
// SEARCH TOGGLE open/close
|
|
searchModuleToggle.addEventListener('click', function (e) {
|
|
// const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
|
|
closeSubmenus();
|
|
// MENU IS OPEN --> CLOSE IT
|
|
if (isSearchOpen()) {
|
|
closeSearch();
|
|
return;
|
|
}
|
|
// MENU IS CLOSED --> OPEN IT
|
|
if (!isSearchOpen()) {
|
|
openSearch();
|
|
}
|
|
});
|
|
|
|
// SEARCH TOGGLE open/close
|
|
submenuToggles.forEach((button) => {
|
|
button.addEventListener('click', () => openSubmenu(button));
|
|
});
|
|
|
|
// #### BURGER TOGGLE open/close
|
|
// const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
|
|
// burgerMenuToggle.addEventListener('click', function (e) {
|
|
// e.preventDefault();
|
|
// header.classList.toggle('nav-open');
|
|
// burgerMenuToggle.toggleAttribute('aria-expanded');
|
|
// gsap.from(primary_menu, {
|
|
// opacity: 20,
|
|
// y: '-100vh',
|
|
// duration: 0.5,
|
|
// ease: Power4.easeOut,
|
|
// });
|
|
// });
|
|
|
|
// #### SUBMENUS TOGGLE open/close
|
|
// const submenuToggles = primary_menu.querySelectorAll(
|
|
// '.menu-item-submenu-toggle'
|
|
// );
|
|
|
|
// #### Close nav when reaching the end of the menu with tab
|
|
|
|
// document.addEventListener(
|
|
// 'focusin',
|
|
// (e) => {
|
|
// const header = document.querySelector('#primary-header');
|
|
// console.log(header.contains(document.activeElement));
|
|
// if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
|
|
// header.classList.remove('nav-open');
|
|
// burgerMenuToggle.setAttribute('aria-expanded', false);
|
|
|
|
// burgerMenuToggle.focus();
|
|
// }
|
|
// },
|
|
// true
|
|
// );
|
|
}
|