1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
function initDropdowns() {
const dropdownToggles = document.querySelectorAll(".st-dropdown-toggle")
const dropdowns = [...dropdownToggles].map(toggleEl => ({
toggleEl,
contentEL: toggleEl.parentElement.querySelector(".st-dropdown-menu")
}))
const close = (dropdown) => {
const {toggleEl, contentEL} = dropdown
toggleEl.setAttribute("aria-expanded", "false")
contentEL.classList.toggle("hidden", true)
}
const closeAll = () => dropdowns.forEach(close)
const open = (dropdown) => {
closeAll()
dropdown.toggleEl.setAttribute("aria-expanded", "true")
dropdown.contentEL.classList.toggle("hidden", false)
const boundaries = [dropdown.contentEL, ...dropdownToggles]
const clickOutsideListener = (event) => {
const target = event.target
if (!target) return
if (!boundaries.some(b => b.contains(target))) {
closeAll()
document.removeEventListener("click", clickOutsideListener)
}
}
document.addEventListener("click", clickOutsideListener)
}
dropdowns.forEach(dropdown => {
dropdown.toggleEl.addEventListener("click", () => {
if (dropdown.toggleEl.getAttribute("aria-expanded") === "true") {
close(dropdown)
} else {
open(dropdown)
}
})
})
}
window.addEventListener("DOMContentLoaded", () => {
initDropdowns()
})
|
