converted confirm dialog to new pattern

src/public/app/dialogs/confirm.js

@@ -1,80 +0,0 @@
-const $dialog = $("#confirm-dialog");
-const $confirmContent = $("#confirm-dialog-content");
-const $okButton = $("#confirm-dialog-ok-button");
-const $cancelButton = $("#confirm-dialog-cancel-button");
-const $custom = $("#confirm-dialog-custom");
-
-const DELETE_NOTE_BUTTON_ID = "confirm-dialog-delete-note";
-
-let resolve;
-let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
-
-export function confirm(message) {
-    $originallyFocused = $(':focus');
-
-    $custom.hide();
-
-    glob.activeDialog = $dialog;
-
-    if (typeof message === 'string') {
-        message = $("<div>").text(message);
-    }
-
-    $confirmContent.empty().append(message);
-
-    $dialog.modal();
-
-    return new Promise((res, rej) => { resolve = res; });
-}
-
-export function confirmDeleteNoteBoxWithNote(title) {
-    glob.activeDialog = $dialog;
-
-    $confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
-
-    $custom.empty()
-        .append("<br/>")
-        .append($("<div>").addClass("form-check")
-            .append($("<input>")
-                .attr("id", DELETE_NOTE_BUTTON_ID)
-                .attr("type", "checkbox")
-                .addClass("form-check-input"))
-            .append($("<label>")
-                .attr("for", DELETE_NOTE_BUTTON_ID)
-                .addClass("form-check-label")
-                .attr("style", "text-decoration: underline dotted black")
-                .attr("title", "If you don't check this, note will be only removed from relation map, but will stay as a note.")
-                .html("Also delete note")));
-    $custom.show();
-
-    $dialog.modal();
-
-    return new Promise((res, rej) => { resolve = res; });
-}
-
-export function isDeleteNoteChecked() {
-    return $("#" + DELETE_NOTE_BUTTON_ID + ":checked").length > 0;
-}
-
-$dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
-
-$dialog.on("hidden.bs.modal", () => {
-    if (resolve) {
-        resolve(false);
-    }
-
-    if ($originallyFocused) {
-        $originallyFocused.trigger('focus');
-        $originallyFocused = null;
-    }
-});
-
-function doResolve(ret) {
-    resolve(ret);
-    resolve = null;
-
-    $dialog.modal("hide");
-}
-
-$cancelButton.on('click', () => doResolve(false));
-$okButton.on('click', () => doResolve(true));

src/public/app/dialogs/options/shortcuts.js

@@ -1,5 +1,6 @@
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
+import dialogService from "../../widgets/dialog.js";
 
 const TPL = `
 <h4>Keyboard shortcuts</h4>
@@ -87,9 +88,7 @@ export default class KeyboardShortcutsOptions {
         });
 
         $("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {
-            const confirmDialog = await import('../confirm.js');
+            if (!await dialogService.confirm("Do you really want to reset all keyboard shortcuts to the default?")) {
-
-            if (!await confirmDialog.confirm("Do you really want to reset all keyboard shortcuts to the default?")) {
                 return;
             }
 

src/public/app/layouts/desktop_layout.js

@@ -72,6 +72,7 @@ import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session
 import NoteRevisionsDialog from "../widgets/dialogs/note_revisions.js";
 import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
 import InfoDialog from "../widgets/dialogs/info.js";
+import ConfirmDialog from "../widgets/dialogs/confirm.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -218,6 +219,7 @@ export default class DesktopLayout {
             .child(new ProtectedSessionPasswordDialog())
             .child(new NoteRevisionsDialog())
             .child(new DeleteNotesDialog())
-            .child(new InfoDialog());
+            .child(new InfoDialog())
+            .child(new ConfirmDialog());
     }
 }

src/public/app/layouts/mobile_layout.js

@@ -9,6 +9,7 @@ import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
+import ConfirmDialog from "../widgets/dialogs/confirm.js";
 
 const MOBILE_CSS = `
 <style>
@@ -129,7 +130,8 @@ export default class MobileLayout {
                                 .css('padding', '5px 20px 10px 0')
                         )
                 )
