From 390568d7438880baa191608bcd853280e0692f36 Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Mon, 4 Sep 2017 13:22:24 -0400
Subject: [PATCH] added context menu on tree items - implemented cut, paste
 into, paste after

---
 TODO                                    |   1 +
 src/templates/app.html                  |  56 ++++++-----
 static/js/tree.js                       | 128 ++++++++++++++++++------
 static/lib/jquery.ui-contextmenu.min.js |   4 +
 4 files changed, 134 insertions(+), 55 deletions(-)
 create mode 100644 static/lib/jquery.ui-contextmenu.min.js

diff --git a/TODO b/TODO
index c5b2b0271..c8f1523c6 100644
--- a/TODO
+++ b/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.)
diff --git a/src/templates/app.html b/src/templates/app.html
index ec08d7725..49a311292 100644
--- a/src/templates/app.html
+++ b/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>
diff --git a/static/js/tree.js b/static/js/tree.js
index 3c603da93..5708fb7f7 100644
--- a/static/js/tree.js
+++ b/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);
+                }
+            }
         });
     });
 });
diff --git a/static/lib/jquery.ui-contextmenu.min.js b/static/lib/jquery.ui-contextmenu.min.js
new file mode 100644
index 000000000..6b5746495
--- /dev/null
+++ b/static/lib/jquery.ui-contextmenu.min.js
@@ -0,0 +1,4 @@
+/*! jQuery UI context menu plugin - v1.18.1 - 2017-08-28 |  https://github.com/mar10/jquery-ui-contextmenu |  Copyright (c) 2013 -2017 Martin Wendt; Licensed MIT */
+
+!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery","jquery-ui/ui/widgets/menu"],a):a(jQuery)}(function(a){"use strict";var b="onselectstart"in document.createElement("div"),c=a.ui.menu.version.match(/^(\d)\.(\d+)/),d={major:parseInt(c[1],10),minor:parseInt(c[2],10)},e=d.major<2&&d.minor<=10,f=d.major<2&&d.minor<=11;a.widget("moogle.contextmenu",{version:"1.18.1",options:{addClass:"ui-contextmenu",closeOnWindowBlur:!0,autoFocus:!1,autoTrigger:!0,delegate:null,hide:{effect:"fadeOut",duration:"fast"},ignoreParentSelect:!0,menu:null,position:null,preventContextMenuForPopup:!1,preventSelect:!1,show:{effect:"slideDown",duration:"fast"},taphold:!1,uiMenuOptions:{},beforeOpen:a.noop,blur:a.noop,close:a.noop,create:a.noop,createMenu:a.noop,focus:a.noop,open:a.noop,select:a.noop},_create:function(){var c,d,e,f=this.options;if(this.$headStyle=null,this.$menu=null,this.menuIsTemp=!1,this.currentTarget=null,this.extraData={},this.previousFocus=null,null==f.delegate&&a.error("ui-contextmenu: Missing required option `delegate`."),f.preventSelect){e=(a(this.element).is(document)?a("body"):this.element).uniqueId().attr("id"),c="#"+e+" "+f.delegate+" { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }",this.$headStyle=a("<style class='moogle-contextmenu-style' />").prop("type","text/css").appendTo("head");try{this.$headStyle.html(c)}catch(g){this.$headStyle[0].styleSheet.cssText=c}b&&this.element.on("selectstart"+this.eventNamespace,f.delegate,function(a){a.preventDefault()})}this._createUiMenu(f.menu),d="contextmenu"+this.eventNamespace,f.taphold&&(d+=" taphold"+this.eventNamespace),this.element.on(d,f.delegate,a.proxy(this._openMenu,this))},_destroy:function(){this.element.off(this.eventNamespace),this._createUiMenu(null),this.$headStyle&&(this.$headStyle.remove(),this.$headStyle=null)},_createUiMenu:function(b){var c,d,e=this.options;this.isOpen()&&(c=this.currentTarget,d=this.extraData,this._closeMenu(!0),this.currentTarget=c,this.extraData=d),this.menuIsTemp?this.$menu.remove():this.$menu&&this.$menu.menu("destroy").removeClass(this.options.addClass).hide(),this.$menu=null,this.menuIsTemp=!1,b&&(a.isArray(b)?(this.$menu=a.moogle.contextmenu.createMenuMarkup(b),this.menuIsTemp=!0):"string"==typeof b?this.$menu=a(b):this.$menu=b,this.$menu.hide().addClass(e.addClass).menu(a.extend(!0,{},e.uiMenuOptions,{items:"> :not(.ui-widget-header)",blur:a.proxy(e.blur,this),create:a.proxy(e.createMenu,this),focus:a.proxy(e.focus,this),select:a.proxy(function(b,c){var d,f=a.moogle.contextmenu.isMenu(c.item),g=c.item.data("actionHandler");c.cmd=c.item.attr("data-command"),c.target=a(this.currentTarget),c.extraData=this.extraData,f&&e.ignoreParentSelect||(d=this._trigger.call(this,"select",b,c),g&&(d=g.call(this,b,c)),d!==!1&&this._closeMenu.call(this),b.preventDefault())},this)})))},_openMenu:function(b,c){var d,e,f,g=this.options,h=g.position,i=this,j=!!b.isTrigger;if(g.autoTrigger||j){if(b.preventDefault(),this.currentTarget=b.target,this.extraData=b._extraData||{},f={menu:this.$menu,target:a(this.currentTarget),extraData:this.extraData,originalEvent:b,result:null},!c){if(d=this._trigger("beforeOpen",b,f),e=f.result&&a.isFunction(f.result.promise)?f.result:null,f.result=null,d===!1)return this.currentTarget=null,!1;if(e)return e.done(function(){i._openMenu(b,!0)}),this.currentTarget=null,!1;f.menu=this.$menu}a(document).on("keydown"+this.eventNamespace,function(b){b.which===a.ui.keyCode.ESCAPE&&i._closeMenu()}).on("mousedown"+this.eventNamespace+" touchstart"+this.eventNamespace,function(b){a(b.target).closest(".ui-menu-item").length||i._closeMenu()}),a(window).on("blur"+this.eventNamespace,function(a){g.closeOnWindowBlur&&i._closeMenu()}),a.isFunction(h)&&(h=h(b,f)),h=a.extend({my:"left top",at:"left bottom",of:void 0===b.pageX?b.target:b,collision:"fit"},h),this._updateEntries(this.$menu),this.$menu.show().css({position:"absolute",left:0,top:0}).position(h).hide(),g.preventContextMenuForPopup&&this.$menu.on("contextmenu"+this.eventNamespace,function(a){a.preventDefault()}),this._show(this.$menu,g.show,function(){var c;g.autoFocus&&(i.previousFocus=a(b.target),c=i.$menu.children("li.ui-menu-item").not(".ui-state-disabled").first(),i.$menu.menu("focus",null,c).focus()),i._trigger.call(i,"open",b,f)})}},_closeMenu:function(b){var c=this,d=!b&&this.options.hide,e={menu:this.$menu,target:a(this.currentTarget),extraData:this.extraData};a(document).off("mousedown"+this.eventNamespace).off("touchstart"+this.eventNamespace).off("keydown"+this.eventNamespace),a(window).off("blur"+this.eventNamespace),c.currentTarget=null,c.extraData={},this.$menu?(this.$menu.off("contextmenu"+this.eventNamespace),this._hide(this.$menu,d,function(){c.previousFocus&&(c.previousFocus.focus(),c.previousFocus=null),c._trigger("close",null,e)})):c._trigger("close",null,e)},_setOption:function(b,c){switch(b){case"menu":this.replaceMenu(c)}a.Widget.prototype._setOption.apply(this,arguments)},_getMenuEntry:function(a){return this.$menu.find("li[data-command="+a+"]")},close:function(){this.isOpen()&&this._closeMenu()},_updateEntries:function(){var b=this,c={menu:this.$menu,target:a(this.currentTarget),extraData:this.extraData};a.each(this.$menu.find(".ui-menu-item"),function(d,e){var f=a(e),g=f.data("disabledHandler"),h=g?g({type:"disabled"},c):null;c.item=f,c.cmd=f.attr("data-command"),null!=h&&(b.enableEntry(c.cmd,!h),b.showEntry(c.cmd,"hide"!==h)),g=f.data("titleHandler"),h=g?g({type:"title"},c):null,null!=h&&b.setTitle(c.cmd,""+h),g=f.data("tooltipHandler"),h=g?g({type:"tooltip"},c):null,null!=h&&f.attr("title",""+h)})},enableEntry:function(a,b){this._getMenuEntry(a).toggleClass("ui-state-disabled",b===!1)},getEntry:function(a){return this._getMenuEntry(a)},getEntryWrapper:function(a){return this._getMenuEntry(a).find(">[role=menuitem]").addBack("[role=menuitem]")},getMenu:function(){return this.$menu},isOpen:function(){return!!this.$menu&&!!this.currentTarget},open:function(b,c){c=c||{};var d=b&&b.type&&b.target,e=d?b:{},f=d?b.target:b,g=jQuery.Event("contextmenu",{target:a(f).get(0),pageX:e.pageX,pageY:e.pageY,originalEvent:d?b:void 0,_extraData:c});return this.element.trigger(g)},replaceMenu:function(a){this._createUiMenu(a)},setEntry:function(b,c){var d,e=this._getMenuEntry(b);return"string"==typeof c?(window.console&&window.console.warn("setEntry(cmd, t) with a plain string title is deprecated since v1.18.Use setTitle(cmd, '"+c+"') instead."),this.setTitle(b,c)):(e.empty(),c.cmd=c.cmd||b,a.moogle.contextmenu.createEntryMarkup(c,e),a.isArray(c.children)&&(d=a("<ul/>").appendTo(e),a.moogle.contextmenu.createMenuMarkup(c.children,d)),e.removeClass("ui-menu-item"),void this.getMenu().menu("refresh"))},setIcon:function(a,b){return this.updateEntry(a,{uiIcon:b})},setTitle:function(a,b){return this.updateEntry(a,{title:b})},showEntry:function(a,b){this._getMenuEntry(a).toggle(b!==!1)},updateEntry:function(b,c){var d,e,f=this._getMenuEntry(b);void 0!==c.title&&a.moogle.contextmenu.updateTitle(f,""+c.title),void 0!==c.tooltip&&(null===c.tooltip?f.removeAttr("title"):f.attr("title",c.tooltip)),void 0!==c.uiIcon&&(e=this.getEntryWrapper(b),d=e.find("span.ui-icon").not(".ui-menu-icon"),d.remove(),c.uiIcon&&e.append(a("<span class='ui-icon' />").addClass(c.uiIcon))),void 0!==c.hide?f.toggle(!c.hide):void 0!==c.show&&f.toggle(!!c.show),void 0!==c.data&&f.data(c.data),void 0===c.disabled&&(c.disabled=f.hasClass("ui-state-disabled")),c.setClass?(f.hasClass("ui-menu-item")&&(c.setClass+=" ui-menu-item"),f.removeClass(),f.addClass(c.setClass)):c.addClass&&f.addClass(c.addClass),f.toggleClass("ui-state-disabled",!!c.disabled)}}),a.extend(a.moogle.contextmenu,{createEntryMarkup:function(b,c){var d=null;c.attr("data-command",b.cmd),/[^\-\u2014\u2013\s]/.test(b.title)?(e?d=a("<a/>",{html:""+b.title,href:"#"}).appendTo(c):f?(c.html(""+b.title),d=c):d=a("<div/>",{html:""+b.title}).appendTo(c),b.uiIcon&&d.append(a("<span class='ui-icon' />").addClass(b.uiIcon)),a.each(["action","disabled","title","tooltip"],function(d,e){a.isFunction(b[e])&&c.data(e+"Handler",b[e])}),b.disabled===!0&&c.addClass("ui-state-disabled"),b.isHeader&&c.addClass("ui-widget-header"),b.addClass&&c.addClass(b.addClass),a.isPlainObject(b.data)&&c.data(b.data),"string"==typeof b.tooltip&&c.attr("title",b.tooltip)):c.text(b.title)},createMenuMarkup:function(b,c){var d,e,f,g;for(null==c&&(c=a("<ul class='ui-helper-hidden' />").appendTo("body")),d=0;d<b.length;d++)e=b[d],g=a("<li/>").appendTo(c),a.moogle.contextmenu.createEntryMarkup(e,g),a.isArray(e.children)&&(f=a("<ul/>").appendTo(g),a.moogle.contextmenu.createMenuMarkup(e.children,f));return c},isMenu:function(a){return e?a.has(">a[aria-haspopup='true']").length>0:f?a.is("[aria-haspopup='true']"):a.has(">div[aria-haspopup='true']").length>0},replaceFirstTextNodeChild:function(a,b){var c=a.find(">span.ui-icon,>ul.ui-menu").detach();a.empty().html(b).append(c)},updateTitle:function(b,c){e?a.moogle.contextmenu.replaceFirstTextNodeChild(a("a",b),c):f?a.moogle.contextmenu.replaceFirstTextNodeChild(b,c):a.moogle.contextmenu.replaceFirstTextNodeChild(a("div",b),c)}})});
+//# sourceMappingURL=jquery.ui-contextmenu.min.js.map
\ No newline at end of file