diff --git a/editor/js/ui/editableList.js b/editor/js/ui/editableList.js index 3446c46ee..5b3c12125 100644 --- a/editor/js/ui/editableList.js +++ b/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); diff --git a/editor/js/ui/palette-editor.js b/editor/js/ui/palette-editor.js index fceb574c0..f2fc57a02 100644 --- a/editor/js/ui/palette-editor.js +++ b/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 = $('
',{style:"position:absolute;top:80px;left:0;right:0;bottom:0"}).appendTo("#palette-editor"); - nodeList = $('
    ',{id:"palette-module-list", style:"position: absolute;top: 0;bottom: 0;left: 0;right: 0px;"}).appendTo(divTabs).editableList({ + var searchDiv = $('
    ',{id:"palette-editor-search",class:"palette-search"}).appendTo(divTabs); + $('').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 = $('
      ',{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; diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 86e9b8c45..645867fae 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -361,12 +361,11 @@ RED.palette = (function() { }); } - function filterChange() { - var val = $("#palette-search-input").val(); + function filterChange(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(""); - filterChange(); - $("#palette-search-input").focus(); + $("#palette-search input").val(""); + filterChange(""); + $("#palette-search input").focus(); }); - $("#palette-search-input").val(""); - $("#palette-search-input").on("keyup",function() { - filterChange(); + $("#palette-search input").val(""); + $("#palette-search input").on("keyup",function() { + 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(); }); }); diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index bc4c8fde1..18ba0b59c 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -57,7 +57,7 @@ padding-top: 40px; } -#palette-search { +.palette-search { position: absolute; top: 0; left:0; @@ -69,49 +69,49 @@ padding: 3px; border-bottom: 1px solid $primary-border-color; box-sizing:border-box; -} -#palette-search i { - font-size: 10px; - color: #666; -} -#palette-search i.fa-search { - position: absolute; - pointer-events: none; - left: 12px; - top: 12px; -} -#palette-search i.fa-times { - position: absolute; - right: 7px; - top: 12px; + i { + font-size: 10px; + color: #666; + } + i.fa-search { + position: absolute; + pointer-events: none; + left: 12px; + top: 12px; + } + i.fa-times { + position: absolute; + right: 7px; + top: 12px; + } + input { + border-radius: 0; + border: none; + width: 100%; + box-shadow: none; + -webkit-box-shadow: none; + padding: 3px 17px 3px 22px; + margin: 0px; + height: 30px; + box-sizing:border-box; + + &: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-search-clear { - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 20px; - display: none; -} -#palette-search input { - border-radius: 0; - border: none; - width: 100%; - box-shadow: none; - -webkit-box-shadow: none; - padding: 3px 17px 3px 22px; - margin: 0px; - height: 30px; - box-sizing:border-box; -} - -#palette-search input:focus { - border: none; - box-shadow: none; - -webkit-box-shadow: none; -} #palette-footer { @include component-footer; } diff --git a/editor/templates/index.mst b/editor/templates/index.mst index 239f68a6e..bd23b55e5 100644 --- a/editor/templates/index.mst +++ b/editor/templates/index.mst @@ -58,8 +58,8 @@
      -