converted options dialog to new pattern

src/public/app/dialogs/options.js

@@ -1,34 +0,0 @@
-"use strict";
-
-import server from '../services/server.js';
-import utils from "../services/utils.js";
-
-const $dialog = $("#options-dialog");
-
-export async function showDialog(openTab) {
-    const options = await server.get('options');
-
-    utils.openDialog($dialog);
-
-    (await Promise.all([
-        import('./options/appearance.js'),
-        import('./options/shortcuts.js'),
-        import('./options/code_notes.js'),
-        import('./options/password.js'),
-        import('./options/etapi.js'),
-        import('./options/backup.js'),
-        import('./options/sync.js'),
-        import('./options/other.js'),
-        import('./options/advanced.js')
-    ]))
-        .map(m => new m.default)
-        .forEach(tab => {
-            if (tab.optionsLoaded) {
-                tab.optionsLoaded(options)
-            }
-        });
-
-    if (openTab) {
-        $(`.nav-link[href='#options-${openTab}']`).trigger("click");
-    }
-}

src/public/app/layouts/desktop_layout.js

@@ -74,6 +74,7 @@ import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
 import InfoDialog from "../widgets/dialogs/info.js";
 import ConfirmDialog from "../widgets/dialogs/confirm.js";
 import PromptDialog from "../widgets/dialogs/prompt.js";
+import OptionsDialog from "../widgets/dialogs/options.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -222,6 +223,7 @@ export default class DesktopLayout {
             .child(new DeleteNotesDialog())
             .child(new InfoDialog())
             .child(new ConfirmDialog())
-            .child(new PromptDialog());
+            .child(new PromptDialog())
+            .child(new OptionsDialog());
     }
 }

src/public/app/services/root_command_executor.js

@@ -15,10 +15,6 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
     }
 
-    showOptionsCommand({openTab}) {
-        import("../dialogs/options.js").then(d => d.showDialog(openTab));
-    }
-
     async showSQLConsoleCommand() {
         const sqlConsoleNote = await dateNoteService.createSqlConsole();
 

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

@@ -1,4 +1,11 @@
-<div id="options-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
+"use strict";
+
+import server from '../../services/server.js';
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="options-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg modal-dialog-scrollable" style="min-width: 1000px;" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -54,4 +61,39 @@
             </div>
         </div>
     </div>
-</div>
+</div>`;
+
+
+export default class OptionsDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+    }
+
+    async showOptionsEvent({openTab}) {
+        const options = await server.get('options');
+
+        utils.openDialog(this.$widget);
+
+        (await Promise.all([
+            import('./options/appearance.js'),
+            import('./options/shortcuts.js'),
+            import('./options/code_notes.js'),
+            import('./options/password.js'),
+            import('./options/etapi.js'),
+            import('./options/backup.js'),
+            import('./options/sync.js'),
+            import('./options/other.js'),
+            import('./options/advanced.js')
+        ]))
+            .map(m => new m.default)
+            .forEach(tab => {
+                if (tab.optionsLoaded) {
+                    tab.optionsLoaded(options)
+                }
+            });
+
+        if (openTab) {
+            $(`.nav-link[href='#options-${openTab}']`).trigger("click");
+        }
+    }
+}

src/public/app/widgets/dialogs/options/advanced.js

@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4 style="margin-top: 0;">Sync</h4>

src/public/app/widgets/dialogs/options/appearance.js

@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import utils from "../../services/utils.js";
-import appContext from "../../services/app_context.js";
+import server from "../../../services/server.js";
+import utils from "../../../services/utils.js";
+import appContext from "../../../services/app_context.js";
 
 const FONT_FAMILIES = [
     { value: "theme", label: "Theme defined" },

src/public/app/widgets/dialogs/options/backup.js

@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4>Automatic backup</h4>

src/public/app/widgets/dialogs/options/code_notes.js

@@ -1,8 +1,8 @@
-import mimeTypesService from "../../services/mime_types.js";
-import options from "../../services/options.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
-import utils from "../../services/utils.js";
+import mimeTypesService from "../../../services/mime_types.js";
+import options from "../../../services/options.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
+import utils from "../../../services/utils.js";
 
 const TPL = `
 <h4>Use vim keybindings in CodeNotes (no ex mode)</h4>

src/public/app/widgets/dialogs/options/etapi.js

@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import dialogService from "../../widgets/dialog.js";
+import server from "../../../services/server.js";
+import dialogService from "../../dialog.js";
 
 const TPL = `
 <h4>ETAPI</h4>

src/public/app/widgets/dialogs/options/other.js

@@ -1,6 +1,6 @@
-import utils from "../../services/utils.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import utils from "../../../services/utils.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <style>

src/public/app/widgets/dialogs/options/password.js

@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import protectedSessionHolder from "../../../services/protected_session_holder.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h3 id="password-heading"></h3>

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

@@ -1,6 +1,6 @@
-import server from "../../services/server.js";
-import utils from "../../services/utils.js";
-import dialogService from "../../widgets/dialog.js";
+import server from "../../../services/server.js";
+import utils from "../../../services/utils.js";
+import dialogService from "../../dialog.js";
 
 const TPL = `
 <h4>Keyboard shortcuts</h4>

src/public/app/widgets/dialogs/options/sync.js

@@ -1,5 +1,5 @@
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
+import server from "../../../services/server.js";
+import toastService from "../../../services/toast.js";
 
 const TPL = `
 <h4 style="margin-top: 0px;">Sync configuration</h4>

src/views/desktop.ejs

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