Add palette filter

public/red/ui/palette.js

@@ -16,7 +16,7 @@
 RED.palette = function() {
     
     function addNodeType(nt,def) {
-        
+        console.log(nt,def.category);
         if (def.category != 'config') {
             var d = document.createElement("div");
             d.id = "pn_"+nt;
@@ -75,12 +75,52 @@ RED.palette = function() {
         }
     }
     
-    $(".palette-header").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 == "") {
+            $("#palette-search-clear").hide();
+        } else {
+            $("#palette-search-clear").show();
+        }
+        
+        var re = new RegExp(val);
+        $(".palette_node").each(function(i,el) {
+            if (val == "" || re.test(el.id)) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
         });
+    }
+    
+    $("#palette-search-input").focus(function(e) {
+        RED.keyboard.disable();
+    });
+    $("#palette-search-input").blur(function(e) {
+        RED.keyboard.enable();
+    });
+    
+    $("#palette-search-clear").on("click",function(e) {
+        e.preventDefault();
+        $("#palette-search-input").val("");
+        filterChange();
+        $("#palette-search-input").focus();
+    });
+    
+    $("#palette-search-input").on("keyup",function() {
+        filterChange();
+    });
 
+    $("#palette-search-input").on("focus",function() {
+        $("body").one("mousedown",function() {
+            $("#palette-search-input").blur();
+        });
+    });
     
     return {
         add:addNodeType

public/style.css

@@ -78,17 +78,72 @@ a.brand img {
 }
 
 #palette {
-   overflow-y: auto;
    background: #f3f3f3;
-   width: 130px;
+   width: 140px;
    text-align: center;
-   padding: 5px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 }
+.palette-scroll {
+    position: absolute;
+    top: 0;
+    left:0;
+    right: 0;
+    bottom: 35px;
+    padding: 5px;
+    overflow-y: auto;
+    box-sizing:border-box;
+}
+#palette-search {
+    position: absolute;
+    bottom: 0;
+    left:0;
+    right: 0;
+    overflow: hidden;
+    background: #f3f3f3;
+    text-align: center;
+    height: 35px;
+    padding: 3px;
+    border-top: 1px solid #999;
+    box-sizing:border-box;
+}
+#palette-search i.icon-search {
+    position: absolute;
+    pointer-events: none;
+    left: 3px;
+    top: 10px;
+}
+#palette-search i.icon-remove {
+    position: absolute;
+    right: 3px;
+    top: 10px;
+}
+
+#palette-search-clear {
+    display: none;
+}
+
+#palette-search input {
+    float: right;
+    border-radius: 0;
+    border: none;
+    width: 100%;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    padding: 3px 17px;
+    margin: 0px;
+    height: 30px;
+    box-sizing:border-box;
+    
+}
+#palette-search input:focus {
+    border: none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+}
 
 .palette-category {
     border: 1px solid #999;