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