Add node filter to palette-editor

editor/js/ui/editableList.js

@@ -85,6 +85,8 @@
 
             this.uiHeight = this.element.height();
 
+            this.activeFilter = this.options.filter||null;
+
             var minHeight = this.element.css("minHeight");
             if (minHeight !== '0px') {
                 this.uiContainer.css("minHeight",minHeight);
@@ -155,6 +157,26 @@
         },
         _destroy: function() {
         },
+        _refreshFilter: function() {
+            var that = this;
+            if (!this.activeFilter) {
+                this.element.children().show();
+            }
+            var items = this.items();
+            items.each(function (i,el) {
+                var data = el.data('data');
+                try {
+                    if (that.activeFilter(data)) {
+                        el.parent().show();
+                    } else {
+                        el.parent().hide();
+                    }
+                } catch(err) {
+                    console.log(err);
+                    el.parent().show();
+                }
+            });
+        },
         width: function(desiredWidth) {
             this.uiWidth = desiredWidth;
             this._resize();
@@ -207,6 +229,15 @@
                 var index = that.element.children().length-1;
                 setTimeout(function() {
                     that.options.addItem(row,index,data);
+                    if (that.activeFilter) {
+                        try {
+                            if (!that.activeFilter(data)) {
+                                li.hide();
+                            }
+                        } catch(err) {
+                        }
+                    }
+
                     if (!that.options.sort) {
                         setTimeout(function() {
                             that.uiContainer.scrollTop(that.element.height());
@@ -229,6 +260,12 @@
         },
         empty: function() {
             this.element.empty();
+        },
+        filter: function(filter) {
+            if (filter !== undefined) {
+                this.activeFilter = filter;
+            }
+            this._refreshFilter();
         }
     });
 })(jQuery);

editor/js/ui/palette-editor.js

@@ -17,11 +17,11 @@ RED.palette.editor = (function() {
 
     var nodeList;
     var typesInUse = {};
-
     var nodeEntries = {};
-
     var eventTimers = {};
 
+    var activeFilter = "";
+
     function delayCallback(start,callback) {
         var delta = Date.now() - start;
         if (delta < 300) {
@@ -96,6 +96,15 @@ RED.palette.editor = (function() {
     function _refreshNodeModule(module) {
         if (!nodeEntries.hasOwnProperty(module)) {
             nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
+            var index = [module];
+            for (var s in nodeEntries[module].info.sets) {
+                if (nodeEntries[module].info.sets.hasOwnProperty(s)) {
+                    index.push(s);
+                    index = index.concat(nodeEntries[module].info.sets[s].types)
+                }
+            }
+            nodeEntries[module].index = index.join(",").toLowerCase();
+
             nodeList.editableList('addItem', nodeEntries[module]);
             //console.log(nodeList.editableList('items'));
 
@@ -188,6 +197,19 @@ RED.palette.editor = (function() {
             $(el).find(".palette-module-content").slideUp();
             $(el).removeClass('expanded');
         });
+        $("#palette-editor-search input").val("");
+        filterChange("");
+    }
+
+    function filterChange(val) {
+        if (val === "") {
+            $("#palette-editor-search a").hide();
+            activeFilter = val;
+        } else {
+            $("#palette-editor-search a").show();
+            activeFilter = val.toLowerCase();
+        }
+        nodeList.editableList('filter');
     }
 
     function init() {
@@ -209,11 +231,39 @@ RED.palette.editor = (function() {
 
         var divTabs = $('<div>',{style:"position:absolute;top:80px;left:0;right:0;bottom:0"}).appendTo("#palette-editor");
 
-        nodeList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0px;"}).appendTo(divTabs).editableList({
+        var searchDiv = $('<div>',{id:"palette-editor-search",class:"palette-search"}).appendTo(divTabs);
+        $('<i class="fa fa-search"></i><input type="text" data-i18n="[placeholder]palette.filter"><a href="#" class="palette-search-clear"><i class="fa fa-times"></i></a></input>').appendTo(searchDiv)
+
+        $("#palette-editor-search a").on("click",function(e) {
+            e.preventDefault();
+            $("#palette-editor-search input").val("");
+            filterChange("");
+            $("#palette-editor-search input").focus();
+        });
+
+        $("#palette-editor-search input").val("");
+        $("#palette-editor-search input").on("keyup",function() {
+            filterChange($(this).val());
+        });
+
+        $("#palette-editor-search input").on("focus",function() {
+            $("body").one("mousedown",function() {
+                $("#palette-editor-search input").blur();
+            });
+        });
+
+        nodeList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(divTabs).editableList({
             addButton: false,
             sort: function(A,B) {
                 return A.info.name.localeCompare(B.info.name);
             },
+            filter: function(data) {
+                if (activeFilter === "" ) {
+                    return true;
+                }
+
+                return (activeFilter==="")||(data.index.indexOf(activeFilter) > -1);
+            },
             addItem: function(container,i,object) {
                 var entry = object.info;
 

editor/js/ui/palette.js

@@ -361,12 +361,11 @@ RED.palette = (function() {
         });
     }
 
-    function filterChange() {
+    function filterChange(val) {
-        var val = $("#palette-search-input").val();
         if (val === "") {
-            $("#palette-search-clear").hide();
+            $("#palette-search a").hide();
         } else {
-            $("#palette-search-clear").show();
+            $("#palette-search a").show();
         }
 
         var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i');
@@ -447,21 +446,21 @@ RED.palette = (function() {
             });
         }
 
-        $("#palette-search-clear").on("click",function(e) {
+        $("#palette-search a").on("click",function(e) {
             e.preventDefault();
-            $("#palette-search-input").val("");
+            $("#palette-search input").val("");
-            filterChange();
+            filterChange("");
-            $("#palette-search-input").focus();
+            $("#palette-search input").focus();
         });
 
-        $("#palette-search-input").val("");
+        $("#palette-search input").val("");
-        $("#palette-search-input").on("keyup",function() {
+        $("#palette-search input").on("keyup",function() {
-            filterChange();
+            filterChange($(this).val());
         });
 
-        $("#palette-search-input").on("focus",function() {
+        $("#palette-search input").on("focus",function() {
             $("body").one("mousedown",function() {
-                $("#palette-search-input").blur();
+                $("#palette-search input").blur();
             });
         });
 

editor/sass/palette.scss

@@ -57,7 +57,7 @@
     padding-top: 40px;
 }
 
-#palette-search {
+.palette-search {
     position: absolute;
     top: 0;
     left:0;
@@ -69,33 +69,22 @@
     padding: 3px;
     border-bottom: 1px solid $primary-border-color;
     box-sizing:border-box;
-}
+    i {
-#palette-search i {
         font-size: 10px;
         color: #666;
     }
-#palette-search i.fa-search {
+    i.fa-search {
         position: absolute;
         pointer-events: none;
         left: 12px;
         top: 12px;
     }
-#palette-search i.fa-times {
+    i.fa-times {
         position: absolute;
         right: 7px;
         top: 12px;
     }
-
+    input {
-#palette-search-clear {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 20px;
-    display: none;
-}
-
-#palette-search input {
         border-radius: 0;
         border: none;
         width: 100%;
@@ -105,13 +94,24 @@
         margin: 0px;
         height: 30px;
         box-sizing:border-box;
-}
 
-#palette-search input:focus {
+        &:focus {
             border: none;
             box-shadow: none;
             -webkit-box-shadow: none;
         }
+    }
+    .palette-search-clear {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 20px;
+        display: none;
+    }
+}
+
+
 #palette-footer {
     @include component-footer;
 }

editor/templates/index.mst

@@ -58,8 +58,8 @@
     <div id="editor-stack"></div>
     <div id="palette">
         <img src="red/images/spin.svg" class="palette-spinner hide"/>
-        <div id="palette-search" class="hide">
+        <div id="palette-search" class="palette-search hide">
-            <i class="fa fa-search"></i><input id="palette-search-input" type="text" data-i18n="[placeholder]palette.filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input>
+            <i class="fa fa-search"></i><input type="text" data-i18n="[placeholder]palette.filter"><a href="#" class="palette-search-clear"><i class="fa fa-times"></i></a></input>
         </div>
         <div id="palette-editor">
             <div class="editor-tray-header"><div class="editor-tray-titlebar"><ul class="editor-tray-breadcrumbs"><li>Manage palette</li></ul></div><div class="editor-tray-toolbar"><button id="palette-editor-close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only primary" role="button" aria-disabled="false">Done</button></div></div>