2023-09-28 20:59:17 -04:00
|
|
|
// In case a linked article lead to a new tree
|
|
|
|
|
const activeLink = document.querySelector("#menu a.active");
|
|
|
|
|
if (activeLink) {
|
|
|
|
|
let parent = activeLink.parentElement;
|
|
|
|
|
const mainMenu = document.getElementById("#menu");
|
|
|
|
|
while (parent && parent !== mainMenu) {
|
|
|
|
|
if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
|
|
|
|
|
parent.classList.add("expanded");
|
|
|
|
|
}
|
|
|
|
|
parent = parent.parentElement;
|
2023-09-28 00:14:44 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-27 23:18:03 -04:00
|
|
|
export default function setupExpanders() {
|
2023-09-28 20:59:17 -04:00
|
|
|
const expanders = Array.from(document.querySelectorAll("#menu .submenu-item"));
|
2023-09-27 23:18:03 -04:00
|
|
|
for (const ex of expanders) {
|
|
|
|
|
ex.addEventListener("click", e => {
|
2023-09-28 20:59:17 -04:00
|
|
|
if ((e.target as Element).closest(".submenu-item,.item") !== ex) return;
|
2023-09-27 23:18:03 -04:00
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2023-09-30 00:13:37 -04:00
|
|
|
const ul = ex.querySelector("ul")!;
|
|
|
|
|
ul.style.height = `${ul.scrollHeight}px`;
|
|
|
|
|
setTimeout(() => ex.classList.toggle("expanded"), 1);
|
|
|
|
|
setTimeout(() => ul.style.height = ``, 200);
|
2023-09-27 23:18:03 -04:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|