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 sidebar on node edit

Browse Source 
Fixes #168

Moves info sidebar to its own file so it can be refreshed from other parts of the UI
This commit is contained in:
Nick O'Leary 2014-02-26 22:58:44 +00:00
parent fb5b45c655
commit 325600ea61
7 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -314,6 +314,7 @@
<script src="red/ui/view.js"></script>
<script src="red/ui/sidebar.js"></script>
<script src="red/ui/palette.js"></script>
<script src="red/ui/tab-info.js"></script>
<script src="red/ui/tab-config.js"></script>
<script src="red/ui/editor.js"></script>
<script src="red/ui/library.js"></script>

4
public/red/nodes.js
View File

@ -39,7 +39,7 @@ RED.nodes = function() {
function addNode(n) {
if (n._def.category == "config") {
configNodes[n.id] = n;
RED.configTab.refresh();
RED.sidebar.config.refresh();
} else {
n.dirty = true;
nodes.push(n);
@ -58,7 +58,7 @@ RED.nodes = function() {
}
}
if (updatedConfigNode) {
RED.configTab.refresh();
RED.sidebar.config.refresh();
}
}
}

5
public/red/ui/editor.js
View File

@ -274,8 +274,9 @@ RED.editor = function() {
}
$( this ).dialog('option','height','auto');
$( this ).dialog('option','width','500');
RED.sidebar.info.refresh(editing_node);
RED.sidebar.config.refresh();
editing_node = null;
RED.configTab.refresh();
}
});
@ -474,7 +475,7 @@ RED.editor = function() {
if (RED.view.state() != RED.state.EDITING) {
RED.keyboard.enable();
}
RED.configTab.refresh();
RED.sidebar.config.refresh();
}
});

9
public/red/ui/sidebar.js
View File

@ -34,18 +34,9 @@ RED.sidebar = function() {
//$('#sidebar').tabs("refresh");
}
var content = document.createElement("div");
content.id = "tab-info";
content.style.paddingTop = "4px";
content.style.paddingLeft = "4px";
content.style.paddingRight = "4px";
addTab("info",content);
$('#btn-sidebar').click(function() {toggleSidebar();});
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();});
var sidebarSeparator = {};
$("#sidebar-separator").draggable({
axis: "x",

2
public/red/ui/tab-config.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.configTab = function() {
RED.sidebar.config = function() {
var content = document.createElement("div");
content.id = "tab-config";

69
public/red/ui/tab-info.js Normal file
View File

@ -0,0 +1,69 @@
/**
* Copyright 2013 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.sidebar.info = function() {
var content = document.createElement("div");
content.id = "tab-info";
content.style.paddingTop = "4px";
content.style.paddingLeft = "4px";
content.style.paddingRight = "4px";
RED.sidebar.addTab("info",content);
function refresh(node) {
var table = '<table class="node-info"><tbody>';
table += "<tr><td>Type</td><td>&nbsp;"+node.type+"</td></tr>";
table += "<tr><td>ID</td><td>&nbsp;"+node.id+"</td></tr>";
table += '<tr class="blank"><td colspan="2">&nbsp;Properties</td></tr>';
for (var n in node._def.defaults) {
var val = node[n]||"";
var type = typeof val;
if (type === "string") {
if (val.length > 30) {
val = val.substring(0,30)+" ...";
}
} else if (type === "number") {
val = val.toString();
} else if ($.isArray(val)) {
val = "[<br/>";
for (var i=0;i<Math.min(node[n].length,10);i++) {
var vv = JSON.stringify(node[n][i],jsonFilter," ").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
val += "&nbsp;"+i+": "+vv+"<br/>";
}
if (node[n].length > 10) {
val += "&nbsp;... "+node[n].length+" items<br/>";
}
val += "]";
} else {
val = JSON.stringify(val,jsonFilter," ");
val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
}
table += "<tr><td>&nbsp;"+n+"</td><td>"+val+"</td></tr>";
}
table += "</tbody></table><br/>";
table += '<div class="node-help">'+($("script[data-help-name|='"+node.type+"']").html()||"")+"</div>";
$("#tab-info").html(table);
}
return {
refresh:refresh,
clear: function() {
$("#tab-info").html("");
}
}
}();

41
public/red/ui/view.js
View File

@ -475,9 +475,9 @@ RED.view = function() {
}
if (moving_set.length == 1) {
buildInfo(moving_set[0].n);
RED.sidebar.info.refresh(moving_set[0].n);
} else {
$("#tab-info").html("");
RED.sidebar.info.clear();
}
}
@ -538,43 +538,6 @@ RED.view = function() {
return value;
}
function buildInfo(node) {
var table = '<table class="node-info"><tbody>';
table += "<tr><td>Type</td><td>&nbsp;"+node.type+"</td></tr>";
table += "<tr><td>ID</td><td>&nbsp;"+node.id+"</td></tr>";
table += '<tr class="blank"><td colspan="2">&nbsp;Properties</td></tr>';
for (var n in node._def.defaults) {
var val = node[n]||"";
var type = typeof val;
if (type === "string") {
if (val.length > 30) {
val = val.substring(0,30)+" ...";
}
} else if (type === "number") {
val = val.toString();
} else if ($.isArray(val)) {
val = "[<br/>";
for (var i=0;i<Math.min(node[n].length,10);i++) {
var vv = JSON.stringify(node[n][i],jsonFilter," ").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
val += "&nbsp;"+i+": "+vv+"<br/>";
}
if (node[n].length > 10) {
val += "&nbsp;... "+node[n].length+" items<br/>";
}
val += "]";
} else {
val = JSON.stringify(val,jsonFilter," ");
val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
}
table += "<tr><td>&nbsp;"+n+"</td><td>"+val+"</td></tr>";
}
table += "</tbody></table><br/>";
table += '<div class="node-help">'+($("script[data-help-name|='"+node.type+"']").html()||"")+"</div>";
$("#tab-info").html(table);
}
function calculateTextWidth(str) {
var sp = document.createElement("span");
sp.className = "node_label";