-                .child(new ProtectedSessionPasswordDialog())
+            )
-            );
+            .child(new ProtectedSessionPasswordDialog())
+            .child(new ConfirmDialog());
     }
 }

src/public/app/services/hoisted_note.js

@@ -1,5 +1,6 @@
 import appContext from "./app_context.js";
 import treeService from "./tree.js";
+import dialogService from "../widgets/dialog.js";
 
 function getHoistedNoteId() {
     const activeNoteContext = appContext.tabManager.getActiveContext();
@@ -36,9 +37,7 @@ async function checkNoteAccess(notePath, noteContext) {
     const hoistedNoteId = noteContext.hoistedNoteId;
 
     if (!resolvedNotePath.includes(hoistedNoteId) && !resolvedNotePath.includes("hidden")) {
-        const confirmDialog = await import('../dialogs/confirm.js');
+        if (!await dialogService.confirm("Requested note is outside of hoisted note subtree and you must unhoist to access the note. Do you want to proceed with unhoisting?")) {
-
-        if (!await confirmDialog.confirm("Requested note is outside of hoisted note subtree and you must unhoist to access the note. Do you want to proceed with unhoisting?")) {
             return false;
         }
 

src/public/app/widgets/dialog.js

@@ -5,6 +5,12 @@ async function info(message) {
         appContext.triggerCommand("showInfoDialog", {message, callback: res}));
 }
 
+async function confirm(message) {
+    return new Promise(res =>
+        appContext.triggerCommand("showConfirmDialog", {message, callback: res}));
+}
+
 export default {
-    info
+    info,
+    confirm
 };

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

@@ -0,0 +1,116 @@
+import BasicWidget from "../basic_widget.js";
+
+const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
+
+const TPL = `
+<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Confirmation</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="confirm-dialog-content"></div>
+
+                <div class="confirm-dialog-custom"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="confirm-dialog-cancel-button btn btn-sm">Cancel</button>
+
+                &nbsp;
+
+                <button class="confirm-dialog-ok-button btn btn-primary btn-sm">OK</button>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class ConfirmDialog 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.$confirmContent = this.$widget.find(".confirm-dialog-content");
+        this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
+        this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
+        this.$custom = this.$widget.find(".confirm-dialog-custom");
+
+        this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
+
+        this.$widget.on("hidden.bs.modal", () => {
+            if (this.resolve) {
+                this.resolve(false);
+            }
+
+            if (this.$originallyFocused) {
+                this.$originallyFocused.trigger('focus');
+                this.$originallyFocused = null;
+            }
+        });
+
+        this.$cancelButton.on('click', () => this.doResolve(false));
+        this.$okButton.on('click', () => this.doResolve(true));
+    }
+
+    showConfirmDialogEvent({message, callback}) {
+        this.$originallyFocused = $(':focus');
+
+        this.$custom.hide();
+
+        glob.activeDialog = this.$widget;
+
+        if (typeof message === 'string') {
+            message = $("<div>").text(message);
+        }
+
+        this.$confirmContent.empty().append(message);
+
+        this.$widget.modal();
+
+        this.resolve = callback;
+    }
+
+    confirmDeleteNoteBoxWithNoteEvent({title, callback}) {
+        glob.activeDialog = this.$widget;
+
+        this.$confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
+
+        this.$custom.empty()
+            .append("<br/>")
+            .append($("<div>").addClass("form-check")
+                .append($("<label>")
+                    .addClass("form-check-label")
+                    .attr("style", "text-decoration: underline dotted black")
+                    .attr("title", "If you don't check this, note will be only removed from relation map, but will stay as a note.")
+                    .append($("<input>")
+                        .attr("type", "checkbox")
+                        .addClass("form-check-input " + DELETE_NOTE_BUTTON_CLASS))
+                    .text("Also delete note")));
+
+        this.$custom.show();
+
+        this.$widget.modal();
+
+        this.resolve = callback;
+    }
+
+    isDeleteNoteChecked() {
+        return this.$widget.find("." + DELETE_NOTE_BUTTON_CLASS + ":checked").length > 0;
+    }
+
+    doResolve(ret) {
+        this.resolve(ret);
+        this.resolve = null;
+
+        this.$widget.modal("hide");
+    }
+}

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

@@ -72,7 +72,6 @@ export default class DeleteNotesDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$content = this.$widget.find(".recent-changes-content");
-        this.$dialog = this.$widget.find(".delete-notes-dialog");
         this.$okButton = this.$widget.find(".delete-notes-dialog-ok-button");
         this.$cancelButton = this.$widget.find(".delete-notes-dialog-cancel-button");
         this.$deleteNotesList = this.$widget.find(".delete-notes-list");
@@ -85,7 +84,7 @@ export default class DeleteNotesDialog extends BasicWidget {
         this.$deleteAllClones = this.$widget.find(".delete-all-clones");
         this.$eraseNotes = this.$widget.find(".erase-notes");
 
-        this.$dialog.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
+        this.$widget.on('shown.bs.modal', () => this.$okButton.trigger("focus"));
 
         this.$cancelButton.on('click', () => {
             utils.closeActiveDialog();

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

@@ -49,7 +49,6 @@ export default class MoveToDialog extends BasicWidget {
 
     doRender() {
         this.$widget = $(TPL);
-        this.$dialog = this.$widget.find(".move-to-dialog");
         this.$form = this.$widget.find(".move-to-form");
         this.$noteAutoComplete = this.$widget.find(".move-to-note-autocomplete");
         this.$noteList = this.$widget.find(".move-to-note-list");

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

@@ -6,6 +6,7 @@ import libraryLoader from "../../services/library_loader.js";
 import openService from "../../services/open.js";
 import protectedSessionHolder from "../../services/protected_session_holder.js";
 import BasicWidget from "../basic_widget.js";
+import dialogService from "../dialog.js";
 
 const TPL = `
 <div class="note-revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -104,10 +105,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
         });
 
         this.$eraseAllRevisionsButton.on('click', async () => {
-            const confirmDialog = await import('../../dialogs/confirm.js');
             const text = 'Do you want to delete all revisions of this note? This action will erase revision title and content, but still preserve revision metadata.';
 
-            if (await confirmDialog.confirm(text)) {
+            if (await dialogService.confirm(text)) {
                 await server.remove(`notes/${this.note.noteId}/revisions`);
 
                 this.$widget.modal('hide');
@@ -180,10 +180,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
         const $restoreRevisionButton = $('<button class="btn btn-sm" type="button">Restore this revision</button>');
 
         $restoreRevisionButton.on('click', async () => {
-            const confirmDialog = await import('../../dialogs/confirm.js');
             const text = 'Do you want to restore this revision? This will overwrite current title/content of the note with this revision.';
 
-            if (await confirmDialog.confirm(text)) {
+            if (await dialogService.confirm(text)) {
                 await server.put(`notes/${revisionItem.noteId}/restore-revision/${revisionItem.noteRevisionId}`);
 
                 this.$widget.modal('hide');
@@ -195,10 +194,9 @@ export default class NoteRevisionsDialog extends BasicWidget {
         const $eraseRevisionButton = $('<button class="btn btn-sm" type="button">Delete this revision</button>');
 
         $eraseRevisionButton.on('click', async () => {
-            const confirmDialog = await import('../../dialogs/confirm.js');
             const text = 'Do you want to delete this revision? This action will delete revision title and content, but still preserve revision metadata.';
 
-            if (await confirmDialog.confirm(text)) {
+            if (await dialogService.confirm(text)) {
                 await server.remove(`notes/${revisionItem.noteId}/revisions/${revisionItem.noteRevisionId}`);
 
                 this.loadNoteRevisions(revisionItem.noteId);

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

@@ -9,7 +9,7 @@ const TPL = `
             z-index: 1100 !important;
         }
         
-        .note-type-dropdown {
+        .note-type-chooser-dialog .note-type-dropdown {
             position: relative;
             font-size: large;
             padding: 20px;

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

@@ -6,6 +6,7 @@ import froca from "../../services/froca.js";
 import appContext from "../../services/app_context.js";
 import hoistedNoteService from "../../services/hoisted_note.js";
 import BasicWidget from "../basic_widget.js";
+import dialogService from "../dialog.js";
 
 const TPL = `
 <div class="recent-changes-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -71,13 +72,12 @@ export default class RecentChangesDialog extends BasicWidget {
                         const $undeleteLink = $(`<a href="javascript:">`)
                             .text("undelete")
                             .on('click', async () => {
-                                const confirmDialog = await import('../../dialogs/confirm.js');
                                 const text = 'Do you want to undelete this note and its sub-notes?';
 
-                                if (await confirmDialog.confirm(text)) {
+                                if (await dialogService.confirm(text)) {
                                     await server.put(`notes/${change.noteId}/undelete`);
 
-                                    $dialog.modal('hide');
+                                    this.$widget.modal('hide');
 
                                     await froca.reloadNotes([change.noteId]);
 

src/public/app/widgets/note_type.js

@@ -1,6 +1,7 @@
 import server from '../services/server.js';
 import mimeTypesService from '../services/mime_types.js';
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import dialogService from "./dialog.js";
 
 const NOTE_TYPES = [
     { type: "file", title: "File", selectable: false },
@@ -145,8 +146,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
             return true;
         }
 
-        const confirmDialog = await import("../dialogs/confirm.js");
+        return await dialogService.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
-        return await confirmDialog.confirm("It is not recommended to change note type when note content is not empty. Do you want to continue anyway?");
     }
 
     async entitiesReloadedEvent({loadResults}) {

src/public/app/widgets/shared_switch.js

@@ -3,6 +3,7 @@ import branchService from "../services/branches.js";
 import server from "../services/server.js";
 import utils from "../services/utils.js";
 import syncService from "../services/sync.js";
+import dialogService from "./dialog.js";
 
 export default class SharedSwitchWidget extends SwitchWidget {
     isEnabled() {
@@ -36,11 +37,9 @@ export default class SharedSwitchWidget extends SwitchWidget {
         }
 
         if (this.note.getParentBranches().length === 1) {
-            const confirmDialog = await import('../dialogs/confirm.js');
-
             const text = "This note exists only as a shared note, unsharing would delete it. Do you want to continue and thus delete this note?";
 
-            if (!await confirmDialog.confirm(text)) {
+            if (!await dialogService.confirm(text)) {
                 return;
             }
         }

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

@@ -197,9 +197,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
             appContext.tabManager.openTabWithNoteWithHoisting(noteId);
         }
         else if (command === "remove") {
-            const confirmDialog = await import('../../dialogs/confirm.js');
+            if (!await dialogService.confirmDeleteNoteBoxWithNote($title.text())) {
-
-            if (!await confirmDialog.confirmDeleteNoteBoxWithNote($title.text())) {
                 return;
             }
 
@@ -450,9 +448,7 @@ export default class RelationMapTypeWidget extends TypeWidget {
                     items: [ {title: "Remove relation", command: "remove", uiIcon: "bx bx-trash"} ],
                     selectMenuItemHandler: async ({command}) => {
                         if (command === 'remove') {
-                            const confirmDialog = await import('../../dialogs/confirm.js');
+                            if (!await dialogService.confirm("Are you sure you want to remove the relation?")) {
-
-                            if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
                                 return;
                             }
 

src/views/desktop.ejs

@@ -19,7 +19,6 @@
 
 <%- include('dialogs/options.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
-<%- include('dialogs/confirm.ejs') %>
 
 <script type="text/javascript">
     global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */

src/views/dialogs/confirm.ejs

@@ -1,25 +0,0 @@
-<div id="confirm-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title mr-auto">Confirmation</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="confirm-dialog-content"></div>
-
-                <div id="confirm-dialog-custom"></div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-sm" id="confirm-dialog-cancel-button">Cancel</button>
-
-                &nbsp;
-
-                <button class="btn btn-primary btn-sm" id="confirm-dialog-ok-button">OK</button>
-            </div>
-        </div>
-    </div>
-</div>

src/views/mobile.ejs

@@ -102,8 +102,6 @@
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
-<%- include('dialogs/confirm.ejs') %>
-
 <script type="text/javascript">
     global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */