From 16b58a58a322804594308e352082108948a6bb44 Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Tue, 25 Feb 2025 02:02:20 +0100 Subject: [PATCH 1/3] port js to ts --- src/public/app/widgets/bookmark_buttons.js | 56 ------------- src/public/app/widgets/bookmark_buttons.ts | 78 +++++++++++++++++++ ...{bookmark_folder.js => bookmark_folder.ts} | 21 +++-- src/public/app/widgets/buttons/edit_button.ts | 76 ++++++++++++++++++ ...own_button.js => right_dropdown_button.ts} | 28 +++++-- .../show_highlights_list_widget_button.js | 49 ------------ .../show_highlights_list_widget_button.ts | 62 +++++++++++++++ 7 files changed, 252 insertions(+), 118 deletions(-) delete mode 100644 src/public/app/widgets/bookmark_buttons.js create mode 100644 src/public/app/widgets/bookmark_buttons.ts rename src/public/app/widgets/buttons/{bookmark_folder.js => bookmark_folder.ts} (81%) create mode 100644 src/public/app/widgets/buttons/edit_button.ts rename src/public/app/widgets/buttons/{right_dropdown_button.js => right_dropdown_button.ts} (67%) delete mode 100644 src/public/app/widgets/buttons/show_highlights_list_widget_button.js create mode 100644 src/public/app/widgets/buttons/show_highlights_list_widget_button.ts diff --git a/src/public/app/widgets/bookmark_buttons.js b/src/public/app/widgets/bookmark_buttons.js deleted file mode 100644 index 5494b74222..0000000000 --- a/src/public/app/widgets/bookmark_buttons.js +++ /dev/null @@ -1,56 +0,0 @@ -import FlexContainer from "./containers/flex_container.js"; -import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js"; -import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; -import froca from "../services/froca.js"; -import utils from "../services/utils.js"; - -export default class BookmarkButtons extends FlexContainer { - constructor(isHorizontalLayout) { - super(isHorizontalLayout ? "row" : "column"); - - this.contentSized(); - this.settings = {}; - } - - async refresh() { - this.$widget.empty(); - this.children = []; - this.noteIds = []; - - const bookmarkParentNote = await froca.getNote("_lbBookmarks"); - - for (const note of await bookmarkParentNote.getChildNotes()) { - this.noteIds.push(note.noteId); - - const buttonWidget = note.isLabelTruthy("bookmarkFolder") ? new BookmarkFolderWidget(note) : new OpenNoteButtonWidget(note).class("launcher-button"); - if (this.settings.titlePlacement) { - if (!buttonWidget.settings) { - buttonWidget = {}; - } - buttonWidget.settings.titlePlacement = this.settings.titlePlacement; - } - - this.child(buttonWidget); - - this.$widget.append(buttonWidget.render()); - - buttonWidget.refreshIcon(); - } - - utils.reloadTray(); - } - - initialRenderCompleteEvent() { - this.refresh(); - } - - entitiesReloadedEvent({ loadResults }) { - if (loadResults.getBranchRows().find((branch) => branch.parentNoteId === "_lbBookmarks")) { - this.refresh(); - } - - if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["iconClass", "workspaceIconClass", "bookmarkFolder"].includes(attr.name) && this.noteIds.includes(attr.noteId))) { - this.refresh(); - } - } -} diff --git a/src/public/app/widgets/bookmark_buttons.ts b/src/public/app/widgets/bookmark_buttons.ts new file mode 100644 index 0000000000..72b422540a --- /dev/null +++ b/src/public/app/widgets/bookmark_buttons.ts @@ -0,0 +1,78 @@ +import FlexContainer from "./containers/flex_container.js"; +import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js"; +import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; +import froca from "../services/froca.js"; +import utils from "../services/utils.js"; +import type { EventData } from "../components/app_context.js"; +import type Component from "../components/component.js"; + +interface BookmarkButtonsSettings { + titlePlacement?: string; +} + +export default class BookmarkButtons extends FlexContainer { + private settings: BookmarkButtonsSettings; + private noteIds: string[]; + + constructor(isHorizontalLayout: boolean) { + super(isHorizontalLayout ? "row" : "column"); + + this.contentSized(); + this.settings = {}; + this.noteIds = []; + } + + async refresh(): Promise { + this.$widget.empty(); + this.children = []; + this.noteIds = []; + + const bookmarkParentNote = await froca.getNote("_lbBookmarks"); + + if (!bookmarkParentNote) { + return; + } + + for (const note of await bookmarkParentNote.getChildNotes()) { + this.noteIds.push(note.noteId); + + let buttonWidget: OpenNoteButtonWidget | BookmarkFolderWidget = note.isLabelTruthy("bookmarkFolder") + ? new BookmarkFolderWidget(note) + : new OpenNoteButtonWidget(note).class("launcher-button"); + + if (this.settings.titlePlacement) { + if (!('settings' in buttonWidget)) { + (buttonWidget as any).settings = {}; + } + + (buttonWidget as any).settings.titlePlacement = this.settings.titlePlacement; + } + + this.child(buttonWidget); + + this.$widget.append(buttonWidget.render()); + + buttonWidget.refreshIcon(); + } + + utils.reloadTray(); + } + + initialRenderCompleteEvent(): void { + this.refresh(); + } + + entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">): void { + if (loadResults.getBranchRows().find((branch) => branch.parentNoteId === "_lbBookmarks")) { + this.refresh(); + } + + if (loadResults.getAttributeRows().find((attr) => + attr.type === "label" && + attr.name && ["iconClass", "workspaceIconClass", "bookmarkFolder"].includes(attr.name) && + attr.noteId && this.noteIds.includes(attr.noteId) + )) { + this.refresh(); + } + } +} diff --git a/src/public/app/widgets/buttons/bookmark_folder.js b/src/public/app/widgets/buttons/bookmark_folder.ts similarity index 81% rename from src/public/app/widgets/buttons/bookmark_folder.js rename to src/public/app/widgets/buttons/bookmark_folder.ts index 7a7d46423f..b41a88ef81 100644 --- a/src/public/app/widgets/buttons/bookmark_folder.js +++ b/src/public/app/widgets/buttons/bookmark_folder.ts @@ -1,6 +1,7 @@ import RightDropdownButtonWidget from "./right_dropdown_button.js"; import linkService from "../../services/link.js"; import utils from "../../services/utils.js"; +import type FNote from "../../entities/fnote.js"; const DROPDOWN_TPL = `
@@ -43,25 +44,35 @@ const DROPDOWN_TPL = `
    `; +interface LinkOptions { + showTooltip: boolean; + showNoteIcon: boolean; +} + export default class BookmarkFolderWidget extends RightDropdownButtonWidget { - constructor(note) { + private note: FNote; + private $parentNote!: JQuery; + private $childrenNotes!: JQuery; + declare $dropdownContent: JQuery; + + constructor(note: FNote) { super(utils.escapeHtml(note.title), note.getIcon(), DROPDOWN_TPL); this.note = note; } - doRender() { + doRender(): void { super.doRender(); this.$parentNote = this.$dropdownContent.find(".parent-note"); this.$childrenNotes = this.$dropdownContent.find(".children-notes"); } - async dropdownShown() { + async dropdownShown(): Promise { this.$parentNote.empty(); this.$childrenNotes.empty(); - const linkOptions = { + const linkOptions: LinkOptions = { showTooltip: false, showNoteIcon: true }; @@ -73,5 +84,5 @@ export default class BookmarkFolderWidget extends RightDropdownButtonWidget { } } - refreshIcon() {} + refreshIcon(): void {} } diff --git a/src/public/app/widgets/buttons/edit_button.ts b/src/public/app/widgets/buttons/edit_button.ts new file mode 100644 index 0000000000..592aeded5f --- /dev/null +++ b/src/public/app/widgets/buttons/edit_button.ts @@ -0,0 +1,76 @@ +import OnClickButtonWidget from "./onclick_button.js"; +import appContext from "../../components/app_context.js"; +import attributeService from "../../services/attributes.js"; +import protectedSessionHolder from "../../services/protected_session_holder.js"; +import { t } from "../../services/i18n.js"; +import LoadResults from "../../services/load_results.js"; +import type { AttributeRow } from "../../services/load_results.js"; +import FNote from "../../entities/fnote.js"; + +export default class EditButton extends OnClickButtonWidget { + isEnabled(): boolean { + return Boolean(super.isEnabled() && this.note && this.noteContext?.viewScope?.viewMode === "default"); + } + + constructor() { + super(); + + this.icon("bx-edit-alt") + .title(t("edit_button.edit_this_note")) + .titlePlacement("bottom") + .onClick((widget) => { + if (this.noteContext?.viewScope) { + this.noteContext.viewScope.readOnlyTemporarilyDisabled = true; + appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext: this.noteContext }); + } + this.refresh(); + }); + } + + async refreshWithNote(note: FNote): Promise { + if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) { + this.toggleInt(false); + } else { + // prevent flickering by assuming hidden before async operation + this.toggleInt(false); + + const wasVisible = this.isVisible(); + + // can't do this in isEnabled() since isReadOnly is async + const isReadOnly = await this.noteContext?.isReadOnly(); + this.toggleInt(Boolean(isReadOnly)); + + // make the edit button stand out on the first display, otherwise + // it's difficult to notice that the note is readonly + if (this.isVisible() && !wasVisible && this.$widget) { + this.$widget.addClass("bx-tada bx-lg"); + + setTimeout(() => { + this.$widget?.removeClass("bx-tada bx-lg"); + }, 1700); + } + } + + await super.refreshWithNote(note); + } + + entitiesReloadedEvent({ loadResults }: { loadResults: LoadResults }): void { + if (loadResults.getAttributeRows().find((attr: AttributeRow) => + attr.type === "label" && + attr.name?.toLowerCase().includes("readonly") && + this.note && + attributeService.isAffecting(attr, this.note) + )) { + if (this.noteContext?.viewScope) { + this.noteContext.viewScope.readOnlyTemporarilyDisabled = false; + } + this.refresh(); + } + } + + async noteTypeMimeChangedEvent({ noteId }: { noteId: string }): Promise { + if (this.isNote(noteId)) { + await this.refresh(); + } + } +} diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.ts similarity index 67% rename from src/public/app/widgets/buttons/right_dropdown_button.js rename to src/public/app/widgets/buttons/right_dropdown_button.ts index 1d405bf3b6..d9edb3f076 100644 --- a/src/public/app/widgets/buttons/right_dropdown_button.js +++ b/src/public/app/widgets/buttons/right_dropdown_button.ts @@ -1,12 +1,13 @@ import BasicWidget from "../basic_widget.js"; import { Tooltip, Dropdown } from "bootstrap"; +type PopoverPlacement = Tooltip.PopoverPlacement; const TPL = `
    - +
    @@ -14,7 +15,17 @@ const TPL = ` `; export default class RightDropdownButtonWidget extends BasicWidget { - constructor(title, iconClass, dropdownTpl) { + protected iconClass: string; + protected title: string; + protected dropdownTpl: string; + protected settings: { titlePlacement: PopoverPlacement }; + protected $dropdownMenu!: JQuery; + protected dropdown!: Dropdown; + protected $tooltip!: JQuery; + protected tooltip!: Tooltip; + public $dropdownContent!: JQuery; + + constructor(title: string, iconClass: string, dropdownTpl: string) { super(); this.iconClass = iconClass; @@ -26,13 +37,13 @@ export default class RightDropdownButtonWidget extends BasicWidget { }; } - doRender() { + doRender(): void { this.$widget = $(TPL); this.$dropdownMenu = this.$widget.find(".dropdown-menu"); - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); + this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title); - this.tooltip = new Tooltip(this.$tooltip, { + this.tooltip = new Tooltip(this.$tooltip[0], { placement: this.settings.titlePlacement, fallbackPlacements: [this.settings.titlePlacement] }); @@ -48,7 +59,8 @@ export default class RightDropdownButtonWidget extends BasicWidget { await this.dropdownShown(); const rect = this.$dropdownMenu[0].getBoundingClientRect(); - const pixelsToBottom = $(window).height() - rect.bottom; + const windowHeight = $(window).height() || 0; + const pixelsToBottom = windowHeight - rect.bottom; if (pixelsToBottom < 0) { this.$dropdownMenu.css("top", pixelsToBottom); @@ -60,5 +72,5 @@ export default class RightDropdownButtonWidget extends BasicWidget { } // to be overridden - async dropdownShow() {} + async dropdownShown(): Promise {} } diff --git a/src/public/app/widgets/buttons/show_highlights_list_widget_button.js b/src/public/app/widgets/buttons/show_highlights_list_widget_button.js deleted file mode 100644 index 81bbda738d..0000000000 --- a/src/public/app/widgets/buttons/show_highlights_list_widget_button.js +++ /dev/null @@ -1,49 +0,0 @@ -import OnClickButtonWidget from "./onclick_button.js"; -import appContext from "../../components/app_context.js"; -import attributeService from "../../services/attributes.js"; -import { t } from "../../services/i18n.js"; - -export default class ShowHighlightsListWidgetButton extends OnClickButtonWidget { - isEnabled() { - return super.isEnabled() && this.note && this.note.type === "text" && this.noteContext.viewScope.viewMode === "default"; - } - - constructor() { - super(); - - this.icon("bx-highlight") - .title(t("show_highlights_list_widget_button.show_highlights_list")) - .titlePlacement("bottom") - .onClick((widget) => { - this.noteContext.viewScope.highlightsListTemporarilyHidden = false; - appContext.triggerEvent("showHighlightsListWidget", { noteId: this.noteId }); - this.toggleInt(false); - }); - } - - async refreshWithNote(note) { - this.toggleInt(this.noteContext.viewScope.highlightsListTemporarilyHidden); - } - async reEvaluateHighlightsListWidgetVisibilityEvent({ noteId }) { - if (noteId === this.noteId) { - await this.refresh(); - } - } - async entitiesReloadedEvent({ loadResults }) { - if (loadResults.isNoteContentReloaded(this.noteId)) { - await this.refresh(); - } else if ( - loadResults - .getAttributeRows() - .find((attr) => attr.type === "label" && (attr.name.toLowerCase().includes("readonly") || attr.name === "hideHighlightWidget") && attributeService.isAffecting(attr, this.note)) - ) { - await this.refresh(); - } - } - - async noteTypeMimeChangedEvent({ noteId }) { - if (this.isNote(noteId)) { - await this.refresh(); - } - } -} diff --git a/src/public/app/widgets/buttons/show_highlights_list_widget_button.ts b/src/public/app/widgets/buttons/show_highlights_list_widget_button.ts new file mode 100644 index 0000000000..b5ce7920ba --- /dev/null +++ b/src/public/app/widgets/buttons/show_highlights_list_widget_button.ts @@ -0,0 +1,62 @@ +import OnClickButtonWidget from "./onclick_button.js"; +import appContext from "../../components/app_context.js"; +import attributeService from "../../services/attributes.js"; +import { t } from "../../services/i18n.js"; +import LoadResults from "../../services/load_results.js"; +import type { AttributeRow } from "../../services/load_results.js"; + +export default class ShowHighlightsListWidgetButton extends OnClickButtonWidget { + isEnabled(): boolean { + return Boolean(super.isEnabled() && this.note && this.note.type === "text" && this.noteContext?.viewScope?.viewMode === "default"); + } + + constructor() { + super(); + + this.icon("bx-highlight") + .title(t("show_highlights_list_widget_button.show_highlights_list")) + .titlePlacement("bottom") + .onClick((widget) => { + if (this.noteContext?.viewScope && this.noteId) { + this.noteContext.viewScope.highlightsListTemporarilyHidden = false; + appContext.triggerEvent("showHighlightsListWidget", { noteId: this.noteId }); + } + this.toggleInt(false); + }); + } + + async refreshWithNote(): Promise { + if (this.noteContext?.viewScope) { + this.toggleInt(this.noteContext.viewScope.highlightsListTemporarilyHidden); + } + } + + async reEvaluateHighlightsListWidgetVisibilityEvent({ noteId }: { noteId: string }): Promise { + if (noteId === this.noteId) { + await this.refresh(); + } + } + + async entitiesReloadedEvent({ loadResults }: { loadResults: LoadResults }): Promise { + if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) { + await this.refresh(); + } else if ( + loadResults + .getAttributeRows() + .find((attr: AttributeRow) => + attr.type === "label" && + (attr.name?.toLowerCase().includes("readonly") || attr.name === "hideHighlightWidget") && + this.note && + attributeService.isAffecting(attr, this.note) + ) + ) { + await this.refresh(); + } + } + + async noteTypeMimeChangedEvent({ noteId }: { noteId: string }): Promise { + if (this.isNote(noteId)) { + await this.refresh(); + } + } +} From 1be92baf4a26629c90e5ba5a6daef3a4b6fec92c Mon Sep 17 00:00:00 2001 From: Jin <22962980+JYC333@users.noreply.github.com> Date: Tue, 25 Feb 2025 02:11:53 +0100 Subject: [PATCH 2/3] remove edit_button.js --- src/public/app/widgets/buttons/edit_button.js | 66 ------------------- 1 file changed, 66 deletions(-) delete mode 100644 src/public/app/widgets/buttons/edit_button.js diff --git a/src/public/app/widgets/buttons/edit_button.js b/src/public/app/widgets/buttons/edit_button.js deleted file mode 100644 index b55d445844..0000000000 --- a/src/public/app/widgets/buttons/edit_button.js +++ /dev/null @@ -1,66 +0,0 @@ -import OnClickButtonWidget from "./onclick_button.js"; -import appContext from "../../components/app_context.js"; -import attributeService from "../../services/attributes.js"; -import protectedSessionHolder from "../../services/protected_session_holder.js"; -import { t } from "../../services/i18n.js"; - -export default class EditButton extends OnClickButtonWidget { - isEnabled() { - return super.isEnabled() && this.note && this.noteContext.viewScope.viewMode === "default"; - } - - constructor() { - super(); - - this.icon("bx-edit-alt") - .title(t("edit_button.edit_this_note")) - .titlePlacement("bottom") - .onClick((widget) => { - this.noteContext.viewScope.readOnlyTemporarilyDisabled = true; - - appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext: this.noteContext }); - - this.refresh(); - }); - } - - async refreshWithNote(note) { - if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) { - this.toggleInt(false); - } else { - // prevent flickering by assuming hidden before async operation - this.toggleInt(false); - - const wasVisible = this.isVisible(); - - // can't do this in isEnabled() since isReadOnly is async - this.toggleInt(await this.noteContext.isReadOnly()); - - // make the edit button stand out on the first display, otherwise - // it's difficult to notice that the note is readonly - if (this.isVisible() && !wasVisible) { - this.$widget.addClass("bx-tada bx-lg"); - - setTimeout(() => { - this.$widget.removeClass("bx-tada bx-lg"); - }, 1700); - } - } - - await super.refreshWithNote(note); - } - - entitiesReloadedEvent({ loadResults }) { - if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name.toLowerCase().includes("readonly") && attributeService.isAffecting(attr, this.note))) { - this.noteContext.viewScope.readOnlyTemporarilyDisabled = false; - - this.refresh(); - } - } - - async noteTypeMimeChangedEvent({ noteId }) { - if (this.isNote(noteId)) { - await this.refresh(); - } - } -} From 175852f6cbf479d5f7ee2e4c436d32a58fd1ae3a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 25 Feb 2025 17:20:13 +0200 Subject: [PATCH 3/3] refactor(client): remove unnecessary return type --- src/public/app/widgets/buttons/right_dropdown_button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/app/widgets/buttons/right_dropdown_button.ts b/src/public/app/widgets/buttons/right_dropdown_button.ts index d9edb3f076..e0afc3470a 100644 --- a/src/public/app/widgets/buttons/right_dropdown_button.ts +++ b/src/public/app/widgets/buttons/right_dropdown_button.ts @@ -37,7 +37,7 @@ export default class RightDropdownButtonWidget extends BasicWidget { }; } - doRender(): void { + doRender() { this.$widget = $(TPL); this.$dropdownMenu = this.$widget.find(".dropdown-menu"); this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);