feat(popup_editor): smoother operation

This commit is contained in:
Elian Doran
2025-07-11 12:16:56 +03:00
parent ddbe7e9936
commit 1e8ea54dbc

View File

@@ -77,6 +77,8 @@ const TPL = /*html*/`\
export default class PopupEditorDialog extends Container<BasicWidget> { export default class PopupEditorDialog extends Container<BasicWidget> {
private noteContext: NoteContext; private noteContext: NoteContext;
private $modalHeader!: JQuery<HTMLElement>;
private $modalBody!: JQuery<HTMLElement>;
constructor() { constructor() {
super(); super();
@@ -89,13 +91,14 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
// Now we wrap it in the modal. // Now we wrap it in the modal.
const $newWidget = $(TPL); const $newWidget = $(TPL);
const $modalHeader = $newWidget.find(".modal-title"); this.$modalHeader = $newWidget.find(".modal-title");
const $modalBody = $newWidget.find(".modal-body"); this.$modalBody = $newWidget.find(".modal-body");
const children = this.$widget.children(); const children = this.$widget.children();
$modalHeader.append(children[0]); this.$modalHeader.append(children[0]);
$modalBody.append(children.slice(1)); this.$modalBody.append(children.slice(1));
this.$widget = $newWidget; this.$widget = $newWidget;
this.setVisibility(false);
} }
async openInPopupEvent({ noteIdOrPath }: EventData<"openInPopup">) { async openInPopupEvent({ noteIdOrPath }: EventData<"openInPopup">) {
@@ -105,13 +108,14 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
await this.noteContext.setNote(noteIdOrPath); await this.noteContext.setNote(noteIdOrPath);
$dialog.on("shown.bs.modal", () => { $dialog.on("shown.bs.modal", async () => {
// Reduce the z-index of modals so that ckeditor popups are properly shown on top of it. // Reduce the z-index of modals so that ckeditor popups are properly shown on top of it.
// The backdrop instance is not shared so it's OK to make a one-off modification. // The backdrop instance is not shared so it's OK to make a one-off modification.
$("body > .modal-backdrop").css("z-index", "998"); $("body > .modal-backdrop").css("z-index", "998");
$dialog.css("z-index", "999"); $dialog.css("z-index", "999");
this.handleEventInChildren("activeContextChanged", { noteContext: this.noteContext }); await this.handleEventInChildren("activeContextChanged", { noteContext: this.noteContext });
this.setVisibility(true);
}); });
$dialog.on("hidden.bs.modal", () => { $dialog.on("hidden.bs.modal", () => {
const $typeWidgetEl = $dialog.find(".note-detail-printable"); const $typeWidgetEl = $dialog.find(".note-detail-printable");
@@ -119,9 +123,21 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
const typeWidget = glob.getComponentByEl($typeWidgetEl[0]) as TypeWidget; const typeWidget = glob.getComponentByEl($typeWidgetEl[0]) as TypeWidget;
typeWidget.cleanup(); typeWidget.cleanup();
} }
this.setVisibility(false);
}); });
} }
setVisibility(visible: boolean) {
if (visible) {
this.$modalBody.children().fadeIn();
this.$modalHeader.children().show();
} else {
this.$modalBody.children().hide();
this.$modalHeader.children().hide();
}
}
handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null { handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
// Avoid events related to the current tab interfere with our popup. // Avoid events related to the current tab interfere with our popup.
if (["noteSwitched", "noteSwitchedAndActivated"].includes(name)) { if (["noteSwitched", "noteSwitchedAndActivated"].includes(name)) {