mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Move type-library dialogs to new treeList style
This commit is contained in:
Nick O'Leary
parent
3263008379
commit
6f37d5ca5c
@ -464,7 +464,7 @@ var RED = (function() {
|
||||
menuOptions.push(null);
|
||||
menuOptions.push({id:"menu-item-import",label:RED._("menu.label.import"),options:[
|
||||
{id:"menu-item-import-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-import-dialog"},
|
||||
{id:"menu-item-import-library",label:RED._("menu.label.library"),options:[]}
|
||||
{id:"menu-item-import-library",label:RED._("menu.label.library"),onselect:"core:library-import"}
|
||||
]});
|
||||
menuOptions.push({id:"menu-item-export",label:RED._("menu.label.export"),options:[
|
||||
{id:"menu-item-export-clipboard",label:RED._("menu.label.clipboard"),onselect:"core:show-export-dialog"},
|
||||
|
||||
@ -71,7 +71,10 @@ RED.clipboard = (function() {
|
||||
$( this ).dialog( "close" );
|
||||
} else {
|
||||
var flowToExport = $("#clipboard-export").val();
|
||||
var selectedPath = libraryBrowser.getPath();
|
||||
var selectedPath = libraryBrowser.getSelected();
|
||||
if (!selectedPath.children) {
|
||||
selectedPath = selectedPath.parent;
|
||||
}
|
||||
var filename = $("#clipboard-dialog-tab-library-name").val().trim();
|
||||
var saveFlow = function() {
|
||||
$.ajax({
|
||||
@ -80,7 +83,6 @@ RED.clipboard = (function() {
|
||||
data: flowToExport,
|
||||
contentType: "application/json; charset=utf-8"
|
||||
}).done(function() {
|
||||
// RED.library.loadFlowLibrary();
|
||||
$(dialog).dialog( "close" );
|
||||
RED.notify(RED._("library.exportedToLibrary"),"success");
|
||||
}).fail(function(xhr,textStatus,err) {
|
||||
@ -409,7 +411,7 @@ RED.clipboard = (function() {
|
||||
container: $("#clipboard-dialog-export-tab-library-browser"),
|
||||
addFolderButton: true,
|
||||
onselect: function(file) {
|
||||
if (file && file.label) {
|
||||
if (file && file.label && !file.children) {
|
||||
$("#clipboard-dialog-tab-library-name").val(file.label);
|
||||
}
|
||||
}
|
||||
@ -421,17 +423,17 @@ RED.clipboard = (function() {
|
||||
label: label,
|
||||
path: root
|
||||
};
|
||||
result.children = [];
|
||||
|
||||
if (list.f) {
|
||||
result.files = list.f.map(function(f) {
|
||||
return {
|
||||
list.f.forEach(function(f) {
|
||||
result.children.push({
|
||||
icon: 'fa fa-file-o',
|
||||
label: f,
|
||||
path: root+f
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
result.children = [];
|
||||
if (list.d) {
|
||||
for (var l in list.d) {
|
||||
if (list.d.hasOwnProperty(l)) {
|
||||
@ -441,6 +443,15 @@ RED.clipboard = (function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
result.children.sort(function(A,B){
|
||||
if (A.children && !B.children) {
|
||||
return -1;
|
||||
} else if (!A.children && B.children) {
|
||||
return 1;
|
||||
} else {
|
||||
return A.label.localeCompare(B.label);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
@ -263,6 +263,5 @@ RED.menu = (function() {
|
||||
addItem: addItem,
|
||||
removeItem: removeItem,
|
||||
setAction: setAction
|
||||
//TODO: add an api for replacing a submenu - see library.js:loadFlowLibrary
|
||||
}
|
||||
})();
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
this.data(this.options.data);
|
||||
}
|
||||
},
|
||||
_addChildren: function(container,children,depth) {
|
||||
_addChildren: function(container,parent,children,depth) {
|
||||
var that = this;
|
||||
var subtree = $('<ol>').appendTo(container).editableList({
|
||||
addButton: false,
|
||||
@ -84,6 +84,7 @@
|
||||
}
|
||||
});
|
||||
for (var i=0;i<children.length;i++) {
|
||||
children[i].parent = parent;
|
||||
subtree.editableList('addItem',children[i])
|
||||
}
|
||||
return subtree;
|
||||
@ -122,7 +123,7 @@
|
||||
var spinner;
|
||||
item.children(item,function(children) {
|
||||
childrenAdded = true;
|
||||
item.treeList.childList = that._addChildren(container,children,depth);
|
||||
item.treeList.childList = that._addChildren(container,parent,children,depth);
|
||||
if (spinner) {
|
||||
spinner.remove();
|
||||
}
|
||||
@ -180,7 +181,7 @@
|
||||
}
|
||||
if (item.children) {
|
||||
if (Array.isArray(item.children)) {
|
||||
item.treeList.childList = that._addChildren(container,item.children,depth);
|
||||
item.treeList.childList = that._addChildren(container,item,item.children,depth);
|
||||
}
|
||||
if (item.expanded) {
|
||||
item.treeList.expand();
|
||||
|
||||
@ -21,15 +21,20 @@ RED.library = (function() {
|
||||
var libraryEditor;
|
||||
var activeLibrary;
|
||||
|
||||
|
||||
var _libraryLookup = '<div id="node-dialog-library-load" class="hide">'+
|
||||
'<form class="form-horizontal">'+
|
||||
'<div style="height: 500px; position:relative; ">'+
|
||||
'<div id="node-dialog-library-load-browser"></div>'+
|
||||
'<div id="node-dialog-library-load-preview">'+
|
||||
'<div id="node-dialog-library-load-preview-details">'+
|
||||
'<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
|
||||
'<div id="node-dialog-library-load-panes">'+
|
||||
'<div class="red-ui-panel" id="node-dialog-library-load-browser"></div>'+
|
||||
'<div class="red-ui-panel">'+
|
||||
'<div id="node-dialog-library-load-preview">'+
|
||||
'<div class="red-ui-panel" id="node-dialog-library-load-preview-text"></div>'+
|
||||
'<div class="red-ui-panel" id="node-dialog-library-load-preview-details">'+
|
||||
'<table id="node-dialog-library-load-preview-details-table" class="node-info"></table>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'<div id="node-dialog-library-load-preview-text"></div>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</form>'+
|
||||
@ -54,7 +59,10 @@ RED.library = (function() {
|
||||
name = RED._("library.unnamedType",{type:activeLibrary.type});
|
||||
}
|
||||
var filename = $("#node-dialog-library-save-filename").val().trim()
|
||||
var selectedPath = saveLibraryBrowser.getPath();
|
||||
var selectedPath = saveLibraryBrowser.getSelected();
|
||||
if (!selectedPath.children) {
|
||||
selectedPath = selectedPath.parent;
|
||||
}
|
||||
var queryArgs = [];
|
||||
var data = {};
|
||||
for (var i=0; i<activeLibrary.fields.length; i++) {
|
||||
@ -116,98 +124,40 @@ RED.library = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
function loadFlowLibrary() {
|
||||
$.getJSON("library/flows",function(data) {
|
||||
//console.log(data);
|
||||
|
||||
var buildMenu = function(data,root) {
|
||||
var i;
|
||||
var li;
|
||||
var a;
|
||||
var ul = document.createElement("ul");
|
||||
if (root === "") {
|
||||
ul.id = "menu-item-import-library-submenu";
|
||||
}
|
||||
ul.className = "dropdown-menu";
|
||||
if (data.d) {
|
||||
for (i in data.d) {
|
||||
if (data.d.hasOwnProperty(i)) {
|
||||
li = document.createElement("li");
|
||||
li.className = "dropdown-submenu pull-left";
|
||||
a = document.createElement("a");
|
||||
a.href="#";
|
||||
var label = i.replace(/^@.*\//,"").replace(/^node-red-contrib-/,"").replace(/^node-red-node-/,"").replace(/-/g," ").replace(/_/g," ");
|
||||
a.innerText = label;
|
||||
li.appendChild(a);
|
||||
li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i));
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (data.f) {
|
||||
for (i in data.f) {
|
||||
if (data.f.hasOwnProperty(i)) {
|
||||
li = document.createElement("li");
|
||||
a = document.createElement("a");
|
||||
a.href="#";
|
||||
a.innerText = data.f[i];
|
||||
a.flowName = root+(root!==""?"/":"")+data.f[i];
|
||||
a.onclick = function() {
|
||||
$.get('library/flows/'+this.flowName, function(data) {
|
||||
RED.view.importNodes(data);
|
||||
});
|
||||
};
|
||||
li.appendChild(a);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ul;
|
||||
};
|
||||
var examples;
|
||||
if (data.d && data.d._examples_) {
|
||||
examples = data.d._examples_;
|
||||
delete data.d._examples_;
|
||||
}
|
||||
var menu = buildMenu(data,"");
|
||||
$("#menu-item-import-examples").remove();
|
||||
if (examples) {
|
||||
RED.menu.addItem("menu-item-import",{id:"menu-item-import-examples",label:RED._("menu.label.examples"),options:[]})
|
||||
$("#menu-item-import-examples-submenu").replaceWith(buildMenu(examples,"_examples_"));
|
||||
}
|
||||
//TODO: need an api in RED.menu for this
|
||||
$("#menu-item-import-library-submenu").replaceWith(menu);
|
||||
});
|
||||
}
|
||||
|
||||
function loadLibraryFolder(url,root,done) {
|
||||
$.getJSON("library/"+url+"/"+root,function(data) {
|
||||
var files = [];
|
||||
var items = data.reduce(function(acc,d) {
|
||||
var items = data.map(function(d) {
|
||||
if (typeof d === "string") {
|
||||
acc.push({
|
||||
return {
|
||||
icon: 'fa fa-folder',
|
||||
label: d,
|
||||
path: root+d+"/",
|
||||
children: function(item,done) {
|
||||
loadLibraryFolder(url,root+d+"/", function(files,children) {
|
||||
item.files = files;
|
||||
loadLibraryFolder(url,root+d+"/", function(children) {
|
||||
item.children = children; // TODO: should this be done by treeList for us
|
||||
done(children);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
} else {
|
||||
files.push({
|
||||
return {
|
||||
icon: 'fa fa-file-o',
|
||||
label: d.fn,
|
||||
path: root+d.fn,
|
||||
props: d
|
||||
})
|
||||
};
|
||||
}
|
||||
return acc;
|
||||
},[]);
|
||||
done(files,items);
|
||||
});
|
||||
items.sort(function(A,B){
|
||||
if (A.children && !B.children) {
|
||||
return -1;
|
||||
} else if (!A.children && B.children) {
|
||||
return 1;
|
||||
} else {
|
||||
return A.label.localeCompare(B.label);
|
||||
}
|
||||
});
|
||||
done(items);
|
||||
});
|
||||
}
|
||||
|
||||
@ -231,7 +181,6 @@ RED.library = (function() {
|
||||
|
||||
function createUI(options) {
|
||||
var libraryData = {};
|
||||
var selectedLibraryItem = null;
|
||||
var elementPrefix = options.elementPrefix || "node-input-";
|
||||
|
||||
// Orion editor has set/getText
|
||||
@ -259,7 +208,7 @@ RED.library = (function() {
|
||||
|
||||
$('#node-input-'+options.type+'-menu-open-library').click(function(e) {
|
||||
activeLibrary = options;
|
||||
loadLibraryFolder(options.url, "", function(files,items) {
|
||||
loadLibraryFolder(options.url, "", function(items) {
|
||||
var listing = [{
|
||||
icon: 'fa fa-archive',
|
||||
label: "Local",
|
||||
@ -271,13 +220,14 @@ RED.library = (function() {
|
||||
label: options.type,
|
||||
path: options.type+"/",
|
||||
expanded: true,
|
||||
children: items,
|
||||
files: files
|
||||
children: items
|
||||
}]
|
||||
}]
|
||||
loadLibraryBrowser.data(listing);
|
||||
});
|
||||
libraryEditor = ace.edit('node-dialog-library-load-preview-text');
|
||||
libraryEditor = ace.edit('node-dialog-library-load-preview-text',{
|
||||
useWorker: false
|
||||
});
|
||||
libraryEditor.setTheme("ace/theme/tomorrow");
|
||||
if (options.mode) {
|
||||
libraryEditor.getSession().setMode(options.mode);
|
||||
@ -290,7 +240,6 @@ RED.library = (function() {
|
||||
libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
|
||||
libraryEditor.$blockScrolling = Infinity;
|
||||
|
||||
|
||||
$( "#node-dialog-library-load" ).dialog("option","title",RED._("library.typeLibrary", {type:options.type})).dialog( "open" );
|
||||
e.preventDefault();
|
||||
});
|
||||
@ -305,7 +254,7 @@ RED.library = (function() {
|
||||
}
|
||||
$("#node-dialog-library-save-filename").attr("value",filename+".js");
|
||||
|
||||
loadLibraryFolder(options.url, "", function(files,items) {
|
||||
loadLibraryFolder(options.url, "", function(items) {
|
||||
var listing = [{
|
||||
icon: 'fa fa-archive',
|
||||
label: "Local",
|
||||
@ -317,8 +266,7 @@ RED.library = (function() {
|
||||
label: options.type,
|
||||
path: options.type+"/",
|
||||
expanded: true,
|
||||
children: items,
|
||||
files: files
|
||||
children: items
|
||||
}]
|
||||
}]
|
||||
saveLibraryBrowser.data(listing);
|
||||
@ -337,20 +285,15 @@ RED.library = (function() {
|
||||
|
||||
function createBrowser(options) {
|
||||
var panes = $('<div class="red-ui-library-browser"></div>').appendTo(options.container);
|
||||
var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
|
||||
var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
|
||||
// var dirsPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
|
||||
// var filesPane = $('<div class="red-ui-panel"></div>').appendTo(panes);
|
||||
//
|
||||
// '<div id="clipboard-dialog-export-tab-library-panes">'+
|
||||
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-sources-pane"></div>'+
|
||||
// '<div class="red-ui-panel" id="clipboard-dialog-tab-library-listing-pane"></div>'+
|
||||
// '</div>'+
|
||||
RED.panels.create({
|
||||
container:panes,
|
||||
dir: "horizontal"
|
||||
});
|
||||
var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(dirsPane)
|
||||
// RED.panels.create({
|
||||
// container:panes,
|
||||
// dir: "horizontal"
|
||||
// });
|
||||
var dirList = $("<div>").css({width: "100%", height: "100%"}).appendTo(panes)
|
||||
.treeList({}).on('treelistselect', function(event, item) {
|
||||
fileList.treeList('data',item.files||[]);
|
||||
if (addButton) {
|
||||
if (item.writable === false) {
|
||||
addButton.prop('disabled', true);
|
||||
@ -358,21 +301,21 @@ RED.library = (function() {
|
||||
addButton.prop('disabled', false);
|
||||
}
|
||||
}
|
||||
if (options.onpathselect) {
|
||||
options.onpathselect(item);
|
||||
if (options.onselect) {
|
||||
options.onselect(item);
|
||||
}
|
||||
}).on('treelistchildrenloaded', function(event) {
|
||||
var selected = dirList.treeList('selected');
|
||||
fileList.treeList('data',selected.files||[]);
|
||||
});
|
||||
var addButton;
|
||||
if (options.addFolderButton) {
|
||||
var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(dirsPane)
|
||||
var tools = $("<div>").css({position: "absolute",bottom:"3px",left:"3px"}).appendTo(panes)
|
||||
addButton= $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-plus"> <i class="fa fa-folder-o"></button>').appendTo(tools).click(function(e) {
|
||||
var selected = dirList.treeList('selected');
|
||||
|
||||
var defaultFolderName = "new-folder";
|
||||
var defaultFolderNameMatches = {};
|
||||
|
||||
var selected = dirList.treeList('selected');
|
||||
if (!selected.children) {
|
||||
selected = selected.parent;
|
||||
}
|
||||
selected.children.forEach(function(c) {
|
||||
if (/^new-folder/.test(c.label)) {
|
||||
defaultFolderNameMatches[c.label] = true
|
||||
@ -435,17 +378,8 @@ RED.library = (function() {
|
||||
});
|
||||
}
|
||||
|
||||
var fileList = $("<div>").css({width: "100%", height: "100%"}).appendTo(filesPane)
|
||||
.treeList({}).on('treelistselect', function(event, item) {
|
||||
if (options.onselect) {
|
||||
options.onselect(item);
|
||||
}
|
||||
})
|
||||
return {
|
||||
getFile: function() {
|
||||
return fileList.treeList('selected');
|
||||
},
|
||||
getPath: function() {
|
||||
getSelected: function() {
|
||||
return dirList.treeList('selected');
|
||||
},
|
||||
data: function(content) {
|
||||
@ -494,17 +428,18 @@ RED.library = (function() {
|
||||
saveLibraryBrowser = RED.library.createBrowser({
|
||||
container: $("#node-dialog-library-save-browser"),
|
||||
addFolderButton: true,
|
||||
onpathselect: function(item) {
|
||||
try {
|
||||
onselect: function(item) {
|
||||
if (item.label) {
|
||||
if (!item.children) {
|
||||
$("#node-dialog-library-save-filename").val(item.label);
|
||||
item = item.parent;
|
||||
}
|
||||
if (item.writable === false) {
|
||||
$("#node-dialog-library-save-button").button("disable");
|
||||
} else {
|
||||
$("#node-dialog-library-save-button").button("enable");
|
||||
}
|
||||
} catch(err) {}
|
||||
},
|
||||
onselect: function(file) {
|
||||
$("#node-dialog-library-save-filename").val(file.label);
|
||||
}
|
||||
}
|
||||
});
|
||||
$("#node-dialog-library-save-filename").keyup(function() { validateExportFilename($(this))});
|
||||
@ -527,11 +462,12 @@ RED.library = (function() {
|
||||
class: "primary",
|
||||
click: function() {
|
||||
if (selectedLibraryItem) {
|
||||
for (var i=0; i<options.fields.length; i++) {
|
||||
var field = options.fields[i];
|
||||
var elementPrefix = activeLibrary.elementPrefix || "node-input-";
|
||||
for (var i=0; i<activeLibrary.fields.length; i++) {
|
||||
var field = activeLibrary.fields[i];
|
||||
$("#"+elementPrefix+field).val(selectedLibraryItem[field]);
|
||||
}
|
||||
options.editor.setValue(libraryEditor.getValue(),-1);
|
||||
activeLibrary.editor.setValue(libraryEditor.getValue(),-1);
|
||||
}
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
@ -551,8 +487,8 @@ RED.library = (function() {
|
||||
container: $("#node-dialog-library-load-browser"),
|
||||
onselect: function(file) {
|
||||
var table = $("#node-dialog-library-load-preview-details-table").empty();
|
||||
|
||||
if (file && file.label) {
|
||||
selectedLibraryItem = file.props;
|
||||
if (file && file.label && !file.children) {
|
||||
$.get("library/"+activeLibrary.url+"/"+file.path, function(data) {
|
||||
//TODO: nls + sanitize
|
||||
var propRow = $('<tr class="node-info-node-row"><td>Type</td><td></td></tr>').appendTo(table);
|
||||
@ -575,14 +511,16 @@ RED.library = (function() {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (RED.settings.theme("menu.menu-item-import-library") !== false) {
|
||||
loadFlowLibrary();
|
||||
}
|
||||
RED.panels.create({
|
||||
container:$("#node-dialog-library-load-panes"),
|
||||
dir: "horizontal"
|
||||
});
|
||||
RED.panels.create({
|
||||
container:$("#node-dialog-library-load-preview"),
|
||||
dir: "vertical"
|
||||
});
|
||||
},
|
||||
create: createUI,
|
||||
loadFlowLibrary: loadFlowLibrary,
|
||||
createBrowser:createBrowser,
|
||||
export: exportFlow
|
||||
}
|
||||
|
||||
@ -98,6 +98,7 @@
|
||||
|
||||
|
||||
.red-ui-library-browser {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.red-ui-treeList-container {
|
||||
@ -130,29 +131,22 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#node-dialog-library-load-browser {
|
||||
height: 200px;
|
||||
border: 1px solid $primary-border-color;
|
||||
margin-bottom: 10px;
|
||||
// border: 1px solid $primary-border-color;
|
||||
}
|
||||
#node-dialog-library-load-panes {
|
||||
border: 1px solid $primary-border-color;
|
||||
}
|
||||
|
||||
|
||||
#node-dialog-library-load-preview {
|
||||
height: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#node-dialog-library-load-preview-text {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: calc(50% - 5px);
|
||||
border: 1px solid $primary-border-color;
|
||||
}
|
||||
#node-dialog-library-load-preview-details {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: calc(50% - 5px);
|
||||
margin-right: 10px;
|
||||
border: 1px solid $primary-border-color;
|
||||
|
||||
.node-info-node-row:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@ -41,13 +41,13 @@
|
||||
|
||||
.red-ui-panels.red-ui-panels-horizontal {
|
||||
height: 100%;
|
||||
.red-ui-panel {
|
||||
&>.red-ui-panel {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: calc(50% - 4px);
|
||||
}
|
||||
.red-ui-panels-separator {
|
||||
&>.red-ui-panels-separator {
|
||||
vertical-align: top;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user