mirror of https://github.com/node-red/node-red.git
add catalog select
This commit is contained in:
Steve-Mcl
parent
db108a37cf
commit
1fa4aaf706
|
|
@ -16,7 +16,7 @@
|
|||
RED.palette.editor = (function() {
|
||||
|
||||
var disabled = false;
|
||||
|
||||
const catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json', 'http://192.168.86.130:3002/catalogue.json']
|
||||
var editorTabs;
|
||||
var filterInput;
|
||||
var searchInput;
|
||||
|
|
@ -232,6 +232,7 @@ RED.palette.editor = (function() {
|
|||
|
||||
|
||||
function _refreshNodeModule(module) {
|
||||
console.log("refresh",module);
|
||||
if (!nodeEntries.hasOwnProperty(module)) {
|
||||
nodeEntries[module] = {info:RED.nodes.registry.getModule(module)};
|
||||
var index = [module];
|
||||
|
|
@ -421,7 +422,7 @@ RED.palette.editor = (function() {
|
|||
packageList.editableList('empty');
|
||||
|
||||
$(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading'));
|
||||
var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json'];
|
||||
|
||||
catalogueLoadStatus = [];
|
||||
catalogueLoadErrors = false;
|
||||
catalogueCount = catalogues.length;
|
||||
|
|
@ -431,8 +432,11 @@ RED.palette.editor = (function() {
|
|||
$("#red-ui-palette-module-install-shade").show();
|
||||
catalogueLoadStart = Date.now();
|
||||
var handled = 0;
|
||||
catalogues.forEach(function(catalog,index) {
|
||||
const catalogTypes = []
|
||||
for (let index = 0; index < catalogues.length; index++) {
|
||||
const catalog = catalogues[index];
|
||||
$.getJSON(catalog, {_: new Date().getTime()},function(v) {
|
||||
catalogTypes.push(v);
|
||||
handleCatalogResponse(null,catalog,index,v);
|
||||
refreshNodeModuleList();
|
||||
}).fail(function(jqxhr, textStatus, error) {
|
||||
|
|
@ -442,9 +446,19 @@ RED.palette.editor = (function() {
|
|||
handled++;
|
||||
if (handled === catalogueCount) {
|
||||
searchInput.searchBox('change');
|
||||
console.log("adding types to typedInput", catalogTypes)
|
||||
const catalogSelection = $('#red-catalogue-filter-select')
|
||||
catalogSelection.empty()
|
||||
// loop through catalogTypes, and option per entry
|
||||
for (let index = 0; index < catalogTypes.length; index++) {
|
||||
const catalog = catalogTypes[index];
|
||||
catalogSelection.append(`<option value="${catalog.name}">${catalog.name}</option>`)
|
||||
}
|
||||
// select the 1st option
|
||||
catalogSelection.val(catalogSelection.find('option:first').val())
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -812,9 +826,9 @@ RED.palette.editor = (function() {
|
|||
content: installTab
|
||||
})
|
||||
|
||||
var toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
|
||||
|
||||
var searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
|
||||
const toolBar = $('<div>',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab);
|
||||
|
||||
const searchDiv = $('<div>',{class:"red-ui-palette-search"}).appendTo(installTab);
|
||||
searchInput = $('<input type="text" data-i18n="[placeholder]palette.search"></input>')
|
||||
.appendTo(searchDiv)
|
||||
.searchBox({
|
||||
|
|
@ -836,14 +850,35 @@ RED.palette.editor = (function() {
|
|||
}
|
||||
});
|
||||
|
||||
$('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
|
||||
var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
|
||||
var sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
|
||||
var sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
|
||||
var sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
|
||||
// create a div, left aligned, to contain the label "catalog" and a dropdown select
|
||||
const catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
|
||||
// const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
|
||||
// append a regular select/options el to the catalogGroup
|
||||
const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(catalogGroup);
|
||||
|
||||
|
||||
// add a single dummy option "Loading..." to catalogSelection until the catalogues are loaded
|
||||
catalogSelection.append($('<option>', { value: "loading", text: "Loading Catalogue List...", disabled: true, selected: true }));
|
||||
|
||||
// catalogSelection.typedInput({ types: [{ value: "loading", label: "Loading Catalogue List...", hasValue: false }] });
|
||||
|
||||
catalogSelection.on("change", function() {
|
||||
var v = $(this).val();
|
||||
console.log(v);
|
||||
if (v === "all") {
|
||||
}
|
||||
})
|
||||
|
||||
const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
|
||||
|
||||
$('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
|
||||
const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
|
||||
const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
|
||||
const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
|
||||
const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
|
||||
|
||||
|
||||
var sortOpts = [
|
||||
const sortOpts = [
|
||||
{button: sortRelevance, func: sortModulesRelevance},
|
||||
{button: sortAZ, func: sortModulesAZ},
|
||||
{button: sortRecent, func: sortModulesRecent}
|
||||
|
|
@ -861,7 +896,7 @@ RED.palette.editor = (function() {
|
|||
});
|
||||
});
|
||||
|
||||
var refreshSpan = $('<span>').appendTo(toolBar);
|
||||
var refreshSpan = $('<span>').appendTo(toolBarActions);
|
||||
var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
|
||||
refreshButton.on("click", function(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -871,7 +906,8 @@ RED.palette.editor = (function() {
|
|||
})
|
||||
RED.popover.tooltip(refreshButton,RED._("palette.editor.refresh"));
|
||||
|
||||
packageList = $('<ol>',{style:"position: absolute;top: 79px;bottom: 0;left: 0;right: 0px;"}).appendTo(installTab).editableList({
|
||||
packageList = $('<ol>').appendTo(installTab).editableList({
|
||||
class: "scrollable",
|
||||
addButton: false,
|
||||
scrollOnAdd: false,
|
||||
addItem: function(container,i,object) {
|
||||
|
|
@ -952,9 +988,10 @@ RED.palette.editor = (function() {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (RED.settings.get('externalModules.palette.allowUpload', true) !== false) {
|
||||
var uploadSpan = $('<span class="button-group">').prependTo(toolBar);
|
||||
var uploadSpan = $('<span class="button-group">').prependTo(toolBarActions);
|
||||
var uploadButton = $('<button type="button" class="red-ui-sidebar-header-button red-ui-palette-editor-upload-button"><label><i class="fa fa-upload"></i><form id="red-ui-palette-editor-upload-form" enctype="multipart/form-data"><input name="tarball" type="file" accept=".tgz"></label></button>').appendTo(uploadSpan);
|
||||
|
||||
var uploadInput = uploadButton.find('input[type="file"]');
|
||||
|
|
|
|||
|
|
@ -29,6 +29,13 @@
|
|||
box-sizing:border-box;
|
||||
background: var(--red-ui-secondary-background);
|
||||
|
||||
.red-ui-editableList.scrollable {
|
||||
overflow-y: auto;
|
||||
background-color: aqua;
|
||||
// padding: 0 10px;
|
||||
// box-sizing: border-box;
|
||||
// height: calc(100% - 40px);
|
||||
}
|
||||
.red-ui-editableList-container {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
|
@ -72,11 +79,8 @@
|
|||
|
||||
}
|
||||
.red-ui-palette-editor-tab {
|
||||
position:absolute;
|
||||
top:35px;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.red-ui-palette-editor-toolbar {
|
||||
background: var(--red-ui-primary-background);
|
||||
|
|
@ -84,6 +88,15 @@
|
|||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--red-ui-primary-border-color);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px 12px;
|
||||
.red-ui-palette-editor-toolbar-actions {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.red-ui-palette-module-shade-status {
|
||||
color: var(--red-ui-secondary-text-color);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
.red-ui-palette-search {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
background: var(--red-ui-form-input-background);
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue