remove scrollers without results on search

This commit is contained in:
Alexander Bocken 2023-11-08 20:28:13 +01:00
parent b8c8b73af5
commit 29e1b3be76
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 21 additions and 4 deletions

View File

@ -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}

View File

@ -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,7 +23,19 @@ 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'
})
}
search.addEventListener("input", () => {
@ -33,7 +47,10 @@ onMount(() => {
recipes.forEach(recipe => {
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];