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> {
private noteContext: NoteContext;
private $modalHeader!: JQuery<HTMLElement>;
private $modalBody!: JQuery<HTMLElement>;
constructor() {
super();
@@ -89,13 +91,14 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
// Now we wrap it in the modal.
const $newWidget = $(TPL);
const $modalHeader = $newWidget.find(".modal-title");
const $modalBody = $newWidget.find(".modal-body");
this.$modalHeader = $newWidget.find(".modal-title");
this.$modalBody = $newWidget.find(".modal-body");
const children = this.$widget.children();
$modalHeader.append(children[0]);
$modalBody.append(children.slice(1));
this.$modalHeader.append(children[0]);
this.$modalBody.append(children.slice(1));
this.$widget = $newWidget;
this.setVisibility(false);
}
async openInPopupEvent({ noteIdOrPath }: EventData<"openInPopup">) {
@@ -105,13 +108,14 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
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.
// The backdrop instance is not shared so it's OK to make a one-off modification.
$("body > .modal-backdrop").css("z-index", "998");
$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", () => {
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;
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 {
// Avoid events related to the current tab interfere with our popup.
if (["noteSwitched", "noteSwitchedAndActivated"].includes(name)) {