converted note source dialog to new pattern

src/public/app/dialogs/note_source.js

@@ -1,40 +1,76 @@
 import appContext from "../services/app_context.js";
+import BasicWidget from "../widgets/basic_widget.js";
 import utils from "../services/utils.js";
 
-const $dialog = $("#note-source-dialog");
-const $noteSource = $("#note-source");
-
-export async function showDialog() {
-    utils.openDialog($dialog);
-
-    const noteCompletement = await appContext.tabManager.getActiveContext().getNoteComplement();
-
-    $noteSource.text(formatHtml(noteCompletement.content));
-}
-
-function formatHtml(str) {
-    const div = document.createElement('div');
-    div.innerHTML = str.trim();
-
-    return formatNode(div, 0).innerHTML.trim();
-}
-
-function formatNode(node, level) {
-    const indentBefore = new Array(level++ + 1).join('  ');
-    const indentAfter  = new Array(level - 1).join('  ');
-    let textNode;
-
-    for (let i = 0; i < node.children.length; i++) {
-        textNode = document.createTextNode('\n' + indentBefore);
-        node.insertBefore(textNode, node.children[i]);
-
-        formatNode(node.children[i], level);
-
-        if (node.lastElementChild === node.children[i]) {
-            textNode = document.createTextNode('\n' + indentAfter);
-            node.appendChild(textNode);
+const TPL = `
+<div class="note-source-dialog modal fade mx-auto" tabindex="-1" role="dialog">
+    <style>
+        .note-source-dialog .note-source {
+            height: 98%;
+            width: 100%;
+            min-height: 500px;
+            overflow: scroll;
+            line-height: 0.7;
         }
+    </style>
+
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Note source</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <textarea readonly="readonly" class="note-source"></textarea>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export default class NoteSourceDialog extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$noteSource = this.$widget.find(".note-source");
     }
 
-    return node;
+    async refresh() {
+        const noteCompletement = await appContext.tabManager.getActiveContext().getNoteComplement();
+
+        this.$noteSource.text(this.formatHtml(noteCompletement.content));
+    }
+
+    formatHtml(str) {
+        const div = document.createElement('div');
+        div.innerHTML = str.trim();
+
+        return this.formatNode(div, 0).innerHTML.trim();
+    }
+
+    formatNode(node, level) {
+        const indentBefore = new Array(level++ + 1).join('  ');
+        const indentAfter  = new Array(level - 1).join('  ');
+        let textNode;
+
+        for (let i = 0; i < node.children.length; i++) {
+            textNode = document.createTextNode('\n' + indentBefore);
+            node.insertBefore(textNode, node.children[i]);
+
+            this.formatNode(node.children[i], level);
+
+            if (node.lastElementChild === node.children[i]) {
+                textNode = document.createTextNode('\n' + indentAfter);
+                node.appendChild(textNode);
+            }
+        }
+
+        return node;
+    }
+
+    async openNoteSourceDialogEvent() {
+        await this.refresh();
+
+        utils.openDialog(this.$widget);
+    }
 }

src/public/app/layouts/desktop_layout.js

@@ -52,6 +52,7 @@ import FindWidget from "../widgets/find.js";
 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";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -178,6 +179,7 @@ export default class DesktopLayout {
                 )
             )
             .child(new BulkActionsDialog())
-            .child(new AboutDialog());
+            .child(new AboutDialog())
+            .child(new NoteSourceDialog());
     }
 }

src/public/app/services/root_command_executor.js

@@ -20,10 +20,6 @@ export default class RootCommandExecutor extends Component {
         import("../dialogs/note_revisions.js").then(d => d.showCurrentNoteRevisions());
     }
 
-    showNoteSourceCommand() {
-        import("../dialogs/note_source.js").then(d => d.showDialog());
-    }
-
     pasteMarkdownIntoTextCommand() {
         import("../dialogs/markdown_import.js").then(d => d.importMarkdownInline());
     }

src/public/app/widgets/buttons/note_actions.js

@@ -26,7 +26,7 @@ const TPL = `
     <div class="dropdown-menu dropdown-menu-right">
         <a data-trigger-command="renderActiveNote" class="dropdown-item render-note-button"><kbd data-command="renderActiveNote"></kbd> Re-render note</a>
         <a data-trigger-command="findInText" class="dropdown-item find-in-text-button">Search in note <kbd data-command="findInText"></a>
-        <a data-trigger-command="showNoteSource" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> Note source</a>
+        <a data-trigger-command="openNoteSourceDialog" class="dropdown-item show-source-button"><kbd data-command="showNoteSource"></kbd> Note source</a>
         <a data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button"><kbd data-command="openNoteExternally"></kbd> Open note externally</a>
         <a class="dropdown-item import-files-button">Import files</a>
         <a class="dropdown-item export-note-button">Export note</a>

src/public/app/widgets/buttons/show_note_source.js

@@ -10,7 +10,7 @@ export default class ShowNoteSourceButton extends ButtonWidget {
 
         this.icon('bx bx-code')
             .title("Show Note Source")
-            .command("showNoteSource")
+            .command("openNoteSourceDialog")
             .titlePlacement("bottom");
     }
 }

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

@@ -54,8 +54,6 @@ const TPL = `
 export default class AboutDialog extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
-
-        this.$dialog = this.$widget.find(".about-dialog");
         this.$appVersion = this.$widget.find(".app-version");
         this.$dbVersion = this.$widget.find(".db-version");
         this.$syncVersion = this.$widget.find(".sync-version");

src/public/stylesheets/style.css

@@ -169,12 +169,6 @@ div.ui-tooltip {
     float: right;
 }
 
-#note-source {
-    height: 98%;
-    width: 100%;
-    overflow: scroll;
-}
-
 .suppressed {
     display: none;
 }

src/views/desktop.ejs

@@ -24,7 +24,6 @@
 <%- include('dialogs/jump_to_note.ejs') %>
 <%- include('dialogs/markdown_import.ejs') %>
 <%- include('dialogs/note_revisions.ejs') %>
-<%- include('dialogs/note_source.ejs') %>
 <%- include('dialogs/options.ejs') %>
 <%- include('dialogs/protected_session_password.ejs') %>
 <%- include('dialogs/recent_changes.ejs') %>

src/views/dialogs/note_source.ejs

@@ -1,15 +0,0 @@
-<div id="note-source-dialog" class="modal fade mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">Note source</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <textarea id="note-source" readonly="readonly" style="min-height: 500px;"></textarea>
-            </div>
-        </div>
-    </div>
-</div>