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

feat: select page web component

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-07 09:42:49 -07:00
parent 5cda0d563f
commit 993266981c
No known key found for this signature in database
7 changed files with 52 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,7 @@
{% render "../../assets/styles/components/paginator.css" %}
{% endcapture %}
<style>{{ css }}</style>
{% capture js %}
{% render "../../assets/scripts/paginator.js" %}
{% endcapture %}
<script>{{ js }}</script>
<script type="module" src="/assets/scripts/components/select-pagination.js"></script>
<nav aria-label="Blog pagination" class="pagination flex--centered">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
@ -19,18 +16,18 @@
{% tablericon "arrow-left" "Prevous" %}
</span>
{% endif %}
<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" aria-label="Page selection">
<select-pagination>
<select aria-label="Page selection">
{% for pageEntry in pagination.pages %}
<option value="{{ forloop.index | minus: 1 }}">{{ forloop.index }} of {{ pagination.links.size }}</option>
{% endfor %}
</select>
</div>
<noscript>
<div class="text--centered">
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
</div>
</noscript>
</select-pagination>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}" aria-label="Next page">
{% tablericon "arrow-right" "Next" %}