frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add node filter to palette-editor

Browse Source
This commit is contained in:
Nick O'Leary 2016-08-05 16:39:41 +01:00
parent 521e669879
commit ba37db275c
5 changed files with 145 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
editor/js/ui/editableList.js
View File

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

56
editor/js/ui/palette-editor.js
View File

@ -17,11 +17,11 @@ RED.palette.editor = (function() {
var nodeList; var nodeList;
var typesInUse = {}; var typesInUse = {};
var nodeEntries = {}; var nodeEntries = {};
var eventTimers = {}; var eventTimers = {};
var activeFilter = "";
function delayCallback(start,callback) { function delayCallback(start,callback) {
var delta = Date.now() - start; var delta = Date.now() - start;
if (delta < 300) { if (delta < 300) {
@ -96,6 +96,15 @@ RED.palette.editor = (function() {
function _refreshNodeModule(module) { function _refreshNodeModule(module) {
if (!nodeEntries.hasOwnProperty(module)) { if (!nodeEntries.hasOwnProperty(module)) {
nodeEntries[module] = {info:RED.nodes.registry.getModule(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]); nodeList.editableList('addItem', nodeEntries[module]);
//console.log(nodeList.editableList('items')); //console.log(nodeList.editableList('items'));
@ -188,6 +197,19 @@ RED.palette.editor = (function() {
$(el).find(".palette-module-content").slideUp(); $(el).find(".palette-module-content").slideUp();
$(el).removeClass('expanded'); $(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() { 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"); 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, addButton: false,
sort: function(A,B) { sort: function(A,B) {
return A.info.name.localeCompare(B.info.name); 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) { addItem: function(container,i,object) {
var entry = object.info; var entry = object.info;

25
editor/js/ui/palette.js
View File

@ -361,12 +361,11 @@ RED.palette = (function() {
}); });
} }
function filterChange() { function filterChange(val) {
var val = $("#palette-search-input").val();
if (val === "") { if (val === "") {
$("#palette-search-clear").hide(); $("#palette-search a").hide();
} else { } else {
$("#palette-search-clear").show(); $("#palette-search a").show();
} }
var re = new RegExp(val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),'i'); 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(); 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() { $("body").one("mousedown",function() {
$("#palette-search-input").blur(); $("#palette-search input").blur();
}); });
}); });

82
editor/sass/palette.scss
View File

@ -57,7 +57,7 @@
padding-top: 40px; padding-top: 40px;
} }
#palette-search { .palette-search {
position: absolute; position: absolute;
top: 0; top: 0;
left:0; left:0;
@ -69,49 +69,49 @@
padding: 3px; padding: 3px;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
box-sizing:border-box; box-sizing:border-box;
} i {
#palette-search i { font-size: 10px;
font-size: 10px; color: #666;
color: #666; }
} i.fa-search {
#palette-search i.fa-search { position: absolute;
position: absolute; pointer-events: none;
pointer-events: none; left: 12px;
left: 12px; top: 12px;
top: 12px; }
} i.fa-times {
#palette-search i.fa-times { position: absolute;
position: absolute; right: 7px;
right: 7px; top: 12px;
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 { #palette-footer {
@include component-footer; @include component-footer;
} }

4
editor/templates/index.mst
View File

@ -58,8 +58,8 @@
<div id="editor-stack"></div> <div id="editor-stack"></div>
<div id="palette"> <div id="palette">
<img src="red/images/spin.svg" class="palette-spinner hide"/> <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>
<div id="palette-editor"> <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> <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>