Make code more readable

This commit is contained in:
Woody 2023-11-26 17:35:29 +01:00
parent 443c9fba03
commit 7ea8f741f2
No known key found for this signature in database
GPG Key ID: 9872D7F5072789B2

View File

@ -2716,31 +2716,30 @@ function hideModes(txt)
} }
} }
*/ */
function search(f,l=null) function search(field, listId = null) {
{ field.nextElementSibling.style.display = (field.value !== '') ? 'block' : 'none';
f.nextElementSibling.style.display=(f.value!=='')?'block':'none'; if (!listId) return;
if (!l) return;
// clear filter if searching in fxlist // clear filter if searching in fxlist
if (l === 'fxlist' && f.value !== '') { if (listId === 'fxlist' && field.value !== '') {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{e.checked=false;}); gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { e.checked = false; });
} }
// do not search if filter is active // do not search if filter is active
if (gId("filters").querySelectorAll("input[type=checkbox]:checked").length) return; if (gId("filters").querySelectorAll("input[type=checkbox]:checked").length) return;
var el = gId(l).querySelectorAll('.lstI'); const listItems = gId(listId).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 = (listId === 'pcont' ? 0 : 1); i < listItems.length; i++) {
var it = el[i]; const listItem = listItems[i];
var itT = it.querySelector('.lstIname').innerText.toUpperCase(); const listItemName = listItem.querySelector('.lstIname').innerText.toUpperCase();
const itTsearchIndex = itT.indexOf(f.value.toUpperCase()); const searchIndex = listItemName.indexOf(field.value.toUpperCase());
it.style.display = (itTsearchIndex<0) ? 'none' : ''; listItem.style.display = (searchIndex < 0) ? 'none' : '';
it.dataset.searchIndex = itTsearchIndex; listItem.dataset.searchIndex = searchIndex;
} }
// sort list items by search index and name // sort list items by search index and name
const sortedListItems = Array.from(el).sort((a, b) => { const sortedListItems = Array.from(listItems).sort((a, b) => {
const aSearchIndex = parseInt(a.dataset.searchIndex); const aSearchIndex = parseInt(a.dataset.searchIndex);
const bSearchIndex = parseInt(b.dataset.searchIndex); const bSearchIndex = parseInt(b.dataset.searchIndex);
@ -2748,53 +2747,51 @@ function search(f,l=null)
return aSearchIndex - bSearchIndex; return aSearchIndex - bSearchIndex;
} }
const aName = a.querySelector('.lstIname').innerText.toUpperCase(); const aName = a.querySelector('.lstIname').innerText.toUpperCase();
const bName = b.querySelector('.lstIname').innerText.toUpperCase(); const bName = b.querySelector('.lstIname').innerText.toUpperCase();
return aName.localeCompare(bName); return aName.localeCompare(bName);
}); });
sortedListItems.forEach(item => { sortedListItems.forEach(item => {
gId(l).append(item); gId(listId).append(item);
}); });
} }
function clean(c) function clean(clearButton) {
{ clearButton.style.display = 'none';
c.style.display='none'; const inputField = clearButton.previousElementSibling;
c.previousElementSibling.value=''; inputField.value = '';
search(c.previousElementSibling, c.parentElement.nextElementSibling.id); search(inputField, clearButton.parentElement.nextElementSibling.id);
} }
function filterFocus(e) function filterFocus(e) {
{ const f = gId("filters");
let f = gId("filters");
if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition) if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition)
// compute sticky top (with delay for transition) // compute sticky top (with delay for transition)
setTimeout(()=>{ setTimeout(() => {
let sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight; const sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
sCol('--sti', sti+"px"); sCol('--sti', sti + "px");
}, 252); }, 252);
if (e.type === "blur") { if (e.type === "blur") {
setTimeout(()=>{ setTimeout(() => {
if (e.target === document.activeElement && document.hasFocus()) return; if (e.target === document.activeElement && document.hasFocus()) return;
f.classList.add('fade'); f.classList.add('fade');
},255); // wait with hiding }, 255); // wait with hiding
} }
} }
function filterFx() function filterFx() {
{ const inputField = gId('fxFind').children[0];
const searchIn = gId('fxFind').children[0]; inputField.value = '';
searchIn.value = ''; inputField.focus();
searchIn.focus(); clean(inputField.nextElementSibling);
clean(searchIn.nextElementSibling); const listItems = gId("fxlist").querySelectorAll('.lstI');
const el = gId("fxlist").querySelectorAll('.lstI'); for (let i = 1; i < listItems.length; i++) {
for (let i = 1; i < el.length; i++) { const listItem = listItems[i];
const it = el[i]; const listItemName = listItem.querySelector('.lstIname').innerText;
const itT = it.querySelector('.lstIname').innerText;
let hide = false; let hide = false;
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{if (e.checked && !itT.includes(e.dataset.flt)) hide = true;}); gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { if (e.checked && !listItemName.includes(e.dataset.flt)) hide = true; });
it.style.display = hide ? 'none' : ''; listItem.style.display = hide ? 'none' : '';
} }
} }