remove scrollers without results on search
This commit is contained in:
parent
b8c8b73af5
commit
29e1b3be76
@ -11,7 +11,7 @@ export let title
|
||||
gap: 2rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
.wrapper{
|
||||
.media_scroller_wrapper{
|
||||
background-color: var(--nord2);
|
||||
}
|
||||
h2{
|
||||
@ -23,7 +23,7 @@ h2{
|
||||
|
||||
|
||||
</style>
|
||||
<div class=wrapper>
|
||||
<div class=media_scroller_wrapper>
|
||||
{#if title}
|
||||
<h2>{title}</h2>
|
||||
{/if}
|
||||
|
@ -14,6 +14,8 @@ onMount(() => {
|
||||
const searchTerms = searchText.split(" ");
|
||||
const hasFilter = searchText.length > 0;
|
||||
|
||||
let scrollers_with_results = [];
|
||||
let scrollers = [];
|
||||
// for each recipe hide all but matched
|
||||
recipes.forEach(recipe => {
|
||||
const searchString = `${recipe.textContent} ${recipe.dataset.tags}`.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, "");
|
||||
@ -21,6 +23,18 @@ onMount(() => {
|
||||
|
||||
recipe.style.display = (isMatch ? 'flex' : 'none');
|
||||
recipe.classList.toggle("matched-recipe", hasFilter && isMatch);
|
||||
if(!scrollers.includes(recipe.parentNode)){
|
||||
scrollers.push(recipe.parentNode)
|
||||
}
|
||||
if(!scrollers_with_results.includes(recipe.parentNode) && isMatch){
|
||||
scrollers_with_results.push(recipe.parentNode)
|
||||
}
|
||||
})
|
||||
scrollers_with_results.forEach( scroller => {
|
||||
scroller.parentNode.style.display= 'block'
|
||||
})
|
||||
scrollers.filter(item => !scrollers_with_results.includes(item)).forEach( scroller => {
|
||||
scroller.parentNode.style.display= 'none'
|
||||
})
|
||||
}
|
||||
|
||||
@ -34,6 +48,9 @@ onMount(() => {
|
||||
recipe.style.display = 'flex';
|
||||
recipe.classList.remove("matched-recipe");
|
||||
})
|
||||
document.querySelectorAll(".media_scroller_wrapper").forEach( scroller => {
|
||||
scroller.style.display= 'block'
|
||||
})
|
||||
})
|
||||
|
||||
let paramString = window.location.href.split('?')[1];
|
||||
|
Loading…
Reference in New Issue
Block a user