Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE FIX close submenus when opened when opening this one

Browse Source
This commit is contained in:
Antoine M 2026-05-13 18:02:11 +02:00
parent 2d501df378
commit 5dd376b090
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/search-bar.ts
View File

@ -14,10 +14,10 @@ export default class SearchBar {
constructor(options: SearchBarOptions = {}) { constructor(options: SearchBarOptions = {}) {
this.searchBar = document.querySelector('#search-module') as HTMLDivElement; this.searchBar = document.querySelector('#search-module') as HTMLDivElement;
this.searchButtons = document.querySelectorAll( this.searchButtons = document.querySelectorAll(
'.tools-container .search-button' '.tools-container .search-button',
) as NodeListOf<HTMLButtonElement>; // Il y a 2 boutons de recherche (1 mobile; 1 desktop) ) as NodeListOf<HTMLButtonElement>; // Il y a 2 boutons de recherche (1 mobile; 1 desktop)
this.searchInput = document.querySelector( this.searchInput = document.querySelector(
'.search-module__search-form__input' '.search-module__search-form__input',
) as HTMLInputElement; ) as HTMLInputElement;
this.init(); this.init();
@ -33,7 +33,7 @@ export default class SearchBar {
// Ajouter les event listeners // Ajouter les event listeners
this.searchButtons.forEach((button) => this.searchButtons.forEach((button) =>
button.addEventListener('click', (event) => this.toggle(event)) button.addEventListener('click', (event) => this.toggle(event)),
); );
this.searchBar.addEventListener('transitionend', this.handleTransitionEnd.bind(this)); this.searchBar.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
document.addEventListener('keydown', this.handleKeyDown.bind(this)); document.addEventListener('keydown', this.handleKeyDown.bind(this));
@ -58,7 +58,10 @@ export default class SearchBar {
public open(): void { public open(): void {
if (!this.searchBar) return; if (!this.searchBar) return;
const submenus = document.querySelectorAll('#primary-menu .sub-menu-open');
submenus.forEach((submenu) => {
submenu.classList.remove('sub-menu-open');
});
this.searchBar.removeAttribute('closed'); this.searchBar.removeAttribute('closed');
this.searchBar.setAttribute('opened', ''); this.searchBar.setAttribute('opened', '');
this.isOpen = true; this.isOpen = true;
@ -100,6 +103,10 @@ export default class SearchBar {
this.searchBar.addEventListener('animationend', handleAnimationEnd); this.searchBar.addEventListener('animationend', handleAnimationEnd);
} }
public closeSubmenus(): void {
if (!this.searchBar) return;
}
private handleTransitionEnd(): void { private handleTransitionEnd(): void {
this.updateAriaHidden(); this.updateAriaHidden();
} }
@ -124,7 +131,7 @@ export default class SearchBar {
// Vérifier si le clic est en dehors de la barre de recherche ET des boutons // Vérifier si le clic est en dehors de la barre de recherche ET des boutons
const isClickOutsideSearchBar = !this.searchBar.contains(target); const isClickOutsideSearchBar = !this.searchBar.contains(target);
const isClickOnButton = Array.from(this.searchButtons || []).some((button) => const isClickOnButton = Array.from(this.searchButtons || []).some((button) =>
button.contains(target) button.contains(target),
); );
if (isClickOutsideSearchBar && !isClickOnButton) { if (isClickOutsideSearchBar && !isClickOnButton) {
@ -151,7 +158,10 @@ export default class SearchBar {
// Note: Les event listeners anonymes ne peuvent pas être supprimés facilement // Note: Les event listeners anonymes ne peuvent pas être supprimés facilement
// Dans un vrai projet, il faudrait stocker les références des fonctions // Dans un vrai projet, il faudrait stocker les références des fonctions
this.searchBar.removeEventListener('transitionend', this.handleTransitionEnd.bind(this)); this.searchBar.removeEventListener(
'transitionend',
this.handleTransitionEnd.bind(this),
);
document.removeEventListener('keydown', this.handleKeyDown.bind(this)); document.removeEventListener('keydown', this.handleKeyDown.bind(this));
document.removeEventListener('click', this.handleClickOutside.bind(this)); document.removeEventListener('click', this.handleClickOutside.bind(this));
window.removeEventListener('scroll', this.handleScroll.bind(this)); window.removeEventListener('scroll', this.handleScroll.bind(this));