mirror of https://github.com/node-red/node-red.git
Add node filter to palette-editor
This commit is contained in:
Nick O'Leary
parent
521e669879
commit
ba37db275c
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<div id="palette-search" class="palette-search hide">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue