bootstrap backed replacements for JS prompt and alert

src/public/javascripts/dialogs/info.js

@@ -0,0 +1,31 @@
+const $dialog = $("#info-dialog");
+const $infoContent = $("#info-dialog-content");
+const $okButton = $("#info-dialog-ok-button");
+
+let resolve;
+
+function info(message) {
+    glob.activeDialog = $dialog;
+
+    $infoContent.text(message);
+
+    $dialog.modal();
+
+    return new Promise((res, rej) => {
+        resolve = res;
+    });
+}
+
+$dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
+
+$dialog.on("hidden.bs.modal", () => {
+    if (resolve) {
+        resolve();
+    }
+});
+
+$okButton.click(() => $dialog.modal("hide"));
+
+export default {
+    info
+}

src/public/javascripts/dialogs/prompt.js

@@ -0,0 +1,37 @@
+const $dialog = $("#prompt-dialog");
+const $question = $("#prompt-dialog-question");
+const $answer = $("#prompt-dialog-answer");
+const $form = $("#prompt-dialog-form");
+
+let resolve;
+
+function ask(message, defaultValue = '') {
+    glob.activeDialog = $dialog;
+
+    $question.text(message);
+    $answer.val(defaultValue);
+
+    $dialog.modal();
+
+    return new Promise((res, rej) => {
+        resolve = res;
+    });
+}
+
+$dialog.on('shown.bs.modal', () => $answer.focus().select());
+
+$dialog.on("hidden.bs.modal", () => {
+    if (resolve) {
+        resolve(null);
+    }
+});
+
+$form.submit(() => {
+    resolve($answer.val());
+
+    $dialog.modal('hide');
+});
+
+export default {
+    ask
+}

src/public/javascripts/services/note_detail_relation_map.js

@@ -5,10 +5,10 @@ import libraryLoader from "./library_loader.js";
 import treeService from "./tree.js";
 import contextMenuWidget from "./context_menu.js";
 import infoService from "./info.js";
+import promptDialog from "../dialogs/prompt.js";
 
 const $component = $("#note-detail-relation-map");
 const $relationMapContainer = $("#relation-map-container");
-const $addChildNotesButton = $("#relation-map-add-child-notes");
 const $createChildNote = $("#relation-map-create-child-note");
 const $zoomInButton = $("#relation-map-zoom-in");
 const $zoomOutButton = $("#relation-map-zoom-out");
@@ -62,6 +62,10 @@ function loadMapData() {
 }
 
 async function show() {
+    const result = await promptDialog.ask("Enter name of new note:", "new note");
+
+    alert(result);
+
     $component.show();
 
     await libraryLoader.requireLibrary(libraryLoader.RELATION_MAP);
@@ -377,12 +381,6 @@ async function createNoteBox(id, title, x, y) {
     });
 }
 
-function getFreePosition() {
-    const maxY = mapData.notes.filter(note => !!note.y).map(note => note.y).reduce((a, b) => Math.max(a, b), 0);
-
-    return [100, maxY + 200];
-}
-
 async function refresh() {
     // delete all endpoints and connections
     jsPlumbInstance.deleteEveryEndpoint();
@@ -390,37 +388,6 @@ async function refresh() {
     await loadNotesAndRelations();
 }
 
-$addChildNotesButton.click(async () => {
-    const children = await server.get("notes/" + noteDetailService.getCurrentNoteId() + "/children");
-
-    let [curX, curY] = getFreePosition();
-
-    for (const child of children) {
-        if (mapData.notes.some(note => note.id === child.noteId)) {
-            // note already exists
-            continue;
-        }
-
-        mapData.notes.push({
-            id: child.noteId,
-            x: curX,
-            y: curY
-        });
-
-        if (curX > 1000) {
-            curX = 100;
-            curY += 200;
-        }
-        else {
-            curX += 200;
-        }
-    }
-
-    saveData();
-
-    await refresh();
-});
-
 let clipboard = null;
 
 $createChildNote.click(async () => {

src/views/dialogs/branch_prefix.ejs

@@ -17,7 +17,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button class="btn btn-p`rimary btn-sm">Save</button>
+        <button class="btn btn-primary btn-sm">Save</button>
       </div>
     </div>
   </div>

src/views/dialogs/info.ejs

@@ -0,0 +1,19 @@
+<div id="info-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Info message</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="info-dialog-content"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary btn-sm" id="info-dialog-ok-button">OK <kbd>enter</kbd></button>
+            </div>
+        </div>
+    </div>
+</div>

src/views/dialogs/prompt.ejs

@@ -0,0 +1,24 @@
+<div id="prompt-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <form id="prompt-dialog-form">
+                <div class="modal-header">
+                    <h5 class="modal-title mr-auto">Prompt</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="form-group">
+                        <label for="prompt-dialog-answer" id="prompt-dialog-question"></label>
+                        <input type="text" class="form-control" id="prompt-dialog-answer" placeholder="">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary btn-sm" id="prompt-dialog-ok-button">OK <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/views/index.ejs

@@ -182,6 +182,8 @@
       <% include dialogs/protected_session_password.ejs %>
       <% include dialogs/recent_changes.ejs %>
       <% include dialogs/sql_console.ejs %>
+      <% include dialogs/info.ejs %>
+      <% include dialogs/prompt.ejs %>
     </div>
 
     <script type="text/javascript">