migrated all remaining dialogs to bootstrap modals, #203

src/public/javascripts/dialogs/add_link.js

@@ -39,10 +39,7 @@ async function showDialog() {
         setLinkType('selected-to-current');
     }
 
-    $dialog.dialog({
-        modal: true,
-        width: 800
-    });
+    $dialog.modal();
 
     $autoComplete.val('').focus();
     $clonePrefix.val('');
@@ -106,7 +103,7 @@ $form.submit(() => {
         if (linkType === 'html') {
             const linkTitle = $linkTitle.val();
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
 
             const linkHref = '#' + notePath;
 
@@ -124,14 +121,14 @@ $form.submit(() => {
 
             cloningService.cloneNoteTo(noteId, noteDetailService.getCurrentNoteId(), prefix);
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
         }
         else if (linkType === 'current-to-selected') {
             const prefix = $clonePrefix.val();
 
             cloningService.cloneNoteTo(noteDetailService.getCurrentNoteId(), noteId, prefix);
 
-            $dialog.dialog("close");
+            $dialog.modal('hide');
         }
     }
 

src/public/javascripts/dialogs/attributes.js

@@ -223,6 +223,11 @@ function AttributesModel() {
 }
 
 async function showDialog() {
+    // lazily apply bindings on first use
+    if (!ko.dataFor($dialog[0])) {
+        ko.applyBindings(attributesModel, $dialog[0]);
+    }
+
     glob.activeDialog = $dialog;
 
     await attributesModel.loadAttributes();
@@ -230,8 +235,6 @@ async function showDialog() {
     $dialog.modal();
 }
 
-ko.applyBindings(attributesModel, $dialog[0]);
-
 $dialog.on('focus', '.attribute-name', function (e) {
     if (!$(this).hasClass("ui-autocomplete-input")) {
         $(this).autocomplete({

src/public/javascripts/dialogs/branch_prefix.js

@@ -3,20 +3,17 @@ import server from '../services/server.js';
 import treeCache from "../services/tree_cache.js";
 import treeUtils from "../services/tree_utils.js";
 
-const $dialog = $("#edit-tree-prefix-dialog");
-const $form = $("#edit-tree-prefix-form");
-const $treePrefixInput = $("#tree-prefix-input");
-const $noteTitle = $('#tree-prefix-note-title');
+const $dialog = $("#branch-prefix-dialog");
+const $form = $("#branch-prefix-form");
+const $treePrefixInput = $("#branch-prefix-input");
+const $noteTitle = $('#branch-prefix-note-title');
 
 let branchId;
 
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    await $dialog.dialog({
-        modal: true,
-        width: 600
-    });
+    $dialog.modal();
 
     const currentNode = treeService.getCurrentNode();
 
@@ -37,7 +34,7 @@ async function savePrefix() {
 
     await treeService.setPrefix(branchId, prefix);
 
-    $dialog.dialog("close");
+    $dialog.modal('hide');
 }
 
 $form.submit(() => {

src/public/javascripts/dialogs/event_log.js

@@ -8,11 +8,7 @@ const $list = $("#event-log-list");
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
-        modal: true,
-        width: 800,
-        height: 700
-    });
+    $dialog.modal();
 
     const result = await server.get('event-log');
 

src/public/javascripts/dialogs/jump_to_note.js

@@ -29,7 +29,7 @@ async function showDialog() {
 
             treeService.activateNote(notePath);
 
-            $dialog.dialog('close');
+            $dialog.modal('hide');
         }
     });
 
@@ -47,7 +47,7 @@ function showInFullText(e) {
     searchNotesService.showSearch();
     searchNotesService.doSearch(searchText);
 
-    $dialog.dialog('close');
+    $dialog.modal('hide');
 }
 
 function showRecentNotes() {

src/public/javascripts/dialogs/note_revisions.js

@@ -16,11 +16,7 @@ async function showCurrentNoteRevisions() {
 async function showNoteRevisionsDialog(noteId, noteRevisionId) {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
-        modal: true,
-        width: 800,
-        height: 700
-    });
+    $dialog.modal();
 
     $list.empty();
     $content.empty();

src/public/javascripts/dialogs/note_source.js

@@ -6,11 +6,7 @@ const $noteSource = $("#note-source");
 function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
-        modal: true,
-        width: 800,
-        height: 500
-    });
+    $dialog.modal();
 
     const noteText = noteDetailService.getCurrentNote().content;
 

src/public/javascripts/dialogs/options.js

@@ -20,10 +20,7 @@ async function showDialog() {
 
     const options = await server.get('options');
 
-    $dialog.dialog({
-        modal: true,
-        width: 1000
-    });
+    $dialog.modal();
 
     $tabs.tabs();
 

src/public/javascripts/dialogs/recent_changes.js

@@ -3,22 +3,19 @@ import utils from '../services/utils.js';
 import server from '../services/server.js';
 
 const $dialog = $("#recent-changes-dialog");
+const $content = $("#recent-changes-content");
 
 async function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
-        modal: true,
-        width: 800,
-        height: 700
-    });
+    $dialog.modal();
 
-    const result = await server.get('recent-changes/');
+    const result = await server.get('recent-changes');
 
-    $dialog.empty();
+    $content.empty();
 
     if (result.length === 0) {
-        $dialog.append("No changes yet ...");
+        $content.append("No changes yet ...");
     }
 
     const groupedByDate = groupByDate(result);
@@ -31,13 +28,6 @@ async function showDialog() {
         for (const change of dayChanges) {
             const formattedTime = utils.formatTime(utils.parseDate(change.dateModifiedTo));
 
-            const revLink = $("<a>", {
-                href: 'javascript:',
-                text: 'rev'
-            }).attr('data-action', 'note-revision')
-                .attr('data-note-path', change.noteId)
-                .attr('data-note-revision-id', change.noteRevisionId);
-
             let noteLink;
 
             if (change.current_isDeleted) {
@@ -49,11 +39,10 @@ async function showDialog() {
 
             changesListEl.append($('<li>')
                 .append(formattedTime + ' - ')
-                .append(noteLink)
-                .append(' (').append(revLink).append(')'));
+                .append(noteLink));
         }
 
-        $dialog.append(dayEl);
+        $content.append(dayEl);
     }
 }
 

src/public/javascripts/dialogs/sql_console.js

@@ -11,17 +11,12 @@ const $resultBody = $('#sql-console-results tbody');
 
 let codeEditor;
 
+$dialog.on("shown.bs.modal", e => initEditor());
+
 function showDialog() {
     glob.activeDialog = $dialog;
 
-    $dialog.dialog({
-        modal: true,
-        width: $(window).width(),
-        height: $(window).height(),
-        open: function() {
-            initEditor();
-        }
-    });
+    $dialog.modal();
 }
 
 async function initEditor() {