tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[feat] Clear Filters

Browse Source
This commit is contained in:
Thad Miller
2026-03-02 11:48:10 -05:00
parent 78af92a16a
commit 521ee2d2a7
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/partials/cards.astro
View File

@@ -122,7 +122,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
<div id="facetContainer" hx-swap-oob="true"> <div id="facetContainer" hx-swap-oob="true">
<div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center"> <div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
<button type="reset" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-danger me-2">Clear</button> <button type="button" data-bs-dismiss="offcanvas" class="btn btn-danger me-2" id="clear-filters">Clear</button>
<button type="submit" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-success">Apply Filters</button> <button type="submit" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-success">Apply Filters</button>
</div> </div>
{facets.map((facet) => ( {facets.map((facet) => (
@@ -146,6 +146,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div> </div>
<script define:vars={{ totalHits, filters, facets }} is:inline> <script define:vars={{ totalHits, filters, facets }} is:inline>
// Filter the facet values to make things like Set easier to find
const facetfilters = document.querySelectorAll('.facet-filter'); const facetfilters = document.querySelectorAll('.facet-filter');
for (const facetfilter of facetfilters) { for (const facetfilter of facetfilters) {
const facetgroup = facetfilter.closest('.facet-group'); const facetgroup = facetfilter.closest('.facet-group');
@@ -153,13 +155,24 @@ const facets = searchResults.results.slice(1).map((result: any) => {
const facetitems = facetlist.querySelectorAll('.facet-item'); const facetitems = facetlist.querySelectorAll('.facet-item');
facetfilter.addEventListener('input', (e) => { facetfilter.addEventListener('input', (e) => {
const match = e.target.value.toLowerCase(); const match = e.target.value.toLowerCase();
for (item of facetitems) { for (const item of facetitems) {
const text = item.getAttribute('data-facet-value'); const text = item.getAttribute('data-facet-value');
if (text.includes(match)) item.style.display = ''; // Show if (text.includes(match)) item.style.display = ''; // Show
else item.style.display = 'none'; // Hide else item.style.display = 'none'; // Hide
} }
}); });
} }
// Clear all facets and resubmit the form with only the text box
const clearfilters = document.getElementById('clear-filters');
clearfilters.addEventListener('click', (e) => {
const facetContainer = clearfilters.closest('#facetContainer');
for (const item of facetContainer.querySelectorAll('input[type=checkbox]')) {
item.checked = false;
}
document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
});
</script> </script>
} }