Update info sidebar on node edit

Fixes #168

Moves info sidebar to its own file so it can be refreshed from other parts of the UI

public/index.html

@@ -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>

public/red/nodes.js

@@ -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();
             }
         }
     }

public/red/ui/editor.js

@@ -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();
             }
     });
     

public/red/ui/sidebar.js

@@ -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",

public/red/ui/tab-config.js

@@ -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";

public/red/ui/tab-info.js

@@ -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("");
+        }
+    }
+}();

public/red/ui/view.js

@@ -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";