tree now shows list of different cloned notes

public/javascripts/dialogs/note_history.js

@@ -61,7 +61,7 @@ const noteHistory = (function() {
 
     $(document).on('click', "a[action='note-history']", event => {
         const linkEl = $(event.target);
-        const noteId = linkEl.attr('note-id');
+        const noteId = linkEl.attr('note-path');
         const noteHistoryId = linkEl.attr('note-history-id');
 
         showNoteHistoryDialog(noteId, noteHistoryId);

public/javascripts/dialogs/recent_changes.js

@@ -34,7 +34,7 @@ const recentChanges = (function() {
                     href: 'javascript:',
                     text: 'rev'
                 }).attr('action', 'note-history')
-                    .attr('note-id', change.note_id)
+                    .attr('note-path', change.note_id)
                     .attr('note-history-id', change.note_history_id);
 
                 changesListEl.append($('<li>')

public/javascripts/link.js

@@ -22,19 +22,23 @@ const link = (function() {
         return null;
     }
 
-    function createNoteLink(noteId) {
+    function createNoteLink(noteId, noteTitle) {
+        if (!noteTitle) {
+            noteTitle = noteTree.getNoteTitle(noteId);
+        }
+
         const noteLink = $("<a>", {
             href: 'javascript:',
-            text: noteTree.getNoteTitle(noteId)
+            text: noteTitle
         }).attr('action', 'note')
-            .attr('note-id', noteId);
+            .attr('note-path', noteId);
 
         return noteLink;
     }
 
     function goToInternalNote(e) {
         const linkEl = $(e.target);
-        let noteId = linkEl.attr("note-id");
+        let noteId = linkEl.attr("note-path");
 
         if (!noteId) {
             noteId = getNotePathFromLink(linkEl.attr('href'));

public/javascripts/note_tree.js

@@ -3,6 +3,8 @@
 const noteTree = (function() {
     const noteDetailEl = $('#note-detail');
     const treeEl = $("#tree");
+    const parentListEl = $("#parent-list");
+
     let startNoteTreeId = null;
     let treeLoadTime = null;
     let clipboardNoteTreeId = null;
@@ -55,7 +57,7 @@ const noteTree = (function() {
         const title = noteIdToTitle[noteId];
 
         if (!title) {
-            throw new Error("Can't find title for noteId=" + noteId);
+            throw new Error("Can't find title for noteId='" + noteId + "'");
         }
 
         return title;
@@ -113,8 +115,6 @@ const noteTree = (function() {
             }
 
             if (childToParents[childNoteId].length > 1) {
-                console.log("Multiple classes!");
-
                 note.extraClasses += ",multiple-parents";
             }
 
@@ -184,26 +184,83 @@ const noteTree = (function() {
             childNoteId = parentNoteId;
         }
 
+        const noteId = treeUtils.getNoteIdFromNotePath(notePath);
+
         const runPath = effectivePath.reverse();
         let parentNoteId = 'root';
 
-        for (let i = 0; i < runPath.length; i++) {
-            const childNoteId = runPath[i];
+        for (const childNoteId of runPath) {
             const noteTreeId = getNoteTreeId(parentNoteId, childNoteId);
 
             const node = treeUtils.getNodeByNoteTreeId(noteTreeId);
 
-            if (i < runPath.length - 1) {
-                await node.setExpanded();
+            if (childNoteId === noteId) {
+                await node.setActive();
             }
             else {
-                await node.setActive();
+                await node.setExpanded();
             }
 
             parentNoteId = childNoteId;
         }
     }
 
+    function showParentList(noteId, node) {
+        const parents = childToParents[noteId];
+
+        if (parents.length <= 1) {
+            parentListEl.hide();
+        }
+        else {
+            parentListEl.show();
+            parentListEl.empty();
+
+            const list = $("<ul/>");
+
+            for (const parentNoteId of parents) {
+                const notePath = getSomeNotePath(parentNoteId) + '/' + noteId;
+                const title = getNotePathTitle(notePath);
+
+                let item;
+
+                if (node.getParent().data.note_id === parentNoteId) {
+                    item = $("<span/>").attr("title", "Current note").append(title);
+                }
+                else {
+                    item = link.createNoteLink(notePath, title);
+                }
+
+                list.append($("<li/>").append(item));
+            }
+
+            parentListEl.append(list);
+        }
+    }
+
+    function getNotePathTitle(notePath) {
+        const titlePath = [];
+
+        for (const path of notePath.split('/')) {
+            titlePath.push(getNoteTitle(path));
+        }
+
+        return titlePath.join(' / ');
+    }
+
+    function getSomeNotePath(noteId) {
+        const path = [];
+
+        let cur = noteId;
+
+        while (cur !== 'root') {
+            path.push(cur);
+
+            cur = childToParents[cur][0];
+        }
+
+        return path.reverse().join('/');
+    }
+
     function setExpandedToServer(noteTreeId, isExpanded) {
         const expandedNum = isExpanded ? 1 : 0;
 
@@ -277,6 +334,8 @@ const noteTree = (function() {
                 setCurrentNotePathToHash(data.node);
 
                 noteEditor.switchToNote(node.note_id);
+
+                showParentList(node.note_id, data.node);
             },
             expand: (event, data) => {
                 setExpandedToServer(getNoteTreeIdFromKey(data.node.key), true);

public/stylesheets/style.css

@@ -5,7 +5,8 @@
     display: grid;
     grid-template-areas: "header header"
                          "tree-actions title"
-                         "tree note-content";
+                         "tree note-content"
+                         "parent-list note-content";
     grid-template-columns: 2fr 5fr;
     grid-template-rows: auto
                         auto

views/index.ejs

@@ -66,6 +66,9 @@
       <div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;">
       </div>
 
+      <div id="parent-list" style="display: none;">
+      </div>
+
       <div class="hide-toggle" style="grid-area: title;">
         <div style="display: flex; align-items: center;">
           <a onclick="protected_session.protectNoteAndSendToServer()"