From 5959da2d3728e9cca118b308b45320fdd4594aa2 Mon Sep 17 00:00:00 2001
From: tjkoury <tj@tjkoury.com>
Date: Mon, 30 Jun 2014 11:31:02 -0400
Subject: [PATCH] Added dynamic category capability

---
 public/index.html        |  46 +-----------
 public/red/ui/palette.js | 156 +++++++++++++++++++++++----------------
 2 files changed, 93 insertions(+), 109 deletions(-)

diff --git a/public/index.html b/public/index.html
index f3b44c689..cd7f4a181 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,51 +80,7 @@
 <div id="main-container" class="sidebar-closed">
     <div id="palette">
         <img src="spin.svg" class="palette-spinner"/>
-        <div class="palette-scroll">
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>inputs</span></div>
-                <div class="palette-content" id="palette-input"></div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>outputs</span></div>
-                <div class="palette-content" id="palette-output"></div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>functions</span></div>
-                <div class="palette-content" id="palette-function"></div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>social</span></div>
-                <div class="palette-content">
-                    <div id="palette-social-input"></div>
-                    <div id="palette-social-output"></div>
-                    <div id="palette-social-function"></div>
-                </div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>storage</span></div>
-                <div class="palette-content">
-                    <div id="palette-storage-input"></div>
-                    <div id="palette-storage-output"></div>
-                    <div id="palette-storage-function"></div>
-                </div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>analysis</span></div>
-                <div class="palette-content">
-                    <div id="palette-analysis-input"></div>
-                    <div id="palette-analysis-output"></div>
-                    <div id="palette-analysis-function"></div>
-                </div>
-            </div>
-            <div class="palette-category">
-                <div class="palette-header"><i class="expanded icon-chevron-down"></i><span>advanced</span></div>
-                <div class="palette-content">
-                    <div id="palette-advanced-input"></div>
-                    <div id="palette-advanced-output"></div>
-                    <div id="palette-advanced-function"></div>
-                </div>
-            </div>
+        <div id="palette-container" class="palette-scroll">
         </div>
         <div id="palette-search">
             <i class="icon-search"></i><input id="palette-search-input" type="text" placeholder="filter"><a href="#" id="palette-search-clear"><i class="icon-remove"></i></a></input>
diff --git a/public/red/ui/palette.js b/public/red/ui/palette.js
index b75766591..56be7c246 100644
--- a/public/red/ui/palette.js
+++ b/public/red/ui/palette.js
@@ -12,73 +12,101 @@
  * 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.palette = function() {
-    
+ **/
+ 
+RED.palette = function() {
+
+    var exclusion = ['config','unknown'];
+    var core = ['input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
+    
+    function createCategoryContainer(category){
+        console.log(category);
+        $("#palette-container").append('\
+               <div class="palette-category">\
+              <div id="header-'+category+'" class="palette-header"><i class="expanded icon-chevron-down"></i><span>'+category+'</span></div>\
+              <div class="palette-content" id="palette-base-category-'+category+'"></div>\
+              </div>');
+          
+    }
+    
+    core.forEach(createCategoryContainer);
+    
     function addNodeType(nt,def) {
-        if (def.category != 'config') {
-            var d = document.createElement("div");
-            d.id = "pn_"+nt;
-            d.type = nt;
-            
-            var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
-            d.innerHTML = '<div class="palette_label">'+label+"</div>";
-            d.className="palette_node";
-            if (def.icon) {
-                d.style.backgroundImage = "url(icons/"+def.icon+")";
-                if (def.align == "right") {
-                    d.style.backgroundPosition = "95% 50%";
-                } else if (def.inputs > 0) {
-                    d.style.backgroundPosition = "10% 50%";
-                }
-            }
-            
-            d.style.backgroundColor = def.color;
-            
-            if (def.outputs > 0) {
-                var port = document.createElement("div");
-                port.className = "palette_port palette_port_output";
-                d.appendChild(port);
-            }
-            
-            if (def.inputs > 0) {
-                var port = document.createElement("div");
-                port.className = "palette_port";
-                d.appendChild(port);
-            }
-            
-            // TODO: add categories dynamically?
-            $("#palette-"+def.category).append(d);
-            
-            d.onmousedown = function(e) { e.preventDefault(); }
-            
-            $(d).popover({
-                    title:d.type,
-                    placement:"right",
-                    trigger: "hover",
-                    delay: { show: 750, hide: 50 },
-                    html: true,
-                    container:'body',
-                    content: $(($("script[data-help-name|='"+nt+"']").html()||"<p>no information available</p>").trim())[0] 
-            });
-            $(d).click(function() {
-                    var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
-                    $("#tab-info").html(help);
-            });
-            $(d).draggable({
-                helper: 'clone',
-                appendTo: 'body',
-                revert: true,
-                revertDuration: 50
-            });
-        }
+        if (exclusion.indexOf(def.category)===-1) {
+          
+          var category = def.category.split("-");
+          
+          var d = document.createElement("div");
+          d.id = "pn_"+nt;
+          d.type = nt;
+          
+          var label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
+          
+          d.innerHTML = '<div class="palette_label">'+label+"</div>";
+          d.className="palette_node";
+          if (def.icon) {
+              d.style.backgroundImage = "url(icons/"+def.icon+")";
+              if (def.align == "right") {
+                  d.style.backgroundPosition = "95% 50%";
+              } else if (def.inputs > 0) {
+                  d.style.backgroundPosition = "10% 50%";
+              }
+          }
+          
+          d.style.backgroundColor = def.color;
+          
+          if (def.outputs > 0) {
+              var port = document.createElement("div");
+              port.className = "palette_port palette_port_output";
+              d.appendChild(port);
+          }
+          
+          if (def.inputs > 0) {
+              var port = document.createElement("div");
+              port.className = "palette_port";
+              d.appendChild(port);
+          }
+          
+          if($("#palette-base-category-"+category[0]).length == 0){
+            createCategoryContainer(category[0]);
+          }
+          
+          if($("#palette-"+def.category).length == 0){          
+            $("#palette-base-category-"+category[0]).append('\
+            <div id="palette-'+def.category+'"></div>');            
+          }
+
+          $("#palette-"+def.category).append(d);
+          d.onmousedown = function(e) { e.preventDefault(); }
+          
+          $(d).popover({
+                  title:d.type,
+                  placement:"right",
+                  trigger: "hover",
+                  delay: { show: 750, hide: 50 },
+                  html: true,
+                  container:'body',
+                  content: $(($("script[data-help-name|='"+nt+"']").html()||"<p>no information available</p>").trim())[0] 
+          });
+          $(d).click(function() {
+                  var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
+                  $("#tab-info").html(help);
+          });
+          $(d).draggable({
+              helper: 'clone',
+              appendTo: 'body',
+              revert: true,
+              revertDuration: 50
+          });
+         
+          $("#header-"+category[0]).off('click').on('click', function(e) {
+              $(this).next().slideToggle();
+              $(this).children("i").toggleClass("expanded");
+          });
+
+        }
     }
     
-    $(".palette-header").click(function(e) {
-        $(this).next().slideToggle();
-        $(this).children("i").toggleClass("expanded");
-    });
-    
     function filterChange() {
         var val = $("#palette-search-input").val();
         if (val == "") {