Skip to content

Commit

Permalink
Merge pull request #3540 from WoodyLetsCode/search
Browse files Browse the repository at this point in the history 
Improve search and filter functionality
  • Loading branch information
@blazoncek
blazoncek authored Nov 29, 2023
2 parents e71c72b + 9d6d1e4 commit 8c69b85
Show file tree
Hide file tree
Showing 4 changed files with 2,134 additions and 2,085 deletions.
2 changes: 2 additions & 0 deletions wled00/data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,6 +469,7 @@ button {
height: 54px;
line-height: 1.5;
padding-bottom: 8px;
pointer-events: none;
}

/* New tooltip */
Expand Down Expand Up @@ -1240,6 +1241,7 @@ TD .checkmark, TD .radiomark {
.filter .fchkl {
margin: 0 4px;
min-width: 20px;
pointer-events: auto;
}

.lbl-l {
Expand Down
16 changes: 8 additions & 8 deletions wled00/data/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,33 +197,33 @@
<div id="Effects" class="tabcontent">
<div id="fx">
<p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind">
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="filterFocus(event);search(this,'fxlist');" onblur="filterFocus(event);" />
<div class="staytop fnd" id="fxFind" onmousedown="preventBlur(event);">
<input type="text" placeholder="Search" oninput="search(this,'fxlist')" onfocus="filterFocus(event);search(this,'fxlist');" onblur="filterFocus(event);">
<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
<i class="icons search-icon" style="cursor:pointer;">&#xe0a1;</i>
<div id="filters" class="filter fade">
<label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
<label id="filter0D" tooltip="Single pixel" class="check fchkl">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#8226;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
<label id="filter1D" tooltip="1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#8942;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
<label id="filter2D" tooltip="2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#9638;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
<label id="filterVol" tooltip="Volume" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#9834;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
<label id="filterFreq" tooltip="Frequency" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this);">
<input type="checkbox" data-flt="&#9835;" onchange="filterFx();">
<span class="checkmark"></span>
</label>
</div>
Expand Down
115 changes: 76 additions & 39 deletions wled00/data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ function onLoad()

tooltip();
resetPUtil();
initFilters();

if (localStorage.getItem('pcm') == "true" || (!/Mobi/.test(navigator.userAgent) && localStorage.getItem('pcm') == null)) togglePcMode(true);
applyCfg();
Expand Down Expand Up @@ -2716,58 +2717,94 @@ function hideModes(txt)
}
}
*/
function search(f,l=null)
{
f.nextElementSibling.style.display=(f.value!=='')?'block':'none';
if (!l) return;
var el = gId(l).querySelectorAll('.lstI');
function search(field, listId = null) {
field.nextElementSibling.style.display = (field.value !== '') ? 'block' : 'none';
if (!listId) return;

// clear filter if searching in fxlist
if (listId === 'fxlist' && field.value !== '') {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { e.checked = false; });
}

// do not search if filter is active
if (gId("filters").querySelectorAll("input[type=checkbox]:checked").length) return;

const listItems = gId(listId).querySelectorAll('.lstI');
// filter list items but leave (Default & Solid) always visible
for (i = (l==='pcont'?0:1); i < el.length; i++) {
var it = el[i];
var itT = it.querySelector('.lstIname').innerText.toUpperCase();
it.style.display = (itT.indexOf(f.value.toUpperCase())<0) ? 'none' : '';
for (i = (listId === 'pcont' ? 0 : 1); i < listItems.length; i++) {
const listItem = listItems[i];
const listItemName = listItem.querySelector('.lstIname').innerText.toUpperCase();
const searchIndex = listItemName.indexOf(field.value.toUpperCase());
listItem.style.display = (searchIndex < 0) ? 'none' : '';
listItem.dataset.searchIndex = searchIndex;
}

// sort list items by search index and name
const sortedListItems = Array.from(listItems).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(listId).append(item);
});
}

function clean(c)
{
c.style.display='none';
var i=c.previousElementSibling;
i.value='';
i.focus();
i.dispatchEvent(new Event('input'));
if (i.parentElement.id=='fxFind') {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{e.checked=false;});
}
function clean(clearButton) {
clearButton.style.display = 'none';
const inputField = clearButton.previousElementSibling;
inputField.value = '';
search(inputField, clearButton.parentElement.nextElementSibling.id);
}

function filterFocus(e)
{
let f = gId("filters");
function initFilters() {
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { e.checked = false; });
}

function filterFocus(e) {
const f = gId("filters");
if (e.type === "focus") f.classList.remove('fade'); // immediately show (still has transition)
// compute sticky top (with delay for transition)
setTimeout(()=>{
let sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
sCol('--sti', sti+"px");
setTimeout(() => {
const sti = parseInt(getComputedStyle(d.documentElement).getPropertyValue('--sti')) + (e.type === "focus" ? 1 : -1) * f.offsetHeight;
sCol('--sti', sti + "px");
}, 252);
if (e.type === "blur") {
let t = e.relatedTarget ? e.relatedTarget : e.explicitOriginalTarget;
do {
if (t.id && (t.id === "fxFind")) { setTimeout(()=>{t.firstElementChild.focus();},150); return; }
t = t.parentElement;
} while (t.tagName !== "BODY");
setTimeout(()=>{f.classList.add('fade');},255); // wait with hiding
setTimeout(() => {
if (e.target === document.activeElement && document.hasFocus()) return;
// do not hide if filter is active
if (gId("filters").querySelectorAll("input[type=checkbox]:checked").length) return;
f.classList.add('fade');
}, 255); // wait with hiding
}
}

function filterFx(o)
{
if (!o) return;
let i = gId('fxFind').children[0];
i.value=!o.checked?'':o.dataset.flt;
i.focus();
i.dispatchEvent(new Event('input'));
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e)=>{if(e!==o)e.checked=false;});
function filterFx() {
const inputField = gId('fxFind').children[0];
inputField.value = '';
inputField.focus();
clean(inputField.nextElementSibling);
const listItems = gId("fxlist").querySelectorAll('.lstI');
for (let i = 1; i < listItems.length; i++) {
const listItem = listItems[i];
const listItemName = listItem.querySelector('.lstIname').innerText;
let hide = false;
gId("filters").querySelectorAll("input[type=checkbox]").forEach((e) => { if (e.checked && !listItemName.includes(e.dataset.flt)) hide = true; });
listItem.style.display = hide ? 'none' : '';
}
}

function preventBlur(e) {
if (e.target === gId("fxFind").children[0] || e.target === gId("filters")) return;
e.preventDefault();
}

// make sure "dur" and "transition" are arrays with at least the length of "ps"
Expand Down
Loading

0 comments on commit 8c69b85

Please sign in to comment.