hextra/assets/js/sidebar.js
yuri 97ea67198b
feat: scroll selected sidebar entry into view (#471)
Long sidebars did not scroll to show the selected entry. This made
working with such long sidebars quite confusing.
2024-10-12 19:55:39 +01:00

37 lines
1.1 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function () {
scrollToActiveItem();
enableCollapsibles();
});
function enableCollapsibles() {
const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
buttons.forEach(function (button) {
button.addEventListener("click", function (e) {
e.preventDefault();
const list = button.parentElement.parentElement;
if (list) {
list.classList.toggle("open")
}
});
});
}
function scrollToActiveItem() {
const sidebarScrollbar = document.querySelector("aside.sidebar-container > .hextra-scrollbar");
const activeItems = document.querySelectorAll(".sidebar-active-item");
const visibleActiveItem = Array.from(activeItems).find(function (activeItem) {
return activeItem.getBoundingClientRect().height > 0;
});
if (!visibleActiveItem) {
return;
}
const yOffset = visibleActiveItem.clientHeight;
const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
sidebarScrollbar.scrollTo({
behavior: "instant",
top: yDistance - yOffset
});
}