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 sort options to palette-editor search

Browse Source
This commit is contained in:
Nick O'Leary 2016-08-12 23:00:28 +01:00
parent eecf92183f
commit cdc7ab562a
6 changed files with 177 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
editor/js/ui/common/editableList.js
View File

@ -86,6 +86,7 @@
this.uiHeight = this.element.height(); this.uiHeight = this.element.height();
this.activeFilter = this.options.filter||null; this.activeFilter = this.options.filter||null;
this.activeSort = this.options.sort||null;
var minHeight = this.element.css("minHeight"); var minHeight = this.element.css("minHeight");
if (minHeight !== '0px') { if (minHeight !== '0px') {
@ -181,6 +182,18 @@
}); });
return count; return count;
}, },
_refreshSort: function() {
if (this.activeSort) {
var items = this.element.children();
var that = this;
items.sort(function(A,B) {
return that.activeSort($(A).find(".red-ui-editableList-item-content").data('data'),$(B).find(".red-ui-editableList-item-content").data('data'));
});
$.each(items,function(idx,li) {
that.element.append(li);
})
}
},
width: function(desiredWidth) { width: function(desiredWidth) {
this.uiWidth = desiredWidth; this.uiWidth = desiredWidth;
this._resize(); this._resize();
@ -194,13 +207,13 @@
data = data || {}; data = data || {};
var li = $('<li>'); var li = $('<li>');
var added = false; var added = false;
if (this.options.sort) { if (this.activeSort) {
var items = this.items(); var items = this.items();
var skip = false; var skip = false;
items.each(function(i,el) { items.each(function(i,el) {
if (added) { return } if (added) { return }
var itemData = el.data('data'); var itemData = el.data('data');
if (that.options.sort(data,itemData) < 0) { if (that.activeSort(data,itemData) < 0) {
li.insertBefore(el.closest("li")); li.insertBefore(el.closest("li"));
added = true; added = true;
} }
@ -242,7 +255,7 @@
} }
} }
if (!that.options.sort) { if (!that.activeSort) {
setTimeout(function() { setTimeout(function() {
that.uiContainer.scrollTop(that.element.height()); that.uiContainer.scrollTop(that.element.height());
},0); },0);
@ -271,6 +284,12 @@
} }
return this._refreshFilter(); return this._refreshFilter();
}, },
sort: function(sort) {
if (sort !== undefined) {
this.activeSort = sort;
}
return this._refreshSort();
},
length: function() { length: function() {
return this.element.children().length; return this.element.children().length;
} }

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

@ -289,6 +289,7 @@ RED.palette.editor = (function() {
$(el).removeClass('expanded'); $(el).removeClass('expanded');
}); });
filterInput.searchBox('value',""); filterInput.searchBox('value',"");
searchInput.searchBox('value',"");
} }
function filterChange(val) { function filterChange(val) {
@ -302,24 +303,78 @@ RED.palette.editor = (function() {
} }
} }
function initInstallTab() {
$("#palette-module-install-shade").show();
$.getJSON('http://catalogue.nodered.org/catalogue.json',function(v) { var catalogueCount;
loadedList = v.modules; var catalogueLoadStatus = [];
searchInput.searchBox('count',loadedList.length); var catalogueLoadStart;
loadedList.forEach(function(m) {
var activeSort = sortModulesAZ;
function handleCatalogResponse(catalog,index,v) {
catalogueLoadStatus.push(v);
if (v.modules) {
v.modules.forEach(function(m) {
m.index = [m.id]; m.index = [m.id];
if (m.keywords) { if (m.keywords) {
m.index = m.index.concat(m.keywords); m.index = m.index.concat(m.keywords);
} }
if (m.updated_at) {
m.timestamp = new Date(m.updated_at).getTime();
} else {
m.timestamp = 0;
}
m.index = m.index.join(",").toLowerCase(); m.index = m.index.join(",").toLowerCase();
}) })
$("#palette-module-install-shade").hide(); loadedList = loadedList.concat(v.modules);
})
} }
searchInput.searchBox('count',loadedList.length);
if (catalogueCount > 1) {
$(".palette-module-shade-status").html("Loading catalogues...<br>"+catalogueLoadStatus.length+"/"+catalogueCount);
}
if (catalogueLoadStatus.length === catalogueCount) {
var delta = 250-(Date.now() - catalogueLoadStart);
setTimeout(function() {
$("#palette-module-install-shade").hide();
},Math.max(delta,0));
}
}
function initInstallTab() {
loadedList = [];
packageList.editableList('empty');
$(".palette-module-shade-status").html("Loading catalogues...");
var catalogues = RED.settings.theme('palette.catalogues')||['http://catalogue.nodered.org/catalogue.json'];
catalogueLoadStatus = [];
catalogueCount = catalogues.length;
if (catalogues.length > 1) {
$(".palette-module-shade-status").html("Loading catalogues...<br>0/"+catalogues.length);
}
$("#palette-module-install-shade").show();
catalogueLoadStart = Date.now();
catalogues.forEach(function(catalog,index) {
$.getJSON(catalog, {_: new Date().getTime()},function(v) {
handleCatalogResponse(catalog,index,v);
})
});
}
function refreshFilteredItems() {
packageList.editableList('empty');
filteredList.sort(activeSort);
for (var i=0;i<Math.min(10,filteredList.length);i++) {
packageList.editableList('addItem',filteredList[i]);
}
if (filteredList.length > 10) {
packageList.editableList('addItem',{start:10,more:filteredList.length-10})
}
}
function sortModulesAZ(A,B) {
return A.info.id.localeCompare(B.info.id);
}
function sortModulesRecent(A,B) {
return -1 * (A.info.timestamp-B.info.timestamp);
}
function init() { function init() {
$(".palette-editor-button").show(); $(".palette-editor-button").show();
@ -329,6 +384,12 @@ RED.palette.editor = (function() {
onchange:function(tab) { onchange:function(tab) {
$("#palette-editor .palette-editor-tab").hide(); $("#palette-editor .palette-editor-tab").hide();
tab.content.show(); tab.content.show();
if (filterInput) {
filterInput.searchBox('value',"");
}
if (searchInput) {
searchInput.searchBox('value',"");
}
if (tab.id === 'install') { if (tab.id === 'install') {
initInstallTab(); initInstallTab();
if (searchInput) { if (searchInput) {
@ -395,10 +456,10 @@ RED.palette.editor = (function() {
addItem: function(container,i,object) { addItem: function(container,i,object) {
var entry = object.info; var entry = object.info;
var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container); var headerRow = $('<div>',{class:"palette-module-header"}).appendTo(container);
var titleRow = $('<div class="palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow); var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
$('<span>',{class:"palette-module-name"}).html(entry.name).appendTo(titleRow); $('<span>').html(entry.name).appendTo(titleRow);
var metaRow = $('<div class="palette-module-meta"><span class="palette-module-version"><i class="fa fa-tag"></i></span></div>').appendTo(headerRow); var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
$('<span>').html(entry.version).appendTo(metaRow.find(".palette-module-version")); $('<span>').html(entry.version).appendTo(metaRow);
var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow); var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow); var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
var setCount = $('<span>').appendTo(setButton); var setCount = $('<span>').appendTo(setButton);
@ -492,6 +553,8 @@ RED.palette.editor = (function() {
content: installTab content: installTab
}) })
var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab); var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>') searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
.appendTo(searchDiv) .appendTo(searchDiv)
@ -500,17 +563,11 @@ RED.palette.editor = (function() {
minimumLength: 2, minimumLength: 2,
change: function() { change: function() {
var searchTerm = $(this).val(); var searchTerm = $(this).val();
packageList.editableList('empty');
if (searchTerm.length >= 2) { if (searchTerm.length >= 2) {
filteredList = loadedList.filter(function(m) { filteredList = loadedList.filter(function(m) {
return (m.index.indexOf(searchTerm) > -1); return (m.index.indexOf(searchTerm) > -1);
}).map(function(f) { return {info:f}}); }).map(function(f) { return {info:f}});
for (var i=0;i<Math.min(10,filteredList.length);i++) { refreshFilteredItems();
packageList.editableList('addItem',filteredList[i]);
}
if (filteredList.length > 10) {
packageList.editableList('addItem',{start:10,more:filteredList.length-10})
}
searchInput.searchBox('count',filteredList.length+" / "+loadedList.length); searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
} else { } else {
searchInput.searchBox('count',loadedList.length); searchInput.searchBox('count',loadedList.length);
@ -518,14 +575,44 @@ RED.palette.editor = (function() {
} }
}); });
$('<div id="palette-module-install-shade" class="palette-module-shade hide"><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
$('<span>').html('sort: ').appendTo(toolBar);
var sortGroup = $('<span class="button-group"></span> ').appendTo(toolBar);
var sortAZ = $('<a href="#" class="sidebar-header-button-toggle selected">a-z</a>').appendTo(sortGroup);
var sortRecent = $('<a href="#" class="sidebar-header-button-toggle">recent</a>').appendTo(sortGroup);
sortAZ.click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
return;
}
$(this).addClass("selected");
sortRecent.removeClass("selected");
activeSort = sortModulesAZ;
refreshFilteredItems();
});
sortRecent.click(function(e) {
e.preventDefault();
if ($(this).hasClass("selected")) {
return;
}
$(this).addClass("selected");
sortAZ.removeClass("selected");
activeSort = sortModulesRecent;
refreshFilteredItems();
});
packageList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({ var refreshSpan = $('<span>').appendTo(toolBar);
var refreshButton = $('<a href="#" class="sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
refreshButton.click(function(e) {
e.preventDefault();
initInstallTab();
})
packageList = $('<ol>',{id:"palette-module-list", style:"position: absolute;top: 78px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
addButton: false, addButton: false,
// sort: function(A,B) {
// return A.info.name.localeCompare(B.info.name);
// },
addItem: function(container,i,object) { addItem: function(container,i,object) {
if (object.more) { if (object.more) {
container.addClass('palette-module-more'); container.addClass('palette-module-more');
@ -561,7 +648,11 @@ RED.palette.editor = (function() {
installButton.click(function(e) { installButton.click(function(e) {
e.preventDefault(); e.preventDefault();
installNodeModule(entry.id,shade,function(xhr) { installNodeModule(entry.id,shade,function(xhr) {
console.log(xhr); if (xhr) {
if (xhr.responseJSON) {
RED.notify("Failed to install: "+entry.id+"<br>"+xhr.responseJSON.message+"<br>Check the log for more information","error",false,8000);
}
}
}) })
}) })
if (nodeEntries.hasOwnProperty(entry.id)) { if (nodeEntries.hasOwnProperty(entry.id)) {
@ -574,6 +665,7 @@ RED.palette.editor = (function() {
} }
}); });
$('<div id="palette-module-install-shade" class="palette-module-shade hide"><div class="palette-module-shade-status"></div><img src="red/images/spin.svg" class="palette-spinner"/></div>').appendTo(installTab);
RED.events.on('registry:node-set-enabled', function(ns) { RED.events.on('registry:node-set-enabled', function(ns) {
refreshNodeModule(ns.module); refreshNodeModule(ns.module);

1
editor/sass/colors.scss
View File

@ -20,6 +20,7 @@ $form-placeholder-color: #bbbbbb;
$form-text-color: #444; $form-text-color: #444;
$form-input-focus-color: rgba(85,150,230,0.8); $form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc; $form-input-border-color: #ccc;
$form-input-border-selected-color: #aaa;
$node-selected-color: #ff7f0e; $node-selected-color: #ff7f0e;

2
editor/sass/mixins.scss
View File

@ -87,6 +87,8 @@
&.selected:not(.disabled) { &.selected:not(.disabled) {
color: $workspace-button-color; color: $workspace-button-color;
background: $workspace-button-background; background: $workspace-button-background;
border-bottom-width: 2px;
border-bottom-color: $form-input-border-selected-color;
} }
} }

29
editor/sass/palette-editor.scss
View File

@ -38,6 +38,17 @@
padding: 0px; padding: 0px;
.disabled { .disabled {
background: #f3f3f3; background: #f3f3f3;
.palette-module-name {
font-style: italic;
color: #aaa;
}
.palette-module-version {
color: #aaa;
}
} }
.red-ui-editableList-item-content { .red-ui-editableList-item-content {
padding: 12px 8px; padding: 12px 8px;
@ -55,7 +66,17 @@
right:0; right:0;
bottom:0 bottom:0
} }
.palette-editor-toolbar {
background: #f3f3f3;
box-sizing: border-box;
padding: 8px 10px;
border-bottom: 1px solid $primary-border-color;
text-align: right;
.button-group {
margin-right: 10px;
}
}
.palette-module-button-group { .palette-module-button-group {
position: absolute; position: absolute;
right: 0; right: 0;
@ -72,7 +93,15 @@
right:0; right:0;
background: rgba(255,255,255,0.8); background: rgba(255,255,255,0.8);
text-align: center; text-align: center;
padding-top: 20px;
} }
#palette-module-install-shade {
padding-top: 80px;
}
.palette-module-shade-status {
color: #666;
}
.palette-module-meta { .palette-module-meta {
color: #666; color: #666;
position: relative; position: relative;

10
editor/sass/palette.scss
View File

@ -53,15 +53,11 @@
overflow-y: auto; overflow-y: auto;
box-sizing:border-box; box-sizing:border-box;
} }
.palette-spinner { #palette > .palette-spinner {
padding-top: 40px; padding-top: 80px;
} }
.palette-search { .palette-search {
position: absolute; position: relative;
top: 0;
left:0;
right:0;
overflow: hidden; overflow: hidden;
background: #ffffff; background: #ffffff;
text-align: center; text-align: center;