added context menu on tree items - implemented cut, paste into, paste after

TODO

@@ -1,5 +1,6 @@
 - logout detection
 - conflict detection
+- deleting cloned nodes ends with 500 (probably only on folders)
 
 Later:
 - context menu on items (add subnote etc.)

src/templates/app.html

@@ -64,33 +64,6 @@
         </div>
       </div>
     </div>
-    
-    <script src="stat/lib/jquery.min.js"></script>
-
-    <link href="stat/lib/jqueryui/jquery-ui.min.css" rel="stylesheet">
-    <script src="stat/lib/jqueryui/jquery-ui.min.js"></script>
-
-    <!-- Include Fancytree skin and library -->
-    <link href="stat/lib/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
-    <script src="stat/lib/fancytree/jquery.fancytree-all.js"></script>
-
-    <link href="stat/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
-    <script src="stat/lib/bootstrap/js/bootstrap.js"></script> 
-
-    <link href="stat/lib/summernote/summernote.css" rel="stylesheet">
-    <script src="stat/lib/summernote/summernote.js"></script>
-
-    <script src="stat/lib/jquery.hotkeys.js"></script>
-    <script src="stat/lib/jquery.fancytree.hotkeys.js"></script>
-
-    <!-- https://github.com/ricmoo/aes-js -->
-    <script src="stat/lib/aes.js"></script>
-    <!-- https://github.com/dcodeIO/bcrypt.js -->
-    <script src="stat/lib/bcrypt.min.js"></script>
-    <!-- https://github.com/emn178/js-sha256 -->
-    <script src="stat/lib/sha256.min.js"></script>
-
-    <link href="stat/style.css" rel="stylesheet">
 
     <div id="recentNotesDialog" title="Recent notes" style="display: none;">
       <select id="recentNotesSelectBox" size="15" style="width: 100%">
@@ -128,6 +101,35 @@
       const baseUrl = '';
     </script>
 
+        <script src="stat/lib/jquery.min.js"></script>
+
+    <link href="stat/lib/jqueryui/jquery-ui.min.css" rel="stylesheet">
+    <script src="stat/lib/jqueryui/jquery-ui.min.js"></script>
+
+    <!-- Include Fancytree skin and library -->
+    <link href="stat/lib/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
+    <script src="stat/lib/fancytree/jquery.fancytree-all.js"></script>
+
+    <link href="stat/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <script src="stat/lib/bootstrap/js/bootstrap.js"></script>
+
+    <link href="stat/lib/summernote/summernote.css" rel="stylesheet">
+    <script src="stat/lib/summernote/summernote.js"></script>
+
+    <script src="stat/lib/jquery.hotkeys.js"></script>
+    <script src="stat/lib/jquery.fancytree.hotkeys.js"></script>
+
+    <script src="stat/lib/jquery.ui-contextmenu.min.js"></script>
+
+    <!-- https://github.com/ricmoo/aes-js -->
+    <script src="stat/lib/aes.js"></script>
+    <!-- https://github.com/dcodeIO/bcrypt.js -->
+    <script src="stat/lib/bcrypt.min.js"></script>
+    <!-- https://github.com/emn178/js-sha256 -->
+    <script src="stat/lib/sha256.min.js"></script>
+
+    <link href="stat/style.css" rel="stylesheet">
+
     <script src="stat/js/init.js"></script>
     <script src="stat/js/tree.js"></script>
     <script src="stat/js/note.js"></script>

static/js/tree.js

@@ -36,6 +36,36 @@ function moveToNode(node, toNode) {
     });
 }
 
