mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-19 00:42:29 +08:00
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
/**
|
|
* This build breadcrumb-style navigation using the existing
|
|
* tree menu generated by Trilium. The concept is to find
|
|
* the currently active link (fixed by an earlier script)
|
|
* and follow that up to the root part of the menu
|
|
*/
|
|
export default function buildBreadcrumbsFromNav() {
|
|
const container = document.createElement("ul");
|
|
container.id = "breadcrumbs";
|
|
|
|
// Find currently active link
|
|
const current = document.querySelector("#menu .active");
|
|
if (!current) return; // Something went really wrong
|
|
|
|
// Clone the link and add it to the front of the breadcrumb list
|
|
const firstItem = document.createElement("li");
|
|
firstItem.append(current.cloneNode(true));
|
|
container.prepend(firstItem);
|
|
|
|
// Walk the sublists upward until the root
|
|
let next = current.closest("ul");
|
|
while (next) {
|
|
const clone = next?.previousElementSibling?.querySelector("a")?.cloneNode(true);
|
|
if (!clone) continue; // This also means something went very wrong
|
|
|
|
// Get the parent of the previous and add to front of breadcrumbs
|
|
const ancestorItem = document.createElement("li");
|
|
ancestorItem.append(clone);
|
|
container.prepend(ancestorItem);
|
|
|
|
// Get the next sublist upward
|
|
next = next?.parentElement?.closest("ul") ?? null;
|
|
|
|
// We are not yet at root, continue
|
|
if (next) continue;
|
|
|
|
// Since next == null, we are at root, let's ue a pretty logo
|
|
clone.textContent = "";
|
|
const logo = document.createElement("img");
|
|
logo.src = "https://raw.githubusercontent.com/zadam/trilium/master/images/icon-black.svg";
|
|
clone.appendChild(logo);
|
|
}
|
|
|
|
// We don't need this at root
|
|
if (container.children.length === 1) return;
|
|
|
|
// Add breadcrumb container to the main layout
|
|
const main = document.getElementById("main");
|
|
main?.prepend(container);
|
|
|
|
// Scroll to the active breadcrumb in case of overflow
|
|
container.scrollLeft = container.scrollWidth - container.clientWidth;
|
|
} |