cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: progressively enhance select pagination

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-04 14:12:12 -07:00
parent ee6ce6cbc4
commit 336c470a49
No known key found for this signature in database
5 changed files with 95 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/_includes/partials/paginator.liquid
View file

@ -2,6 +2,10 @@
{% render "../../assets/styles/components/paginator.css" %}
{% endcapture %}
<style>{{ css }}</style>
{% capture js %}
{% render "../../assets/scripts/paginator.js" %}
{% endcapture %}
<script>{{ js }}</script>
<nav aria-label="Blog pagination" class="pagination flex--centered">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
@ -15,8 +19,17 @@
{% tablericon "arrow-left" "Prevous" %}
</span>
{% endif %}
<div class="text--centered">
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
<noscript>
<div class="text--centered">
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
</div>
</noscript>
<div class="select client-side">
<select id="pagination">
{% for pageEntry in pagination.pages %}
<option value="{{ forloop.index | minus: 1 }}">{{ forloop.index }} of {{ pagination.links.size }}</option>
{% endfor %}
</select>
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" aria-label="Next page">