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

@@ -65,33 +65,6 @@
       </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%">
         </select>
@@ -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,16 +36,7 @@ function moveToNode(node, toNode) {
     });
 }
 
-const keybindings = {
+function deleteNode(node) {
-    "insert": function(node) {
-        let parentKey = (node.getParent() === null || node.getParent().key === "root_1") ? "root" : node.getParent().key;
-
-        createNote(node, parentKey, 'after');
-    },
-    "ctrl+insert": function(node) {
-        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,
@@ -73,6 +64,19 @@ const keybindings = {
             }
         });
     }
+}
+
+const keybindings = {
+    "insert": function(node) {
+        let parentKey = (node.getParent() === null || node.getParent().key === "root_1") ? "root" : node.getParent().key;
+
+        createNote(node, parentKey, 'after');
+    },
+    "ctrl+insert": function(node) {
+        createNote(node, node.key, 'into');
+    },
+    "del": function(node) {
+        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);
+                }
+            }
         });
     });
 });