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

Update info side bar with node description section

Browse Source
This commit is contained in:
Nick O'Leary 2018-09-21 11:38:48 +01:00
parent 5fc3ca0e23
commit d9089b798c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
editor/js/nodes.js
View File

@ -354,7 +354,6 @@ RED.nodes = (function() {
subflows[sf.id] = sf; subflows[sf.id] = sf;
RED.nodes.registerType("subflow:"+sf.id, { RED.nodes.registerType("subflow:"+sf.id, {
defaults:{name:{value:""}}, defaults:{name:{value:""}},
info: sf.info,
icon: function() { return sf.icon||"subflow.png" }, icon: function() { return sf.icon||"subflow.png" },
category: sf.category || "subflows", category: sf.category || "subflows",
inputs: sf.in.length, inputs: sf.in.length,

94
editor/js/ui/tab-info.js
View File

@ -28,8 +28,9 @@ RED.sidebar.info = (function() {
var content; var content;
var sections; var sections;
var nodeSection; var propertiesSection;
var infoSection; var infoSection;
var helpSection;
var tipBox; var tipBox;
var expandedSections = { var expandedSections = {
@ -49,18 +50,25 @@ RED.sidebar.info = (function() {
container: stackContainer container: stackContainer
}).hide(); }).hide();
nodeSection = sections.add({ propertiesSection = sections.add({
title: RED._("sidebar.info.info"), title: RED._("sidebar.info.info"),
collapsible: true collapsible: true
}); });
nodeSection.expand(); propertiesSection.expand();
infoSection = sections.add({ infoSection = sections.add({
title: RED._("sidebar.info.nodeHelp"), title: RED._("sidebar.info.desc"),
collapsible: true collapsible: true
}); });
infoSection.expand(); infoSection.expand();
infoSection.content.css("padding","6px"); infoSection.content.css("padding","6px");
infoSection.container.css("border-bottom","none");
helpSection = sections.add({
title: RED._("sidebar.info.nodeHelp"),
collapsible: true
});
helpSection.expand();
helpSection.content.css("padding","6px");
var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content); var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content);
tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer); tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
@ -116,12 +124,13 @@ RED.sidebar.info = (function() {
return; return;
} }
sections.show(); sections.show();
$(nodeSection.content).empty(); $(propertiesSection.content).empty();
$(infoSection.content).empty(); $(infoSection.content).empty();
$(helpSection.content).empty();
var propRow; var propRow;
var table = $('<table class="node-info"></table>').appendTo(nodeSection.content); var table = $('<table class="node-info"></table>').appendTo(propertiesSection.content);
var tableBody = $('<tbody>').appendTo(table); var tableBody = $('<tbody>').appendTo(table);
var subflowNode; var subflowNode;
var subflowUserCount; var subflowUserCount;
@ -138,14 +147,23 @@ RED.sidebar.info = (function() {
RED.projects.editProject(); RED.projects.editProject();
}); });
} }
propertiesSection.container.show();
infoSection.container.show(); infoSection.container.show();
helpSection.container.show();
if (node === null) { if (node === null) {
return; return;
} else if (Array.isArray(node)) { } else if (Array.isArray(node)) {
// Multiple things selected
// - hide help and info sections
helpSection.container.hide();
infoSection.container.hide(); infoSection.container.hide();
// - show the count of selected nodes
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.selection")+"</td><td></td></tr>").appendTo(tableBody);
$(propRow.children()[1]).text(RED._("sidebar.info.nodes",{count:node.length})) $(propRow.children()[1]).text(RED._("sidebar.info.nodes",{count:node.length}))
} else { } else {
// A single 'thing' selected.
// Check to see if this is a subflow or subflow instance
var m = /^subflow(:(.+))?$/.exec(node.type); var m = /^subflow(:(.+))?$/.exec(node.type);
if (m) { if (m) {
if (m[2]) { if (m[2]) {
@ -163,6 +181,7 @@ RED.sidebar.info = (function() {
}); });
} }
if (node.type === "tab" || node.type === "subflow") { if (node.type === "tab" || node.type === "subflow") {
// If nothing is selected, but we're on a flow or subflow tab.
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'</td><td></td></tr>').appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.tabName")+"</td><td></td></tr>").appendTo(tableBody);
@ -170,16 +189,11 @@ RED.sidebar.info = (function() {
if (node.type === "tab") { if (node.type === "tab") {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled")) $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
} else if (node.type === "subflow") {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
var category = node.category||"subflows";
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
} }
} else { } else {
// An actual node is selected in the editor - build up its properties table
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
if (node.type !== "subflow" && node.type !== "unknown" && node.name) { if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
propRow = $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody); propRow = $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
$('<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]); $('<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
@ -191,7 +205,7 @@ RED.sidebar.info = (function() {
$('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1])) $('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
} }
} }
if (!m && node.type != "subflow" && node.type != "comment") { if (!m && node.type != "subflow") {
var defaults; var defaults;
if (node.type === 'unknown') { if (node.type === 'unknown') {
defaults = {}; defaults = {};
@ -206,7 +220,7 @@ RED.sidebar.info = (function() {
if (defaults) { if (defaults) {
var count = 0; var count = 0;
for (var n in defaults) { for (var n in defaults) {
if (n != "name" && defaults.hasOwnProperty(n)) { if (n != "name" && n != "info" && defaults.hasOwnProperty(n)) {
var val = node[n]; var val = node[n];
var type = typeof val; var type = typeof val;
count++; count++;
@ -257,33 +271,33 @@ RED.sidebar.info = (function() {
$('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody); $('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
} }
var infoText = ""; var helpText = "";
if (!subflowNode && node.type !== "comment" && node.type !== "tab") { if (node.type === "tab" || node.type === "subflow") {
infoSection.title.text(RED._("sidebar.info.nodeHelp")); $(helpSection.container).hide();
var helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>'); } else {
infoText = helpText; $(helpSection.container).show();
} else if (node.type === "tab") { if (subflowNode && node.type !== "subflow") {
infoSection.title.text(RED._("sidebar.info.flowDesc")); // Selected a subflow instance node.
infoText = marked(node.info||"")||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>'); // - The subflow template info goes into help
helpText = (marked(subflowNode.info||"")||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>'));
} else {
helpText = $("script[data-help-name='"+node.type+"']").html()||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>');
}
setInfoText(helpText, helpSection.content);
} }
if (subflowNode) { var infoText = "";
infoText = infoText + (marked(subflowNode.info||"")||('<span class="node-info-none">'+RED._("sidebar.info.none")+'</span>'));
infoSection.title.text(RED._("sidebar.info.subflowDesc")); if (node._def && node._def.info) {
} else if (node._def && node._def.info) {
infoSection.title.text(RED._("sidebar.info.nodeHelp"));
var info = node._def.info; var info = node._def.info;
var textInfo = (typeof info === "function" ? info.call(node) : info); var textInfo = (typeof info === "function" ? info.call(node) : info);
// TODO: help
infoText = infoText + marked(textInfo); infoText = infoText + marked(textInfo);
} }
if (node.info) { if (node.info) {
infoSection.title.text(RED._("sidebar.info.nodeHelp")); infoText = infoText + marked(node.info || "")
infoText = marked(node.info || "") || ('<span class="node-info-none">' + RED._("sidebar.info.none") + '</span>');
}
if (infoText) {
setInfoText(infoText);
} }
setInfoText(infoText, infoSection.content);
$(".sidebar-node-info-stack").scrollTop(0); $(".sidebar-node-info-stack").scrollTop(0);
$(".node-info-property-header").click(function(e) { $(".node-info-property-header").click(function(e) {
e.preventDefault(); e.preventDefault();
@ -293,8 +307,8 @@ RED.sidebar.info = (function() {
}); });
} }
} }
function setInfoText(infoText) { function setInfoText(infoText,target) {
var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content); var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" ); info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
var foldingHeader = "H3"; var foldingHeader = "H3";
info.find(foldingHeader).wrapInner('<a class="node-info-header expanded" href="#"></a>') info.find(foldingHeader).wrapInner('<a class="node-info-header expanded" href="#"></a>')
@ -399,9 +413,11 @@ RED.sidebar.info = (function() {
// tips.stop(); // tips.stop();
// sections.show(); // sections.show();
refresh(null); refresh(null);
nodeSection.container.hide(); propertiesSection.container.hide();
infoSection.title.text(title||RED._("sidebar.info.info")); helpSection.container.hide();
setInfoText(html); infoSection.container.show();
//helpSection.title.text(title||RED._("sidebar.info.info"));
setInfoText(html,infoSection.content);
$(".sidebar-node-info-stack").scrollTop(0); $(".sidebar-node-info-stack").scrollTop(0);
} }

1
red/api/editor/locales/en-US/editor.json
View File

@ -434,6 +434,7 @@
"instances": "Instances", "instances": "Instances",
"properties": "Properties", "properties": "Properties",
"info": "Information", "info": "Information",
"desc": "Description",
"blank": "blank", "blank": "blank",
"null": "null", "null": "null",
"showMore": "show more", "showMore": "show more",