Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hadnling footer sub menu behaviour

Browse Source
This commit is contained in:
Antoine M 2024-01-26 10:37:27 +01:00
parent b77da901fe
commit 529f10bd60
1 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/menus.js
View File

@ -26,12 +26,41 @@ export default function menuInit() {
footer.querySelector('.sub-menu--open') !== null
);
}
function isFooterSubmenu(buttonToggle) {
let currentElement = buttonToggle;
for (let i = 0; i < 6; i++) {
currentElement = currentElement.parentElement;
// Vérifiez si l'élément actuel est un menu-renovateur--footer
if (currentElement.classList.contains('menu-renovateur--footer')) {
console.log(`FOUND IT !`);
return true; // Si trouvé, retournez true
}
// Arrêtez la boucle si l'élément actuel est null (pas plus de parents)
if (!currentElement) {
break;
}
}
return false;
// return buttonToggle.parentElement.parentElement.parentElement.parentElement.classList.contains(
// 'menu-renovateur--footer'
// );
}
function openSubmenu(buttonToggle) {
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
const submenu = buttonToggle.parentElement.querySelector('.sub-menu');
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');
submenu.classList.toggle('sub-menu--open');
submenu.classList.toggle('sub-menu--closed');
if (isFooterSubmenu(buttonToggle)) {
submenu.parentElement.parentElement.style.marginBottom = submenu.clientHeight + 'px';
}
}
function closeSubmenus() {
const headerOpenSubmenus = header.querySelectorAll('.sub-menu--open');
@ -49,6 +78,7 @@ export default function menuInit() {
submenu.parentElement
.querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false');
submenu.parentElement.parentElement.style.marginBottom = '0px';
});
}
@ -64,8 +94,6 @@ export default function menuInit() {
}
function closeCurrentSubmenu(buttonClose) {
// console.log('close submenu');
// console.log(buttonClose.parentElement);
const currentOpenedSubmenu = buttonClose.parentElement;
currentOpenedSubmenu.classList.remove('sub-menu--open');
@ -73,7 +101,11 @@ export default function menuInit() {
currentOpenedSubmenu.parentElement
.querySelector('.menu-item__submenu-toggle')
.setAttribute('aria-expanded', 'false');
if (isFooterSubmenu(buttonClose)) {
currentOpenedSubmenu.parentElement.parentElement.style.marginBottom = '0px';
}
}
// ###HEADER — SUBMENU TOGGGLES open/close
headerSubmenuToggles.forEach((button) => {
button.addEventListener('click', () => {
@ -285,7 +317,6 @@ export default function menuInit() {
}
});
/* -----------------------------------------------------------
HANDLE FOCUS CHANGE
-----------------------------------------------------------*/