hover tooltip for internal links

src/templates/app.html

@@ -211,6 +211,8 @@
     <div id="recent-changes-dialog" title="Recent changes" style="display: none; padding: 20px;">
     </div>
 
+    <div id="tooltip" style="display: none;"></div>
+
     <script type="text/javascript">
       const baseApiUrl = 'api/';
     </script>

static/js/add_link.js

@@ -70,14 +70,23 @@ $(document).on('dblclick', '.note-editable a', e => {
     goToInternalNote(e);
 });
 
+function getNoteIdFromLink(url) {
+    const noteIdMatch = /app#([A-Za-z0-9]{22})/.exec(url);
+
+    if (noteIdMatch === null) {
+        return null;
+    }
+    else {
+        return noteIdMatch[1];
+    }
+}
+
 function goToInternalNote(e, callback) {
     const targetUrl = $(e.target).attr("href");
 
-    const noteIdMatch = /app#([A-Za-z0-9]{22})/.exec(targetUrl);
-
-    if (noteIdMatch !== null) {
-        const noteId = noteIdMatch[1];
+    const noteId = getNoteIdFromLink(targetUrl);
 
+    if (noteId !== null) {
         getNodeByKey(noteId).setActive();
 
         e.preventDefault();

static/js/encryption.js

@@ -106,7 +106,7 @@ function resetEncryptionSession() {
     globalDataKey = null;
 
     if (globalCurrentNote.detail.encryption > 0) {
-        loadNote(globalCurrentNote.detail.note_id);
+        loadNoteToEditor(globalCurrentNote.detail.note_id);
 
         for (const noteId of globalAllNoteIds) {
             const note = getNodeByKey(noteId);
@@ -280,7 +280,7 @@ function encryptSubTree(noteId) {
         },
             note => {
                 if (note.detail.note_id === globalCurrentNote.detail.note_id) {
-                    loadNote(note.detail.note_id);
+                    loadNoteToEditor(note.detail.note_id);
                 }
                 else {
                     setTreeBasedOnEncryption(note);
@@ -307,7 +307,7 @@ function decryptSubTree(noteId) {
         },
             note => {
                 if (note.detail.note_id === globalCurrentNote.detail.note_id) {
-                    loadNote(note.detail.note_id);
+                    loadNoteToEditor(note.detail.note_id);
                 }
                 else {
                     setTreeBasedOnEncryption(note);

static/js/init.js

@@ -53,4 +53,31 @@ $.ui.autocomplete.filter = (array, terms) => {
     console.log("Search took " + (new Date().getTime() - startDate.getTime()) + "ms");
 
     return results;
-};
+};
+
+$(document).tooltip({
+    items: ".note-editable a",
+    content: function(callback) {
+        const noteId = getNoteIdFromLink($(this).attr("href"));
+
+        if (noteId !== null) {
+            loadNote(noteId, note => {
+                callback(note.detail.note_text);
+            });
+        }
+    },
+    close: function(event, ui)
+    {
+        ui.tooltip.hover(function()
+        {
+            $(this).stop(true).fadeTo(400, 1);
+        },
+        function()
+        {
+            $(this).fadeOut('400', function()
+            {
+                $(this).remove();
+            });
+        });
+    }
+});

static/js/note.js

@@ -191,7 +191,7 @@ function setNoteBackgroundIfEncrypted(note) {
     setTreeBasedOnEncryption(note);
 }
 
-function loadNote(noteId) {
+function loadNoteToEditor(noteId) {
     $.get(baseApiUrl + 'notes/' + noteId).then(note => {
         globalCurrentNote = note;
 
@@ -225,8 +225,6 @@ function loadNote(noteId) {
 
             document.location.hash = noteId;
 
-            $(window).resize(); // to trigger resizing of editor
-
             addRecentNote(noteId, note.detail.note_id);
 
             noteChangeDisabled = false;
@@ -234,4 +232,16 @@ function loadNote(noteId) {
             setNoteBackgroundIfEncrypted(note);
         });
     });
+}
+
+function loadNote(noteId, callback) {
+    $.get(baseApiUrl + 'notes/' + noteId).then(note => {
+        if (note.detail.encryption > 0 && !isEncryptionAvailable()) {
+            return;
+        }
+
+        decryptNoteIfNecessary(note);
+
+        callback(note);
+    });
 }

static/js/tree.js

@@ -135,7 +135,7 @@ $(() => {
             activate: (event, data) => {
                 const node = data.node.data;
 
-                saveNoteIfChanged(() => loadNote(node.note_id));
+                saveNoteIfChanged(() => loadNoteToEditor(node.note_id));
             },
             expand: (event, data) => {
                 setExpandedToServer(data.node.key, true);

static/style.css

@@ -102,4 +102,10 @@ span.fancytree-node.encrypted.fancytree-folder > span.fancytree-icon {
 #header .btn-xs {
     margin-bottom: 2px;
     margin-right: 8px;
+}
+
+div.ui-tooltip {
+    max-width: 600px;
+    max-height: 600px;
+    overflow: auto;
 }