Closed SiriusXT closed 1 year ago
Nice idea.
Can you test this version and see if it works as you expect? I wasn't sure if you meant it to navigate the tree or to act as forward/backward history but I went with history.
The buttons should be hidden by default, just add the #history
label to the widget to enable them.
/**
* A widget to show note breadcrumbs at the bottom of the page.
*/
const TPL = `<div style="display: flex;align-items:center;gap:10px;padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
<div id="history-buttons">
<button onclick="window.history.back()" class="tree-floating-button bx bx-left-arrow-circle tree-settings-button" title="Go Back"></button>
<button onclick="window.history.forward()" class="tree-floating-button bx bx-right-arrow-circle tree-settings-button" title="Go Back"></button>
</div>
<div id="breadcrumbs"></div>
</div>`;
const styles = `
/* Place your CSS below this */
/* Place your CSS above this */`;
class BreadcrumbWidget extends api.NoteContextAwareWidget {
get position() {return 100;}
get parentWidget() {return "center-pane";}
constructor() {
super();
this.title = "";
}
isEnabled() {
if (!super.isEnabled()) return false;
const widgetDisable = api.startNote.hasLabel("disable");
const noteDisable = this.note.hasLabel("breadcrumbsDisable");
return !widgetDisable && !noteDisable;
}
doRender() {
this.$widget = $(TPL);
this.$breadcrumbs = this.$widget.find("#breadcrumbs");
this.updateStyles();
this.cssBlock(styles);
return this.$widget;
}
async refreshWithNote() {
await this.makeBreadcrumb();
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.attributes.length) this.updateStyles();
if (!this.note) return this.title = "";
if (!this.title) this.title = this.note.title;
if (this.note.title != this.title) {
this.title = this.note.title;
this.refresh();
}
}
async makeBreadcrumb() {
this.$breadcrumbs.empty();
const notePath = api.getActiveContextNotePath().split("/");
for (let n = 0; n < notePath.length; n++) {
const path = notePath.slice(0, n + 1);
const link = await api.createNoteLink(path.join("/"));
this.$breadcrumbs.append(link);
if (n < (notePath.length - 1)) this.$breadcrumbs.append(" / ");
}
}
updateStyles() {
const buttonWrapper = this.$widget.find("#history-buttons");
if (!buttonWrapper) return; // This should never happen but... just in case
const isVisible = buttonWrapper.css("display") !== "none";
const shouldHide = !api.startNote.hasLabel("history");
if (isVisible && shouldHide) buttonWrapper.hide();
if (!isVisible && !shouldHide) buttonWrapper.show();
}
}
module.exports = new BreadcrumbWidget();
What I think is something like this, there are two buttons in front of the root, which means forward and backward, similar to a browser
Yes that's what this does exactly!
Looks nice. I tweaked it a little bit.
Just now I added the wrong tag, now it works, great
看起来不错。 我稍微调整了一下。
how to make it show above
I just pushed my mods here https://github.com/Nriver/Trilium-Breadcrumbs/blob/main/src/widget.js
You can add a #top
label to move it to the top.
I liked the idea of moving it to the top a lot, feels like a much better fit for it! I think I'll make that the default. And I liked the tag-style links you did there, Nriver, and took inspiration for my own iteration.
https://github.com/rauenzi/Trilium-Breadcrumbs/assets/6865942/4fe328f6-9a74-4c4d-9c4d-e76524ccbdfb
https://github.com/rauenzi/Trilium-Breadcrumbs/assets/6865942/e3578d3d-78d9-4c32-84d6-063023a02f5f
Wow, you made the buttons look better. The animation looks nice.
Thanks, I wanted to be fancy 😄
Works great, exactly what I was looking for. It will be more convenient if you can add a forward and backward button in the front