export function initDropdowns(responsiveSmall) { const dropdowns = document.querySelectorAll('.dropdown'); function updateBodyOverflow(isOpen, dropdownElement = null) { const isInMobileGroup = dropdownElement?.closest('.btn--group__mobile'); if (isOpen && window.innerWidth < responsiveSmall && isInMobileGroup) { document.body.classList.add('is-hidden'); } else { document.body.classList.remove('is-hidden'); } } dropdowns.forEach(dropdown => { const trigger = dropdown.querySelector('.dropdown__trigger'); const content = dropdown.querySelector('.dropdown__content'); if (!trigger) return; // Empêche la fermeture au clic dans le contenu des dropdowns contenant .modal--share if (dropdown.querySelector('.modal--share') && content) { content.addEventListener('click', (e) => { e.stopPropagation(); }); } trigger.addEventListener('click', (e) => { e.stopPropagation(); // Ferme les autres dropdowns ouverts dropdowns.forEach(other => { if (other !== dropdown) { other.classList.remove('is-open', 'dropdown--align-right'); other.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); } }); const isOpening = !dropdown.classList.contains('is-open'); if (isOpening) { // Vérifie s'il y a la place à droite const content = dropdown.querySelector('.dropdown__content'); const triggerRect = trigger.getBoundingClientRect(); const contentWidth = content.offsetWidth || 300; const spaceRight = window.innerWidth - triggerRect.left; if (spaceRight < contentWidth) { dropdown.classList.add('dropdown--align-right'); } else { dropdown.classList.remove('dropdown--align-right'); } } // Toggle le dropdown actuel dropdown.classList.toggle('is-open'); trigger.classList.toggle('is-selected'); // Gère l'overflow du body sur mobile updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown); }); }); // Ferme tous les dropdowns au clic extérieur document.addEventListener('click', (e) => { dropdowns.forEach(dropdown => { // Ne ferme pas si le clic est dans un dropdown contenant .modal--share if (dropdown.querySelector('.modal--share') && dropdown.contains(e.target)) { return; } dropdown.classList.remove('is-open', 'dropdown--align-right'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); }); updateBodyOverflow(false); }); // Ferme au press Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { dropdowns.forEach(dropdown => { dropdown.classList.remove('is-open', 'dropdown--align-right'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); }); updateBodyOverflow(false); } }); }