Improve search and filter functionality

This commit is contained in:
Woody 2023-11-23 15:48:47 +01:00
parent 6a793536dd
commit 155c12f657
No known key found for this signature in database
GPG Key ID: 9872D7F5072789B2

View File

@ -2720,25 +2720,46 @@ function search(f,l=null)
{ {
f.nextElementSibling.style.display=(f.value!=='')?'block':'none'; f.nextElementSibling.style.display=(f.value!=='')?'block':'none';
if (!l) return; if (!l) return;
// clear filter if searching in fxlist
if (l === 'fxlist' && f === document.activeElement) {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{e.checked=false;});
}
var el = gId(l).querySelectorAll('.lstI'); var el = gId(l).querySelectorAll('.lstI');
// filter list items but leave (Default & Solid) always visible // filter list items but leave (Default & Solid) always visible
for (i = (l==='pcont'?0:1); i < el.length; i++) { for (i = (l==='pcont'?0:1); i < el.length; i++) {
var it = el[i]; var it = el[i];
var itT = it.querySelector('.lstIname').innerText.toUpperCase(); var itT = it.querySelector('.lstIname').innerText.toUpperCase();
it.style.display = (itT.indexOf(f.value.toUpperCase())<0) ? 'none' : ''; const itTsearchIndex = itT.indexOf(f.value.toUpperCase());
it.style.display = (itTsearchIndex<0) ? 'none' : '';
it.dataset.searchIndex = itTsearchIndex;
} }
// sort list items by search index and name
const sortedListItems = Array.from(el).sort((a, b) => {
const aSearchIndex = parseInt(a.dataset.searchIndex);
const bSearchIndex = parseInt(b.dataset.searchIndex);
if (aSearchIndex !== bSearchIndex) {
return aSearchIndex - bSearchIndex;
}
const aName = a.querySelector('.lstIname').innerText.toUpperCase();
const bName = b.querySelector('.lstIname').innerText.toUpperCase();
return aName.localeCompare(bName);
});
sortedListItems.forEach(item => {
gId(l).append(item);
});
} }
function clean(c) function clean(c)
{ {
c.style.display='none'; c.style.display='none';
var i=c.previousElementSibling; c.previousElementSibling.value='';
i.value=''; search(c.previousElementSibling, c.parentElement.nextElementSibling.id);
i.focus();
i.dispatchEvent(new Event('input'));
if (i.parentElement.id=='fxFind') {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{e.checked=false;});
}
} }
function filterFocus(e) function filterFocus(e)
@ -2760,14 +2781,19 @@ function filterFocus(e)
} }
} }
function filterFx(o) function filterFx()
{ {
if (!o) return; const searchIn = gId('fxFind').children[0];
let i = gId('fxFind').children[0]; searchIn.value = '';
i.value=!o.checked?'':o.dataset.flt; clean(searchIn.nextElementSibling);
i.focus(); const el = gId("fxlist").querySelectorAll('.lstI');
i.dispatchEvent(new Event('input')); for (let i = 1; i < el.length; i++) {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{if(e!==o)e.checked=false;}); const it = el[i];
const itT = it.querySelector('.lstIname').innerText;
let hide = false;
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{if (e.checked && !itT.includes(e.dataset.flt)) hide = true;});
it.style.display = hide ? 'none' : '';
}
} }
// make sure "dur" and "transition" are arrays with at least the length of "ps" // make sure "dur" and "transition" are arrays with at least the length of "ps"