diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 5ace86456..ac14e2689 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -370,6 +370,8 @@ RED.clipboard = (function() { } if (tab.id === "clipboard-dialog-import-tab-clipboard") { $("#clipboard-import").focus(); + } else { + libraryBrowser.focus(); } validateImport(); } @@ -471,6 +473,7 @@ RED.clipboard = (function() { } else { $("#clipboard-dialog-export").button("option","label", RED._("clipboard.export.export")) $("#clipboard-dialog-download").hide(); + libraryBrowser.focus(); } } @@ -492,7 +495,7 @@ RED.clipboard = (function() { libraryBrowser = RED.library.createBrowser({ container: $("#clipboard-dialog-export-tab-library-browser"), - addFolderButton: true, + folderTools: true, onselect: function(file) { if (file && file.label && !file.children) { $("#clipboard-dialog-tab-library-name").val(file.label); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index 925acfba4..0b21ca146 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -51,8 +51,55 @@ var that = this; this.element.addClass('red-ui-treeList'); + this.element.attr("tabIndex",0); var wrapper = $('
',{class:'red-ui-treeList-container'}).appendTo(this.element); - + this.element.on('keydown', function(evt) { + var selected = that._topList.find(".selected").parent().data('data'); + if (!selected && (evt.keyCode === 40 || evt.keyCode === 38)) { + that.select(that._data[0]); + return; + } + var target; + switch(evt.keyCode) { + case 37: // LEFT + if (selected.children&& selected.treeList.container.hasClass("expanded")) { + selected.treeList.collapse() + } else if (selected.parent) { + target = selected.parent; + } + break; + case 38: // UP + target = that._getPreviousSibling(selected); + if (target) { + target = that._getLastDescendant(target); + } + if (!target && selected.parent) { + target = selected.parent; + } + break; + case 39: // RIGHT + if (selected.children) { + if (!selected.treeList.container.hasClass("expanded")) { + selected.treeList.expand() + } + } + break + case 40: //DOWN + if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) { + target = selected.children[0]; + } else { + target = that._getNextSibling(selected); + while (!target && selected.parent) { + selected = selected.parent; + target = that._getNextSibling(selected); + } + } + break + } + if (target) { + that.select(target); + } + }); this._data = []; this._topList = $('
    ').css({ @@ -68,11 +115,46 @@ addItem: function(container,i,item) { that._addSubtree(that._topList,container,item,0); } - }); + }) if (this.options.data) { this.data(this.options.data); } }, + _getLastDescendant: function(item) { + // Gets the last visible descendant of the item + if (!item.children || !item.treeList.container.hasClass("expanded") || item.children.length === 0) { + return item; + } + return this._getLastDescendant(item.children[item.children.length-1]); + }, + _getPreviousSibling: function(item) { + var candidates; + if (!item.parent) { + candidates = this._data; + } else { + candidates = item.parent.children; + } + var index = candidates.indexOf(item); + if (index === 0) { + return null; + } else { + return candidates[index-1]; + } + }, + _getNextSibling: function(item) { + var candidates; + if (!item.parent) { + candidates = this._data; + } else { + candidates = item.parent.children; + } + var index = candidates.indexOf(item); + if (index === candidates.length - 1) { + return null; + } else { + return candidates[index+1]; + } + }, _addChildren: function(container,parent,children,depth) { var that = this; var subtree = $('
      ').appendTo(container).editableList({ @@ -92,15 +174,21 @@ _addSubtree: function(parentList, container, item, depth) { var that = this; item.treeList = {}; + item.treeList.container = container; + item.treeList.parentList = parentList; item.treeList.remove = function() { parentList.editableList('removeItem',item); + if (item.parent) { + var index = item.parent.children.indexOf(item); + item.parent.children.splice(index,1) + } } - var labelNodeType = "