frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Modify config node select box to have dedicated add button

Browse Source
This commit is contained in:
Nick O'Leary 2016-05-21 22:11:29 +01:00
parent eabfeb9502
commit 59a7c46482
1 changed files with 83 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
editor/js/ui/editor.js
View File

@ -218,22 +218,39 @@ RED.editor = (function() {
var newWidth; var newWidth;
if (existingWidthCSS !== '') { if (existingWidthCSS !== '') {
if (/%/.test(existingWidthCSS)) { if (/%/.test(existingWidthCSS)) {
newWidth = (input.width()-10)+"%"; newWidth = (input.width()-20)+"%";
} else { } else {
newWidth = input.width()-50; newWidth = input.width()-80;
} }
} else { } else {
newWidth = "60%"; newWidth = "55%";
} }
var select = $('<select id="'+prefix+'-'+property+'"></select>'); var select = $('<select id="'+prefix+'-'+property+'"></select>').width(newWidth);
select.width(newWidth);
input.replaceWith(select); input.replaceWith(select);
updateConfigNodeSelect(property,type,node[property],prefix); updateConfigNodeSelect(property,type,node[property],prefix);
select.after(' <a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>'); var addButton = $('<a style="margin-left: 5px;" class="editor-button"><i class="fa fa-plus"></i></a>').insertAfter(select);
$('#'+prefix+'-lookup-'+property).click(function(e) { var editButton = $('<a id="'+prefix+'-lookup-'+property+'" style="margin-left: 5px;" class="editor-button"><i class="fa fa-pencil"></i></a>').insertAfter(select);
showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
editButton.click(function(e) {
if (!$(this).hasClass('disabled')) {
showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
}
e.preventDefault(); e.preventDefault();
}); });
addButton.click(function(e) {
showEditConfigNodeDialog(property,type,"_ADD_",prefix);
e.preventDefault();
});
select.change(function() {
var options = select.children();
if (options.length > 1 || $(options[0]).val() !== "_ADD_") {
editButton.removeClass("disabled");
} else {
editButton.addClass("disabled");
}
});
var label = ""; var label = "";
var configNode = RED.nodes.node(node[property]); var configNode = RED.nodes.node(node[property]);
var node_def = RED.nodes.getType(type); var node_def = RED.nodes.getType(type);
@ -248,6 +265,64 @@ RED.editor = (function() {
input.val(label); input.val(label);
} }
function updateConfigNodeSelect(name,type,value,prefix) {
// if prefix is null, there is no config select to update
if (prefix) {
var button = $("#"+prefix+"-edit-"+name);
if (button.length) {
if (value) {
button.text(RED._("editor.configEdit"));
} else {
button.text(RED._("editor.configAdd"));
}
$("#"+prefix+"-"+name).val(value);
} else {
var select = $("#"+prefix+"-"+name);
var node_def = RED.nodes.getType(type);
select.children().remove();
var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
if (!activeWorkspace) {
activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
}
var configNodes = [];
RED.nodes.eachConfig(function(config) {
if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
var label = "";
if (typeof node_def.label == "function") {
label = node_def.label.call(config);
} else {
label = node_def.label;
}
configNodes.push({id:config.id,label:label});
}
});
configNodes.sort(function(A,B) {
if (A.label < B.label) {
return -1;
} else if (A.label > B.label) {
return 1;
}
return 0;
});
configNodes.forEach(function(cn) {
select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+cn.label+'</option>');
});
if (configNodes.length === 0) {
select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
}
window.setTimeout(function() { select.change();},50);
}
}
}
/** /**
* Create a config-node button for this property * Create a config-node button for this property
* @param node - the node being edited * @param node - the node being edited
@ -1038,62 +1113,6 @@ RED.editor = (function() {
RED.tray.show(trayOptions); RED.tray.show(trayOptions);
} }
function updateConfigNodeSelect(name,type,value,prefix) {
// if prefix is null, there is no config select to update
if (prefix) {
var button = $("#"+prefix+"-edit-"+name);
if (button.length) {
if (value) {
button.text(RED._("editor.configEdit"));
} else {
button.text(RED._("editor.configAdd"));
}
$("#"+prefix+"-"+name).val(value);
} else {
var select = $("#"+prefix+"-"+name);
var node_def = RED.nodes.getType(type);
select.children().remove();
var activeWorkspace = RED.nodes.workspace(RED.workspaces.active());
if (!activeWorkspace) {
activeWorkspace = RED.nodes.subflow(RED.workspaces.active());
}
var configNodes = [];
RED.nodes.eachConfig(function(config) {
if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
var label = "";
if (typeof node_def.label == "function") {
label = node_def.label.call(config);
} else {
label = node_def.label;
}
configNodes.push({id:config.id,label:label});
}
});
configNodes.sort(function(A,B) {
if (A.label < B.label) {
return -1;
} else if (A.label > B.label) {
return 1;
}
return 0;
});
configNodes.forEach(function(cn) {
select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+cn.label+'</option>');
});
select.append('<option value="_ADD_"'+(value===""?" selected":"")+'>'+RED._("editor.addNewType", {type:type})+'</option>');
window.setTimeout(function() { select.change();},50);
}
}
}
function showEditSubflowDialog(subflow) { function showEditSubflowDialog(subflow) {
var editing_node = subflow; var editing_node = subflow;
editStack.push(subflow); editStack.push(subflow);