84 lines
2.8 KiB
JavaScript
84 lines
2.8 KiB
JavaScript
export function initDropdowns(responsiveSmall) {
|
|
const dropdowns = document.querySelectorAll('.dropdown');
|
|
|
|
function updateBodyOverflow(isOpen) {
|
|
if (isOpen && window.innerWidth < responsiveSmall) {
|
|
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'));
|
|
});
|
|
});
|
|
|
|
// 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);
|
|
}
|
|
});
|
|
}
|