mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add sort options to palette-editor search
This commit is contained in:
Nick O'Leary
parent
eecf92183f
commit
cdc7ab562a
@ -86,6 +86,7 @@
|
||||
this.uiHeight = this.element.height();
|
||||
|
||||
this.activeFilter = this.options.filter||null;
|
||||
this.activeSort = this.options.sort||null;
|
||||
|
||||
var minHeight = this.element.css("minHeight");
|
||||
if (minHeight !== '0px') {
|
||||
@ -181,6 +182,18 @@
|
||||
});
|
||||
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) {
|
||||
this.uiWidth = desiredWidth;
|
||||
this._resize();
|
||||
@ -194,13 +207,13 @@
|
||||
data = data || {};
|
||||
var li = $('<li>');
|
||||
var added = false;
|
||||
if (this.options.sort) {
|
||||
if (this.activeSort) {
|
||||
var items = this.items();
|
||||
var skip = false;
|
||||
items.each(function(i,el) {
|
||||
if (added) { return }
|
||||
var itemData = el.data('data');
|
||||
if (that.options.sort(data,itemData) < 0) {
|
||||
if (that.activeSort(data,itemData) < 0) {
|
||||
li.insertBefore(el.closest("li"));
|
||||
added = true;
|
||||
}
|
||||
@ -242,7 +255,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (!that.options.sort) {
|
||||
if (!that.activeSort) {
|
||||
setTimeout(function() {
|
||||
that.uiContainer.scrollTop(that.element.height());
|
||||
},0);
|
||||
@ -271,6 +284,12 @@
|
||||
}
|
||||
return this._refreshFilter();
|
||||
},
|
||||
sort: function(sort) {
|
||||
if (sort !== undefined) {
|
||||
this.activeSort = sort;
|
||||
}
|
||||
return this._refreshSort();
|
||||
},
|
||||
length: function() {
|
||||
return this.element.children().length;
|
||||
}
|
||||
|
||||
@ -289,6 +289,7 @@ RED.palette.editor = (function() {
|
||||
$(el).removeClass('expanded');
|
||||
});
|
||||
filterInput.searchBox('value',"");
|
||||
searchInput.searchBox('value',"");
|
||||
}
|
||||
|
||||
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) {
|
||||
loadedList = v.modules;
|
||||
searchInput.searchBox('count',loadedList.length);
|
||||
loadedList.forEach(function(m) {
|
||||
var catalogueCount;
|
||||
var catalogueLoadStatus = [];
|
||||
var catalogueLoadStart;
|
||||
|
||||
var activeSort = sortModulesAZ;
|
||||
|
||||
function handleCatalogResponse(catalog,index,v) {
|
||||
catalogueLoadStatus.push(v);
|
||||
if (v.modules) {
|
||||
v.modules.forEach(function(m) {
|
||||
m.index = [m.id];
|
||||
if (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();
|
||||
})
|
||||
$("#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() {
|
||||
|
||||
$(".palette-editor-button").show();
|
||||
@ -329,6 +384,12 @@ RED.palette.editor = (function() {
|
||||
onchange:function(tab) {
|
||||
$("#palette-editor .palette-editor-tab").hide();
|
||||
tab.content.show();
|
||||
if (filterInput) {
|
||||
filterInput.searchBox('value',"");
|
||||
}
|
||||
if (searchInput) {
|
||||
searchInput.searchBox('value',"");
|
||||
}
|
||||
if (tab.id === 'install') {
|
||||
initInstallTab();
|
||||
if (searchInput) {
|
||||
@ -395,10 +456,10 @@ RED.palette.editor = (function() {
|
||||
addItem: function(container,i,object) {
|
||||
var entry = object.info;
|
||||
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);
|
||||
$('<span>',{class:"palette-module-name"}).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);
|
||||
$('<span>').html(entry.version).appendTo(metaRow.find(".palette-module-version"));
|
||||
var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
|
||||
$('<span>').html(entry.name).appendTo(titleRow);
|
||||
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);
|
||||
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 setCount = $('<span>').appendTo(setButton);
|
||||
@ -492,6 +553,8 @@ RED.palette.editor = (function() {
|
||||
content: installTab
|
||||
})
|
||||
|
||||
var toolBar = $('<div>',{class:"palette-editor-toolbar"}).appendTo(installTab);
|
||||
|
||||
var searchDiv = $('<div>',{class:"palette-search"}).appendTo(installTab);
|
||||
searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
|
||||
.appendTo(searchDiv)
|
||||
@ -500,17 +563,11 @@ RED.palette.editor = (function() {
|
||||
minimumLength: 2,
|
||||
change: function() {
|
||||
var searchTerm = $(this).val();
|
||||
packageList.editableList('empty');
|
||||
if (searchTerm.length >= 2) {
|
||||
filteredList = loadedList.filter(function(m) {
|
||||
return (m.index.indexOf(searchTerm) > -1);
|
||||
}).map(function(f) { return {info:f}});
|
||||
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})
|
||||
}
|
||||
refreshFilteredItems();
|
||||
searchInput.searchBox('count',filteredList.length+" / "+loadedList.length);
|
||||
} else {
|
||||
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,
|
||||
// sort: function(A,B) {
|
||||
// return A.info.name.localeCompare(B.info.name);
|
||||
// },
|
||||
addItem: function(container,i,object) {
|
||||
if (object.more) {
|
||||
container.addClass('palette-module-more');
|
||||
@ -561,7 +648,11 @@ RED.palette.editor = (function() {
|
||||
installButton.click(function(e) {
|
||||
e.preventDefault();
|
||||
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)) {
|
||||
@ -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) {
|
||||
refreshNodeModule(ns.module);
|
||||
|
||||
@ -20,6 +20,7 @@ $form-placeholder-color: #bbbbbb;
|
||||
$form-text-color: #444;
|
||||
$form-input-focus-color: rgba(85,150,230,0.8);
|
||||
$form-input-border-color: #ccc;
|
||||
$form-input-border-selected-color: #aaa;
|
||||
|
||||
|
||||
$node-selected-color: #ff7f0e;
|
||||
|
||||
@ -82,11 +82,13 @@
|
||||
@mixin workspace-button-toggle {
|
||||
@include workspace-button;
|
||||
color: $workspace-button-color-selected;
|
||||
background: $workspace-button-background-active;
|
||||
background:$workspace-button-background-active;
|
||||
|
||||
&.selected:not(.disabled) {
|
||||
color: $workspace-button-color;
|
||||
background: $workspace-button-background;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: $form-input-border-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,6 +38,17 @@
|
||||
padding: 0px;
|
||||
.disabled {
|
||||
background: #f3f3f3;
|
||||
|
||||
.palette-module-name {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
}
|
||||
.palette-module-version {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.red-ui-editableList-item-content {
|
||||
padding: 12px 8px;
|
||||
@ -55,7 +66,17 @@
|
||||
right: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 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -72,7 +93,15 @@
|
||||
right:0;
|
||||
background: rgba(255,255,255,0.8);
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
#palette-module-install-shade {
|
||||
padding-top: 80px;
|
||||
}
|
||||
.palette-module-shade-status {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.palette-module-meta {
|
||||
color: #666;
|
||||
position: relative;
|
||||
|
||||
@ -53,15 +53,11 @@
|
||||
overflow-y: auto;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.palette-spinner {
|
||||
padding-top: 40px;
|
||||
#palette > .palette-spinner {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.palette-search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
right:0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
text-align: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user