studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

dropdown, automatique positionning
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-21 16:43:10 +01:00
parent d7a8611376
commit 2f7473be0a
4 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/js/dropdown.js
View file

@ -12,11 +12,27 @@ export function initDropdowns() {
// Ferme les autres dropdowns ouverts
dropdowns.forEach(other => {
if (other !== dropdown) {
other.classList.remove('is-open');
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');
@ -26,7 +42,7 @@ export function initDropdowns() {
// Ferme tous les dropdowns au clic extérieur
document.addEventListener('click', () => {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open');
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
});
@ -35,7 +51,7 @@ export function initDropdowns() {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open');
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
});
}