search field working

This commit is contained in:
isUnknown 2024-04-09 18:37:45 +02:00
parent 4a310dcbbe
commit 4142493f0e
3 changed files with 51 additions and 18 deletions

View file

@ -14,11 +14,11 @@
class="panel panel--left"
x-data="{search: ''}"
>
<span class="search">
<div class="search">
<input
class="search__input"
type="text"
placeholder="page, auteur, année etc."
placeholder="titre / auteur / année / catégorie"
x-model="search"
>
<img
@ -26,9 +26,8 @@
class="search__icon"
alt="Icône loupe indiquant le champ de recherche."
>
</span>
<ul id="result"></ul>
<ul id="panel__items">
</div>
<ul class="panel__items">
<?php foreach($kirby->collection('years') as $year): ?>
<li
class="panel__item "
@ -39,33 +38,59 @@
:class="year ? '' : 'short'"
@click="year = !year"
>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?><span x-show="search.length > 0" x-text="` > 1`"></span></h3>
<h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
<div
class="panel__toggle-icon"
x-text="year ? '-' : '+'"
x-text="year || search.length > 0 ? '-' : '+'"
></div>
</button>
<div
class="panel-item-content"
x-show="year"
x-data="{edito: false}"
x-show="year || search.length > 0"
x-data='{ edito: false }'
>
<div
class="panel-item-content__edito"
:class="edito ? '' : 'short'"
x-show="search.length === 0"
>
<?= $year->edito() ?>
</div>
<button
:class="edito ? 'open' : 'close'"
class="see-more toggle left" @click="edito = !edito"
x-show="search.length === 0"
class="see-more toggle left"
@click="edito = !edito"
>Lire</button>
<ul class="panel-item-content__texts">
<?php foreach($year->children() as $article): ?>
<?php snippet(
'text-item',
array('article' => $article)
) ?>
<li
class="text"
x-data="{
title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
author: '<?= $article->author()->toUser()->name() ?>',
yearParent: '<?= $article->parent()->title()->value() ?>',
category: '<?= $article->category() ?>',
}"
x-show="
title.toLowerCase().includes(search.toLowerCase())
|| author.toLowerCase().includes(search.toLowerCase())
|| yearParent.toLowerCase().includes(search.toLowerCase())
|| category.toLowerCase().includes(search.toLowerCase())
"
>
<a href="<?= $article->url() ?>" class="texts__title no-line">
<h3><?= $article->title() ?></h3>
</a>
<div class="text__infos">
<p>
<span class="light">par</span>
<a class="author" href="/auteurs/<?= Str::slug($article->author()->toUser()->name()) ?>"><?= $article->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
</p>
</div>
</li>
<?php endforeach ?>
</ul>
</div>