converted help dialog to new pattern

src/public/app/dialogs/help.js

@@ -1,7 +0,0 @@
-import utils from "../services/utils.js";
-
-const $dialog = $("#help-dialog");
-
-export async function showDialog() {
-    utils.openDialog($dialog);
-}

src/public/app/layouts/desktop_layout.js

@@ -53,6 +53,7 @@ import TocWidget from "../widgets/toc.js";
 import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
 import AboutDialog from "../widgets/dialogs/about.js";
 import NoteSourceDialog from "../dialogs/note_source.js";
+import HelpDialog from "../widgets/dialogs/help.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -180,6 +181,7 @@ export default class DesktopLayout {
             )
             .child(new BulkActionsDialog())
             .child(new AboutDialog())
-            .child(new NoteSourceDialog());
+            .child(new NoteSourceDialog())
+            .child(new HelpDialog());
     }
 }

src/public/app/services/root_command_executor.js

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

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

@@ -1,4 +1,8 @@
-<div id="help-dialog" class="modal" tabindex="-1" role="dialog">
+import utils from "../../services/utils.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="help-dialog modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document" style="min-width: 100%; height: 100%; margin: 0;">
         <div class="modal-content" style="height: auto;">
             <div class="modal-header">
@@ -146,4 +150,14 @@
             </div>
         </div>
     </div>
-</div>
+</div>`;
+
+export default class HelpDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+    }
+
+    showHelpEvent() {
+        utils.openDialog(this.$widget);
+    }
+}

src/views/desktop.ejs

@@ -30,7 +30,6 @@
 <%- include('dialogs/info.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>
-<%- include('dialogs/help.ejs') %>
 <%- include('dialogs/clone_to.ejs') %>
 <%- include('dialogs/move_to.ejs') %>
 <%- include('dialogs/backend_log.ejs') %>