cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: search bar for plugin catalogue

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/controllers/dashboard/plugins/available/index.html
View File

@ -1,6 +1,10 @@
<div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent"> <div id="pluginCatalogPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent">
<div> <div>
<div class="content-primary"> <div class="content-primary">
<div class="inputContainer">
<label class="inputLabel" for="txtSearchPlugins">${Search}</label>
<input id="txtSearchPlugins" name="txtSearchPlugins" type="text" is="emby-input" class="emby-input">
</div>
<div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div> <div id="noPlugins" class="hide">${MessageNoAvailablePlugins}</div>
<div id="pluginTiles" style="text-align:left;"></div> <div id="pluginTiles" style="text-align:left;"></div>
</div> </div>

27
src/controllers/dashboard/plugins/available/index.js
View File

@ -86,10 +86,37 @@ function populateList(options) {
options.noItemsElement.classList.remove('hide'); options.noItemsElement.classList.remove('hide');
} }
const searchBar = document.getElementById('txtSearchPlugins');
if (searchBar) {
searchBar.addEventListener('input', () => onSearchBarType(searchBar));
}
options.catalogElement.innerHTML = html; options.catalogElement.innerHTML = html;
loading.hide(); 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) { function getPluginHtml(plugin, options, installedPlugins) {
let html = ''; let html = '';
let href = plugin.externalUrl ? plugin.externalUrl : '#/addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid; let href = plugin.externalUrl ? plugin.externalUrl : '#/addplugin.html?name=' + encodeURIComponent(plugin.name) + '&guid=' + plugin.guid;