+function deleteNode(node) {
+    if (confirm('Are you sure you want to delete note "' + node.title + '"?')) {
+        $.ajax({
+            url: baseUrl + 'notes/' + node.key,
+            type: 'DELETE',
+            success: function () {
+                if (node.getParent() !== null && node.getParent().getChildren().length <= 1) {
+                    node.getParent().folder = false;
+                    node.getParent().renderTitle();
+                }
+
+                globalAllNoteIds = globalAllNoteIds.filter(e => e !== node.key);
+
+                // remove from recent notes
+                recentNotes = recentNotes.filter(note => note !== node.key);
+
+                let next = node.getNextSibling();
+                if (!next) {
+                    next = node.getParent();
+                }
+
+                node.remove();
+
+                // activate next element after this one is deleted so we don't lose focus
+                next.setActive();
+            }
+        });
+    }
+}
+
 const keybindings = {
     "insert": function(node) {
         let parentKey = (node.getParent() === null || node.getParent().key === "root_1") ? "root" : node.getParent().key;
@@ -46,33 +76,7 @@ const keybindings = {
         createNote(node, node.key, 'into');
     },
     "del": function(node) {
-        if (confirm('Are you sure you want to delete note "' + node.title + '"?')) {
-            $.ajax({
-                url: baseUrl + 'notes/' + node.key,
-                type: 'DELETE',
-                success: function() {
-                    if (node.getParent() !== null && node.getParent().getChildren().length <= 1) {
-                        node.getParent().folder = false;
-                        node.getParent().renderTitle();
-                    }
-
-                    globalAllNoteIds = globalAllNoteIds.filter(e => e !== node.key);
-
-                    // remove from recent notes
-                    recentNotes = recentNotes.filter(note => note !== node.key);
-
-                    let next = node.getNextSibling();
-                    if (!next) {
-                        next = node.getParent();
-                    }
-
-                    node.remove();
-
-                    // activate next element after this one is deleted so we don't lose focus
-                    next.setActive();
-                }
-            });
-        }
+        deleteNode(node);
     },
     "shift+up": function(node) {
         const beforeNode = node.getPrevSibling();
@@ -141,6 +145,8 @@ function getFullName(noteId) {
     return path.reverse().join(" > ");
 }
 
+let globalClipboardNoteId = null;
+
 $(function(){
     $.get(baseUrl + 'tree').then(resp => {
         const notes = resp.notes;
@@ -279,7 +285,73 @@ $(function(){
                         throw new Exception("Unknown hitMode=" + data.hitMode);
                     }
                 }
-              },
+            }
+        });
+
+        globalTree.contextmenu({
+            delegate: "span.fancytree-title",
+            autoFocus: true,
+            menu: [
+                {title: "Insert note here", cmd: "insertNoteHere", uiIcon: "ui-icon-pencil"},
+                {title: "Insert child note", cmd: "insertChildNote", uiIcon: "ui-icon-pencil"},
+                {title: "Delete", cmd: "delete", uiIcon: "ui-icon-trash"},
+                {title: "----"},
+                {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
+                {title: "Copy / clone", cmd: "copy", uiIcon: "ui-icon-copy"},
+                {title: "Paste after", cmd: "pasteAfter", uiIcon: "ui-icon-clipboard"},
+                {title: "Paste into", cmd: "pasteInto", uiIcon: "ui-icon-clipboard"}
+            ],
+            beforeOpen: function (event, ui) {
+                const node = $.ui.fancytree.getNode(ui.target);
+                // Modify menu entries depending on node status
+                globalTree.contextmenu("enableEntry", "pasteAfter", globalClipboardNoteId !== null);
+                globalTree.contextmenu("enableEntry", "pasteInto", globalClipboardNoteId !== null);
+
+                // Activate node on right-click
+                node.setActive();
+                // Disable tree keyboard handling
+                ui.menu.prevKeyboard = node.tree.options.keyboard;
+                node.tree.options.keyboard = false;
+            },
+            close: function (event, ui) {
+                // Restore tree keyboard handling
+                // console.log("close", event, ui, this)
+                // Note: ui is passed since v1.15.0
+                const node = $.ui.fancytree.getNode(ui.target);
+
+                // in case of move operations this can be null
+                if (node) {
+                    node.tree.options.keyboard = ui.menu.prevKeyboard;
+                    node.setFocus();
+                }
+            },
+            select: function (event, ui) {
+                const node = $.ui.fancytree.getNode(ui.target);
+
+                if (ui.cmd === "cut") {
+                    globalClipboardNoteId = node.key;
+                }
+                else if (ui.cmd === "pasteAfter") {
+                    const subjectNode = getNodeByKey(globalClipboardNoteId);
+
+                    moveAfterNode(subjectNode, node);
+
+                    globalClipboardNoteId = null;
+                }
+                else if (ui.cmd === "pasteInto") {
+                    const subjectNode = getNodeByKey(globalClipboardNoteId);
+
+                    moveToNode(subjectNode, node);
+
+                    globalClipboardNoteId = null;
+                }
+                else if (ui.cmd === "delete") {
+                    deleteNode(node);
+                }
+                else {
+                    console.log("Unknown command: " + ui.cmd);
+                }
+            }
         });
     });
 });