Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 02:52:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(client/ts): port book_properties

Browse Source
This commit is contained in:
Elian Doran 2025-02-13 22:45:48 +02:00
parent 283482caa5
commit e347cdda36
No known key found for this signature in database
1 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/public/app/widgets/ribbon_widgets/book_properties.js → src/public/app/widgets/ribbon_widgets/book_properties.ts
View File

@ -1,6 +1,8 @@
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import attributeService from "../../services/attributes.js";
import { t } from "../../services/i18n.js";
import type FNote from "../../entities/fnote.js";
import type { EventData } from "../../components/app_context.js";
const TPL = `
<div class="book-properties-widget">
@ -9,7 +11,7 @@ const TPL = `
padding: 12px 12px 6px 12px;
display: flex;
}
.book-properties-widget > * {
margin-right: 15px;
}
@ -17,19 +19,19 @@ const TPL = `
<div style="display: flex; align-items: baseline">
<span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
<select class="view-type-select form-select form-select-sm">
<option value="grid">${t("book_properties.grid")}</option>
<option value="list">${t("book_properties.list")}</option>
</select>
</div>
<button type="button"
class="collapse-all-button btn btn-sm"
title="${t("book_properties.collapse_all_notes")}">
<span class="bx bx-layer-minus"></span>
${t("book_properties.collapse")}
</button>
@ -37,13 +39,18 @@ const TPL = `
class="expand-children-button btn btn-sm"
title="${t("book_properties.expand_all_children")}">
<span class="bx bx-move-vertical"></span>
${t("book_properties.expand")}
</button>
</div>
`;
export default class BookPropertiesWidget extends NoteContextAwareWidget {
private $viewTypeSelect!: JQuery<HTMLElement>;
private $expandChildrenButton!: JQuery<HTMLElement>;
private $collapseAllButton!: JQuery<HTMLElement>;
get name() {
return "bookProperties";
}
@ -70,11 +77,15 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
this.contentSized();
this.$viewTypeSelect = this.$widget.find(".view-type-select");
this.$viewTypeSelect.on("change", () => this.toggleViewType(this.$viewTypeSelect.val()));
this.$viewTypeSelect.on("change", () => this.toggleViewType(String(this.$viewTypeSelect.val())));
this.$expandChildrenButton = this.$widget.find(".expand-children-button");
this.$expandChildrenButton.on("click", async () => {
if (!this.note.isLabelTruthy("expanded")) {
if (!this.noteId || !this.note) {
return;
}
if (!this.note?.isLabelTruthy("expanded")) {
await attributeService.addLabel(this.noteId, "expanded");
}
@ -83,6 +94,10 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
this.$collapseAllButton = this.$widget.find(".collapse-all-button");
this.$collapseAllButton.on("click", async () => {
if (!this.noteId || !this.note) {
return;
}
// owned is important - we shouldn't remove inherited expanded labels
for (const expandedAttr of this.note.getOwnedLabels("expanded")) {
await attributeService.removeAttributeById(this.noteId, expandedAttr.attributeId);
@ -92,7 +107,11 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
});
}
async refreshWithNote(note) {
async refreshWithNote(note: FNote) {
if (!this.note) {
return;
}
const viewType = this.note.getLabelValue("viewType") || "grid";
this.$viewTypeSelect.val(viewType);
@ -101,7 +120,11 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
this.$collapseAllButton.toggle(viewType === "list");
}
async toggleViewType(type) {
async toggleViewType(type: string) {
if (!this.noteId) {
return;
}
if (type !== "list" && type !== "grid") {
throw new Error(t("book_properties.invalid_view_type", { type }));
}
@ -109,7 +132,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
await attributeService.setLabel(this.noteId, "viewType", type);
}
entitiesReloadedEvent({ loadResults }) {
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name === "viewType")) {
this.refresh();
}