search: pagination and scroll, add range counter, mobile version

This commit is contained in:
Pontoporeia
2026-07-03 16:53:16 +02:00
parent e607833b2e
commit 880d169e72
8 changed files with 378 additions and 116 deletions
+18 -10
View File
@@ -27,34 +27,42 @@ $paginationUrl = static function(int $targetPage) use ($baseParams): string {
$atFirst = $page <= 1;
$atLast = $page >= $totalPages;
/** Build HTMX attributes for a non-disabled pagination link. */
$hxAttrs = static function(string $url): string {
return 'hx-get="' . htmlspecialchars($url) . '"'
. ' hx-target="#search-results"'
. ' hx-swap="outerHTML"'
. ' hx-push-url="' . htmlspecialchars($url) . '"';
};
?>
<nav class="pagination-wrap" aria-label="Pagination">
<ul>
<li>
<a href="<?= $paginationUrl(1) ?>"
<li class="pagination-edge">
<a href="<?= $firstUrl = $paginationUrl(1) ?>"
class="pagination-btn<?= $atFirst ? ' disabled' : '' ?>"
<?= $atFirst ? 'aria-disabled="true" tabindex="-1"' : '' ?>
<?= $atFirst ? 'aria-disabled="true" tabindex="-1"' : $hxAttrs($firstUrl) ?>
aria-label="Première page">«</a>
</li>
<li>
<a href="<?= $paginationUrl(max(1, $page - 1)) ?>"
<a href="<?= $prevUrl = $paginationUrl(max(1, $page - 1)) ?>"
class="pagination-btn<?= $atFirst ? ' disabled' : '' ?>"
<?= $atFirst ? 'aria-disabled="true" tabindex="-1"' : '' ?>
<?= $atFirst ? 'aria-disabled="true" tabindex="-1"' : $hxAttrs($prevUrl) ?>
aria-label="Page précédente"></a>
</li>
<li class="pagination-info" aria-current="page">
<span class="page-current"><?= $page ?></span> / <?= $totalPages ?>
</li>
<li>
<a href="<?= $paginationUrl(min($totalPages, $page + 1)) ?>"
<a href="<?= $nextUrl = $paginationUrl(min($totalPages, $page + 1)) ?>"
class="pagination-btn<?= $atLast ? ' disabled' : '' ?>"
<?= $atLast ? 'aria-disabled="true" tabindex="-1"' : '' ?>
<?= $atLast ? 'aria-disabled="true" tabindex="-1"' : $hxAttrs($nextUrl) ?>
aria-label="Page suivante"></a>
</li>
<li>
<a href="<?= $paginationUrl($totalPages) ?>"
<li class="pagination-edge">
<a href="<?= $lastUrl = $paginationUrl($totalPages) ?>"
class="pagination-btn<?= $atLast ? ' disabled' : '' ?>"
<?= $atLast ? 'aria-disabled="true" tabindex="-1"' : '' ?>
<?= $atLast ? 'aria-disabled="true" tabindex="-1"' : $hxAttrs($lastUrl) ?>
aria-label="Dernière page">»</a>
</li>
</ul>