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

Add 'none' placeholder for empty port label form

Browse Source
This commit is contained in:
Nick O'Leary 2017-05-15 16:26:42 +01:00
parent f97f92c297
commit 5b5f9aa01d
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 88 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
editor/js/ui/editor.js
View File

@ -563,14 +563,26 @@ RED.editor = (function() {
var inputCount = node.inputs || node._def.inputs || 0; var inputCount = node.inputs || node._def.inputs || 0;
var children = inputsDiv.children(); var children = inputsDiv.children();
if (children.length < inputCount) { var childCount = children.length;
for (i = children.length;i<inputCount;i++) { if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
childCount--;
}
if (childCount < inputCount) {
if (childCount === 0) {
// remove the 'none' placeholder
$(children[0]).remove();
}
for (i = childCount;i<inputCount;i++) {
buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv); buildLabelRow("input",i,"",inputPlaceholder).appendTo(inputsDiv);
} }
} else if (children.length > inputCount) { } else if (childCount > inputCount) {
for (i=inputCount;i<children.length;i++) { for (i=inputCount;i<childCount;i++) {
$(children[i]).remove(); $(children[i]).remove();
} }
if (outputCount === 0) {
buildLabelRow().appendTo(inputsDiv);
}
} }
var outputCount; var outputCount;
@ -582,12 +594,24 @@ RED.editor = (function() {
} else if (isNaN(formOutputs)) { } else if (isNaN(formOutputs)) {
var outputMap = JSON.parse(formOutputs); var outputMap = JSON.parse(formOutputs);
var keys = Object.keys(outputMap); var keys = Object.keys(outputMap);
children = outputsDiv.children();
childCount = children.length;
if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
childCount--;
}
outputCount = 0; outputCount = 0;
var rows = []; var rows = [];
keys.forEach(function(p) { keys.forEach(function(p) {
var row = $("#node-label-form-output-"+p).parent(); var row = $("#node-label-form-output-"+p).parent();
if (row.length === 0 && outputMap[p] !== -1) { if (row.length === 0 && outputMap[p] !== -1) {
if (childCount === 0) {
$(children[0]).remove();
childCount = -1;
}
row = buildLabelRow("output",p,"",outputPlaceholder); row = buildLabelRow("output",p,"",outputPlaceholder);
} else {
row.detach();
} }
if (outputMap[p] !== -1) { if (outputMap[p] !== -1) {
outputCount++; outputCount++;
@ -597,35 +621,56 @@ RED.editor = (function() {
rows.sort(function(A,B) { rows.sort(function(A,B) {
return A.i-B.i; return A.i-B.i;
}) })
outputsDiv.children().detach();
rows.forEach(function(r,i) { rows.forEach(function(r,i) {
r.r.find("label").html((i+1)+"."); r.r.find("label").html((i+1)+".");
r.r.appendTo(outputsDiv); r.r.appendTo(outputsDiv);
}) })
if (rows.length === 0) {
buildLabelRow("output",i,"").appendTo(outputsDiv);
} else {
}
} else { } else {
outputCount = Math.max(0,parseInt(formOutputs)); outputCount = Math.max(0,parseInt(formOutputs));
} }
children = outputsDiv.children(); children = outputsDiv.children();
if (children.length < outputCount) { childCount = children.length;
for (i = children.length;i<outputCount;i++) { if (childCount === 1 && $(children[0]).hasClass('node-label-form-none')) {
childCount--;
}
if (childCount < outputCount) {
if (childCount === 0) {
// remove the 'none' placeholder
$(children[0]).remove();
}
for (i = childCount;i<outputCount;i++) {
buildLabelRow("output",i,"").appendTo(outputsDiv); buildLabelRow("output",i,"").appendTo(outputsDiv);
} }
} else if (children.length > outputCount) { } else if (childCount > outputCount) {
for (i=outputCount;i<children.length;i++) { for (i=outputCount;i<childCount;i++) {
$(children[i]).remove(); $(children[i]).remove();
} }
if (outputCount === 0) {
buildLabelRow().appendTo(outputsDiv);
}
} }
} }
function buildLabelRow(type, index, value, placeHolder) { function buildLabelRow(type, index, value, placeHolder) {
var result = $('<div>',{style:"margin: 5px 0px"}); var result = $('<div>',{class:"node-label-form-row"});
if (type === undefined) {
$('<span>').html("none").appendTo(result);
result.addClass("node-label-form-none");
} else {
result.addClass("");
var id = "node-label-form-"+type+"-"+index; var id = "node-label-form-"+type+"-"+index;
$('<label>',{for:id,style:"margin-right: 20px; text-align: right; width: 30px;"}).html((index+1)+".").appendTo(result); $('<label>',{for:id}).html((index+1)+".").appendTo(result);
var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result); var input = $('<input>',{type:"text",id:id, placeholder: placeHolder}).val(value).appendTo(result);
var clear = $('<button class="editor-button editor-button-small" style="margin-left: 10px"><i class="fa fa-times"></i></button>').appendTo(result); var clear = $('<button class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(result);
clear.click(function(evt) { clear.click(function(evt) {
evt.preventDefault(); evt.preventDefault();
input.val(""); input.val("");
}) })
}
return result; return result;
} }
function buildLabelForm(container,node) { function buildLabelForm(container,node) {
@ -645,23 +690,23 @@ RED.editor = (function() {
var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel"); var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
var i,row; var i,row;
$('<div class="form-row"><i class="fa fa-tag"></i> <span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm); $('<div class="form-row"><span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
var inputsDiv = $("#node-label-form-inputs"); var inputsDiv = $("#node-label-form-inputs");
if (inputCount > 0) { if (inputCount > 0) {
for (i=0;i<inputCount;i++) { for (i=0;i<inputCount;i++) {
buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv); buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
} }
} else { } else {
buildLabelRow().appendTo(inputsDiv);
} }
$('<div class="form-row"><i class="fa fa-tag"></i> <span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm); $('<div class="form-row"><span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
var outputsDiv = $("#node-label-form-outputs"); var outputsDiv = $("#node-label-form-outputs");
if (outputCount > 0) { if (outputCount > 0) {
for (i=0;i<outputCount;i++) { for (i=0;i<outputCount;i++) {
buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv); buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
} }
} else { } else {
buildLabelRow().appendTo(outputsDiv);
} }
} }

21
editor/sass/editor.scss
View File

@ -297,3 +297,24 @@
position: absolute; position: absolute;
top: -3000px; top: -3000px;
} }
.node-label-form-row {
margin: 5px 0;
label {
margin-right: 20px;
text-align: right;
width: 30px;
}
button {
margin-left: 10px;
}
input {
width: calc(100% - 100px);
}
}
.node-label-form-none {
span {
padding-left: 50px;
width: 100px;
color: #999;
}
}