47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import {onClickOutside} from "./../helpers/clickOutside.js";
|
|
|
|
export function dropdown() {
|
|
document.querySelectorAll(".dropdown").forEach(el => {
|
|
dropdownInit(el);
|
|
})
|
|
}
|
|
|
|
function dropdownInit(el) {
|
|
const button = el.querySelector("button");
|
|
const menu = el.querySelector(".dropdown-menu");
|
|
button.addEventListener('click', function () {
|
|
if (menu.hasAttribute('hidden')) {
|
|
this.setAttribute('aria-expanded', 'true');
|
|
menu.removeAttribute('hidden');
|
|
|
|
// Set focus on first link
|
|
// will be highlighted for keyboard users
|
|
menu.querySelector(".dropdown-item:first-child")?.focus();
|
|
} else {
|
|
menu.setAttribute('hidden', 'true');
|
|
this.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
// Ignore IME composition
|
|
if (event.isComposing || event.key === "esc") {
|
|
return;
|
|
}
|
|
|
|
// Close menu with ESC key
|
|
if (event.keyCode === 27) {
|
|
if (!menu.hasAttribute('hidden')) {
|
|
menu.setAttribute('aria-expanded', 'false');
|
|
menu.setAttribute('hidden', 'true');
|
|
}
|
|
}
|
|
});
|
|
|
|
onClickOutside(menu, ".dropdown", () => menu.hidden = true);
|
|
|
|
|
|
}
|
|
|
|
|