mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

feat: search bar for installed plugins

Browse source 
Adds a search bar to the `My Plugins` section,
allowing you to filter the installed plugins
This commit is contained in:
darmiel 2022-10-21 00:06:23 +02:00
parent 8af09253c8
commit 1a23099967
2 changed files with 21 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/controllers/dashboard/plugins/installed/index.html
View file

@ -1,6 +1,10 @@
<div id="pluginsPage" data-role="page" class="page type-interior pluginConfigurationPage withTabs fullWidthContent"> <div id="pluginsPage" 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 class="installedPlugins"></div> <div class="installedPlugins"></div>
</div> </div>
</div> </div>

18
src/controllers/dashboard/plugins/installed/index.js
View file

@ -112,7 +112,6 @@ function populateList(page, plugins, pluginConfigurationPages) {
if (plugin1.Name > plugin2.Name) { if (plugin1.Name > plugin2.Name) {
return 1; return 1;
} }
return -1; return -1;
}); });
@ -136,6 +135,12 @@ function populateList(page, plugins, pluginConfigurationPages) {
html += '</div>'; html += '</div>';
} }
// add search box listener
const searchBar = page.querySelector('#txtSearchPlugins');
if (searchBar) {
searchBar.addEventListener('input', () => onFilterType(page, searchBar));
}
installedPluginsElement.innerHTML = html; installedPluginsElement.innerHTML = html;
loading.hide(); loading.hide();
} }
@ -239,6 +244,17 @@ function onInstalledPluginsClick(e) {
} }
} }
function onFilterType(page, searchBar) {
const filter = searchBar.value.toLowerCase();
for (const card of page.querySelectorAll('.card')) {
if (filter && filter != '' && !card.textContent.toLowerCase().includes(filter)) {
card.style.display = 'none';
} else {
card.style.display = 'unset';
}
}
}
pageIdOn('pageshow', 'pluginsPage', function () { pageIdOn('pageshow', 'pluginsPage', function () {
libraryMenu.setTabs('plugins', 0, getTabs); libraryMenu.setTabs('plugins', 0, getTabs);
reloadList(this); reloadList(this);