From c4ed01128b9e524d478c9dccb88dbb3e766ff14d Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Wed, 11 Oct 2017 20:37:27 -0400
Subject: [PATCH] hover tooltip for internal links

---
 src/templates/app.html  |  2 ++
 static/js/add_link.js   | 17 +++++++++++++----
 static/js/encryption.js |  6 +++---
 static/js/init.js       | 29 ++++++++++++++++++++++++++++-
 static/js/note.js       | 16 +++++++++++++---
 static/js/tree.js       |  2 +-
 static/style.css        |  6 ++++++
 7 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/src/templates/app.html b/src/templates/app.html
index ed3bdf2c2..cfc3b29af 100644
--- a/src/templates/app.html
+++ b/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>
diff --git a/static/js/add_link.js b/static/js/add_link.js
index 0b92d4e75..479c4d15a 100644
--- a/static/js/add_link.js
+++ b/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();
diff --git a/static/js/encryption.js b/static/js/encryption.js
index e8eefb4f7..6ddbc2278 100644
--- a/static/js/encryption.js
+++ b/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);
diff --git a/static/js/init.js b/static/js/init.js
index 2781f2f02..03ff96976 100644
--- a/static/js/init.js
+++ b/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;
-};
\ No newline at end of file
+};
+
+$(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();
+            });
+        });
+    }
+});
\ No newline at end of file
diff --git a/static/js/note.js b/static/js/note.js
index 30acf7e2f..bb75994a7 100644
--- a/static/js/note.js
+++ b/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);
+    });
 }
\ No newline at end of file
diff --git a/static/js/tree.js b/static/js/tree.js
index 4e50b8d7c..8fcee19df 100644
--- a/static/js/tree.js
+++ b/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);
diff --git a/static/style.css b/static/style.css
index d310848ef..a744bfceb 100644
--- a/static/style.css
+++ b/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;
 }
\ No newline at end of file