converted info dialog to new pattern

src/public/app/dialogs/info.js

@@ -1,33 +0,0 @@
-import utils from "../services/utils.js";
-
-const $dialog = $("#info-dialog");
-const $infoContent = $("#info-dialog-content");
-const $okButton = $("#info-dialog-ok-button");
-
-let resolve;
-let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
-
-export function info(message) {
-    $originallyFocused = $(':focus');
-
-    $infoContent.text(message);
-
-    utils.openDialog($dialog);
-
-    return new Promise((res, rej) => { resolve = res; });
-}
-
-$dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
-
-$dialog.on("hidden.bs.modal", () => {
-    if (resolve) {
-        resolve();
-    }
-
-    if ($originallyFocused) {
-        $originallyFocused.trigger('focus');
-        $originallyFocused = null;
-    }
-});
-
-$okButton.on('click', () => $dialog.modal("hide"));

src/public/app/layouts/desktop_layout.js

@@ -71,6 +71,7 @@ import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
 import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
 import NoteRevisionsDialog from "../widgets/dialogs/note_revisions.js";
 import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
+import InfoDialog from "../widgets/dialogs/info.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -216,6 +217,7 @@ export default class DesktopLayout {
             .child(new MarkdownImportDialog())
             .child(new ProtectedSessionPasswordDialog())
             .child(new NoteRevisionsDialog())
-            .child(new DeleteNotesDialog());
+            .child(new DeleteNotesDialog())
+            .child(new InfoDialog());
     }
 }

src/public/app/widgets/dialog.js

@@ -0,0 +1,10 @@
+import appContext from "../services/app_context.js";
+
+async function info(message) {
+    return new Promise(res =>
+        appContext.triggerCommand("showInfoDialog", {message, callback: res}));
+}
+
+export default {
+    info
+};

src/public/app/widgets/dialogs/info.js

@@ -0,0 +1,63 @@
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="info-dialog modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Info message</h5>
+
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="info-dialog-content"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="info-dialog-ok-button btn btn-primary btn-sm">OK</button>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class InfoDialog extends BasicWidget {
+    constructor() {
+        super();
+
+        this.resolve = null;
+        this.$originallyFocused = null; // element focused before the dialog was opened so we can return to it afterwards
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$infoContent = this.$widget.find(".info-dialog-content");
+        this.$okButton = this.$widget.find(".info-dialog-ok-button");
+
+        this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
+
+        this.$widget.on("hidden.bs.modal", () => {
+            if (this.resolve) {
+                this.resolve();
+            }
+
+            if (this.$originallyFocused) {
+                this.$originallyFocused.trigger('focus');
+                this.$originallyFocused = null;
+            }
+        });
+
+        this.$okButton.on('click', () => this.$widget.modal("hide"));
+    }
+
+    showInfoDialogEvent({message, callback}) {
+        this.$originallyFocused = $(':focus');
+
+        this.$infoContent.text(message);
+
+        utils.openDialog(this.$widget);
+
+        this.resolve = callback;
+    }
+}

src/public/app/widgets/note_tree.js

@@ -16,6 +16,7 @@ import protectedSessionService from "../services/protected_session.js";
 import syncService from "../services/sync.js";
 import options from "../services/options.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
+import dialogService from "./dialog.js";
 
 const TPL = `
 <div class="tree-wrapper">
@@ -401,9 +402,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                         (['after', 'before'].includes(data.hitMode)
                             && (node.data.noteId === hoistedNoteService.getHoistedNoteId() || node.getParent().data.noteType === 'search'))) {
 
-                        const infoDialog = await import('../dialogs/info.js');
-
-                        await infoDialog.info("Dropping notes into this location is not allowed.");
+                        await dialogService.info("Dropping notes into this location is not allowed.");
 
                         return;
                     }

src/public/app/widgets/type_widgets/relation_map.js

@@ -8,6 +8,7 @@ import TypeWidget from "./type_widget.js";
 import appContext from "../../services/app_context.js";
 import utils from "../../services/utils.js";
 import froca from "../../services/froca.js";
+import dialogService from "../../widgets/dialog.js";
 
 const uniDirectionalOverlays = [
     [ "Arrow", {
@@ -509,8 +510,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
             && rel.name === name);
 
         if (relationExists) {
-            const infoDialog = await import('../../dialogs/info.js');
-            await infoDialog.info("Connection '" + name + "' between these notes already exists.");
+            await dialogService.info(`Connection '${name}' between these notes already exists.`);
 
             this.jsPlumbInstance.deleteConnection(connection);
 

src/views/desktop.ejs

@@ -18,7 +18,6 @@
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
 <%- include('dialogs/options.ejs') %>
-<%- include('dialogs/info.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>
 

src/views/dialogs/info.ejs

@@ -1,19 +0,0 @@
-<div id="info-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title mr-auto">Info message</h5>
-
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div id="info-dialog-content"></div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-primary btn-sm" id="info-dialog-ok-button">OK</button>
-            </div>
-        </div>
-    </div>
-</div>