feat: search bar for plugin catalogue

Adds a search bar to the `Catalogue` section,
allowing you to filter the available plugins
This commit is contained in:
Daniel 2022-10-21 09:05:11 +02:00
parent 8af09253c8
commit 3ef73904c1
No known key found for this signature in database
GPG key ID: A9896FFF5A793A20
2 changed files with 31 additions and 0 deletions

View file

@ -86,10 +86,37 @@ function populateList(options) {
options.noItemsElement.classList.remove('hide');
}
const searchBar = document.getElementById('txtSearchPlugins');
if (searchBar) {
searchBar.addEventListener('input', () => onSearchBarType(searchBar));
}
options.catalogElement.innerHTML = html;
loading.hide();
}
function onSearchBarType(searchBar) {
const filter = searchBar.value.toLowerCase();
for (const header of document.querySelectorAll("div .verticalSection")) {
// keep track of shown cards after each search
let shown = 0;
for (const card of header.querySelectorAll("div .card")) {
if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
card.style.display = 'none';
} else {
card.style.display = 'unset';
shown += 1;
}
}
// hide title if no cards are shown
if (shown <= 0) {
header.style.display = 'none';
} else {
header.style.display = 'unset';
}
}
}
function getPluginHtml(plugin, options, installedPlugins) {
let html = '';
let href = plugin.externalUrl ? plugin.externalUrl : '#/addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;