Make each part of the note path clickable.

This commit is contained in:
SiriusXT 2025-04-17 16:30:46 +08:00
parent b875717117
commit b86407b7f5

View File

@ -19,15 +19,15 @@ const TPL = /*html*/`
margin-top: 10px; margin-top: 10px;
} }
.note-path-list .path-current { .note-path-list .path-current a {
font-weight: bold; font-weight: bold;
} }
.note-path-list .path-archived { .note-path-list .path-archived a {
color: var(--muted-text-color) !important; color: var(--muted-text-color) !important;
} }
.note-path-list .path-search { .note-path-list .path-search a {
font-style: italic; font-style: italic;
} }
</style> </style>
@ -72,7 +72,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
this.$notePathList.empty(); this.$notePathList.empty();
if (!this.note || this.noteId === "root") { if (!this.note || this.noteId === "root") {
this.$notePathList.empty().append(await this.getRenderedPath("root")); this.$notePathList.empty().append(await this.getRenderedPath(["root"]));
return; return;
} }
@ -88,7 +88,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
const renderedPaths = []; const renderedPaths = [];
for (const notePathRecord of sortedNotePaths) { for (const notePathRecord of sortedNotePaths) {
const notePath = notePathRecord.notePath.join("/"); const notePath = notePathRecord.notePath;
renderedPaths.push(await this.getRenderedPath(notePath, notePathRecord)); renderedPaths.push(await this.getRenderedPath(notePath, notePathRecord));
} }
@ -96,42 +96,54 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
this.$notePathList.empty().append(...renderedPaths); this.$notePathList.empty().append(...renderedPaths);
} }
async getRenderedPath(notePath: string, notePathRecord: NotePathRecord | null = null) { async getRenderedPath(notePath: string[], notePathRecord: NotePathRecord | null = null) {
const title = await treeService.getNotePathTitle(notePath); const $pathItem = $("<li>");
const pathSegments: string[] = [];
const lastIndex = notePath.length - 1;
const $noteLink = await linkService.createLink(notePath, { title }); for (let i = 0; i < notePath.length; i++) {
const noteId = notePath[i];
pathSegments.push(noteId);
const title = await treeService.getNoteTitle(noteId);
const $noteLink = await linkService.createLink(pathSegments.join("/"), { title });
$noteLink.find("a").addClass("no-tooltip-preview tn-link"); $noteLink.find("a").addClass("no-tooltip-preview tn-link");
$pathItem.append($noteLink);
if (i != lastIndex) {
$pathItem.append(" / ");
}
}
const icons = []; const icons = [];
if (this.notePath === notePath) { if (this.notePath === notePath.join("/")) {
$noteLink.addClass("path-current"); $pathItem.addClass("path-current");
} }
if (!notePathRecord || notePathRecord.isInHoistedSubTree) { if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
$noteLink.addClass("path-in-hoisted-subtree"); $pathItem.addClass("path-in-hoisted-subtree");
} else { } else {
icons.push(`<span class="bx bx-trending-up" title="${t("note_paths.outside_hoisted")}"></span>`); icons.push(`<span class="bx bx-trending-up" title="${t("note_paths.outside_hoisted")}"></span>`);
} }
if (notePathRecord?.isArchived) { if (notePathRecord?.isArchived) {
$noteLink.addClass("path-archived"); $pathItem.addClass("path-archived");
icons.push(`<span class="bx bx-archive" title="${t("note_paths.archived")}"></span>`); icons.push(`<span class="bx bx-archive" title="${t("note_paths.archived")}"></span>`);
} }
if (notePathRecord?.isSearch) { if (notePathRecord?.isSearch) {
$noteLink.addClass("path-search"); $pathItem.addClass("path-search");
icons.push(`<span class="bx bx-search" title="${t("note_paths.search")}"></span>`); icons.push(`<span class="bx bx-search" title="${t("note_paths.search")}"></span>`);
} }
if (icons.length > 0) { if (icons.length > 0) {
$noteLink.append(` ${icons.join(" ")}`); $pathItem.append(` ${icons.join(" ")}`);
} }
return $("<li>").append($noteLink); return $pathItem;
} }
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {