84 lines
2.9 KiB
JavaScript
84 lines
2.9 KiB
JavaScript
/* themes/custom/reha/assets/js/menu-burger-auto.js */
|
|
(function (Drupal) {
|
|
console.log("helloBurger");
|
|
Drupal.behaviors.rehaAutoBurger = {
|
|
attach: function (context) {
|
|
const root = context.querySelector('#block-reha-navigationprincipale');
|
|
if (!root) return;
|
|
|
|
const menu = root.querySelector('#main-nav');
|
|
if (!menu) return;
|
|
|
|
// Éviter le double-init
|
|
if (root.dataset.burgerInit === '1') return;
|
|
root.dataset.burgerInit = '1';
|
|
|
|
// Crée le bouton
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'rb-toggle';
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
btn.setAttribute('aria-controls', 'main-nav');
|
|
btn.innerHTML = `
|
|
<span class="rb-sr">Ouvrir le menu</span>
|
|
<span aria-hidden="true" class="rb-burger">
|
|
<span class="rb-line"></span><span class="rb-line"></span><span class="rb-line"></span>
|
|
</span>
|
|
`;
|
|
|
|
// Insère le bouton avant la liste
|
|
menu.parentNode.insertBefore(btn, menu);
|
|
|
|
// Marque le menu comme repliable
|
|
menu.classList.add('rb-list');
|
|
// Masqué par défaut en mobile (le CSS gère desktop)
|
|
menu.hidden = true;
|
|
|
|
// Helpers
|
|
function openMenu() {
|
|
btn.setAttribute('aria-expanded', 'true');
|
|
btn.classList.add('is-active');
|
|
menu.hidden = false;
|
|
const first = menu.querySelector('a');
|
|
if (first) first.focus();
|
|
}
|
|
function closeMenu() {
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
btn.classList.remove('is-active');
|
|
menu.hidden = true;
|
|
btn.focus();
|
|
}
|
|
function toggleMenu() {
|
|
(btn.getAttribute('aria-expanded') === 'true') ? closeMenu() : openMenu();
|
|
}
|
|
|
|
// Événements
|
|
btn.addEventListener('click', toggleMenu);
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') closeMenu();
|
|
});
|
|
document.addEventListener('click', (e) => {
|
|
if (btn.getAttribute('aria-expanded') !== 'true') return;
|
|
if (!root.contains(e.target)) closeMenu();
|
|
});
|
|
|
|
// Responsif : desktop >= 768px => menu toujours visible
|
|
const mql = window.matchMedia('(min-width: 768px)');
|
|
function handleMQ(e) {
|
|
if (e.matches) {
|
|
// Desktop
|
|
menu.hidden = false;
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
btn.classList.remove('is-active');
|
|
} else {
|
|
// Mobile
|
|
if (btn.getAttribute('aria-expanded') !== 'true') menu.hidden = true;
|
|
}
|
|
}
|
|
if (mql.addEventListener) mql.addEventListener('change', handleMQ);
|
|
else mql.addListener(handleMQ);
|
|
handleMQ(mql);
|
|
}
|
|
};
|
|
})(Drupal);
|
|
|