kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-04-01 06:44:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

finished mvp for js menu

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-03-17 16:16:29 +01:00
parent 12df136ccf
commit 3a32b65454
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
1 changed files with 93 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
sphinx/templates/structure.html
View File

@ -63,9 +63,21 @@
{% endif %} {% endif %}
<script> <script>
// Initialize the current navigation document.addEventListener("DOMContentLoaded", function() {
// Initialization: wait for window load and then trigger current nav detection.
window.addEventListener("load", function() {
console.log("Window loaded, initializing current nav...");
initCurrentNav();
});
// Re-trigger when the hash changes.
window.addEventListener("hashchange", function() {
console.log("Hash changed, reinitializing current nav...");
initCurrentNav();
});
function initCurrentNav() { function initCurrentNav() {
// If Alpine is available, wait until the DOM is updated. // If Alpine.js is available and provides nextTick, use it.
if (window.Alpine && typeof window.Alpine.nextTick === 'function') { if (window.Alpine && typeof window.Alpine.nextTick === 'function') {
window.Alpine.nextTick(processNav); window.Alpine.nextTick(processNav);
} else { } else {
@ -73,12 +85,12 @@
} }
} }
// Process all navigation links within the .current-index container.
function processNav() { function processNav() {
var currentHash = window.location.hash; var currentHash = window.location.hash;
console.log("initCurrentNav: Current hash:", currentHash); console.log("initCurrentNav: Current hash:", currentHash);
if (!currentHash) return; if (!currentHash) return;
// Select all internal links within the .current-index container.
var links = document.querySelectorAll('.current-index a.reference.internal'); var links = document.querySelectorAll('.current-index a.reference.internal');
links.forEach(function(link) { links.forEach(function(link) {
var href = link.getAttribute("href"); var href = link.getAttribute("href");
@ -90,7 +102,7 @@
markAsCurrent(link); markAsCurrent(link);
} }
} }
// Otherwise, if the link includes a file and a hash, compare only the hash part. // Otherwise, if the link includes a file and a hash, compare the hash part.
else if (href && href.indexOf('#') !== -1) { else if (href && href.indexOf('#') !== -1) {
var parts = href.split('#'); var parts = href.split('#');
var linkHash = "#" + parts[1].trim(); var linkHash = "#" + parts[1].trim();
@ -104,11 +116,12 @@
console.log("initCurrentNav: No match for link:", href); console.log("initCurrentNav: No match for link:", href);
} }
}); });
// After processing, open all submenus under current items.
// After processing links, open submenus only for those li elements marked as current.
openCurrentSubmenus(); openCurrentSubmenus();
} }
// Mark the link's parent li and all ancestor li elements as current. // Mark the link's parent li and all its ancestor li elements as current.
function markAsCurrent(link) { function markAsCurrent(link) {
var li = link.closest("li"); var li = link.closest("li");
if (!li) { if (!li) {
@ -117,7 +130,7 @@
} }
li.classList.add("current"); li.classList.add("current");
console.log("markAsCurrent: Marked li as current:", li); console.log("markAsCurrent: Marked li as current:", li);
// If Alpine.js is in use, set its "expanded" property to true. // If Alpine.js is used, set its "expanded" property to true.
if (li.__x && li.__x.$data) { if (li.__x && li.__x.$data) {
li.__x.$data.expanded = true; li.__x.$data.expanded = true;
console.log("markAsCurrent: Set Alpine expanded on li:", li); console.log("markAsCurrent: Set Alpine expanded on li:", li);
@ -134,28 +147,18 @@
} }
} }
// Open all submenu elements under list items marked as current. // Open immediate submenu elements (the direct children with x-show) of li.current.
function openCurrentSubmenus() { function openCurrentSubmenus() {
document.querySelectorAll('.current-index li.current').forEach(function(li) { document.querySelectorAll('.current-index li.current').forEach(function(li) {
li.querySelectorAll("[x-show]").forEach(function(elem) { // Only target immediate child elements that have x-show.
if (elem.style.display === "none") { li.querySelectorAll(":scope > [x-show]").forEach(function(elem) {
if (elem.style.display === "none" || elem.style.display === "") {
elem.style.display = "block"; elem.style.display = "block";
console.log("openCurrentSubmenus: Opened submenu element:", elem); console.log("openCurrentSubmenus: Opened submenu element:", elem);
} }
}); });
}); });
} }
// Re-trigger when the hash changes.
window.addEventListener("hashchange", function() {
console.log("Hash changed, reinitializing current nav...");
initCurrentNav();
});
// Wait until the window fully loads, then initialize the navigation.
window.addEventListener("load", function() {
console.log("Window loaded, initializing current nav...");
initCurrentNav();
}); });
</script> </script>