59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
export function initDropdowns() {
|
|
const dropdowns = document.querySelectorAll('.dropdown');
|
|
|
|
dropdowns.forEach(dropdown => {
|
|
const trigger = dropdown.querySelector('.dropdown__trigger');
|
|
|
|
if (!trigger) return;
|
|
|
|
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');
|
|
});
|
|
});
|
|
|
|
// Ferme tous les dropdowns au clic extérieur
|
|
document.addEventListener('click', () => {
|
|
dropdowns.forEach(dropdown => {
|
|
dropdown.classList.remove('is-open', 'dropdown--align-right');
|
|
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
|
|
});
|
|
});
|
|
|
|
// 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');
|
|
});
|
|
}
|
|
});
|
|
}
|