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

[feat] facet clearing buttons working

Browse Source
This commit is contained in:
Thad Miller
2026-03-02 16:13:24 -05:00
parent be4104cb0b
commit 1f521afa3a
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/CardGrid.astro
View File

@@ -15,17 +15,8 @@ import BackToTop from "./BackToTop.astro"
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-9 mt-0"> <div class="col-sm-12 col-md-9 mt-0">
<div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small"> <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small"></div>
<span class="me-1">Filtered by:</span> <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5"></div>
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0">Filter 1</li>
<li class="list-group-item border-0">Filter 2</li>
<li class="list-group-item border-0">Filter 3</li>
</ul>
<span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters"></button></span>
</div>
<div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5">
</div>
<div id="notfound"></div> <div id="notfound"></div>
</div> </div>
</div> </div>

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

@@ -145,6 +145,21 @@ const facets = searchResults.results.slice(1).map((result: any) => {
))} ))}
</div> </div>
<div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small" hx-swap-oob="true">
{(Object.entries(filters).length > 0) &&
<span class="me-1">Filtered by:</span>
<ul class="list-group list-group-horizontal">
{Object.entries(filters).map(([filter, values]) => (
values.map((value) => (
<li data-facet={filter} data-value={value} class="list-group-item remove-filter">{value}</li>
))
))}
</ul>
<span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span>
}
</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 // Filter the facet values to make things like Set easier to find
@@ -164,14 +179,25 @@ const facets = searchResults.results.slice(1).map((result: any) => {
} }
// Clear all facets and resubmit the form with only the text box // Clear all facets and resubmit the form with only the text box
const clearfilters = document.getElementById('clear-filters'); const clearAllFilters = (e) => {
clearfilters.addEventListener('click', (e) => { const facetContainer = document.getElementById('facetContainer');
const facetContainer = clearfilters.closest('#facetContainer');
for (const item of facetContainer.querySelectorAll('input[type=checkbox]')) { for (const item of facetContainer.querySelectorAll('input[type=checkbox]')) {
item.checked = false; item.checked = false;
} }
document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true})); document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
}); }
document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
// Remove single facet value
for (const li of document.querySelectorAll('.remove-filter')) {
li.addEventListener('click', (e) => {
const filter = li.getAttribute('data-facet');
const value = li.getAttribute('data-value');
document.querySelector(`.form-check-input[name="${filter}"][value="${value}"]`).checked = false;
document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
});
}
</script> </script>
} }