feat: select page web component

src/_includes/partials/paginator.liquid

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

src/assets/scripts/paginator.js

@@ -1,25 +0,0 @@
-window.onload = () => {
-  const pagination = document.getElementById('pagination')
-  const uri = window.location.pathname
-  const urlSegments = uri.split('/').filter(segment => segment !== '')
-  let pageNumber = parseInt(urlSegments[urlSegments.length - 1]) || 0
-  pagination.querySelector(`option[value="${pageNumber.toString()}"]`).setAttribute('selected', 'selected')
-
-  if (pagination) {
-    pagination.addEventListener('change', (event) => {
-      pageNumber = event.target.value
-
-      if (urlSegments.length === 0 || isNaN(urlSegments[urlSegments.length - 1])) {
-        urlSegments.push(pageNumber.toString())
-      } else {
-        urlSegments[urlSegments.length - 1] = pageNumber.toString()
-      }
-
-      if (pageNumber === 0) {
-        window.location.href = `${window.location.protocol}//${window.location.host}/`
-      } else {
-        window.location = `${window.location.protocol}//${window.location.host}/${urlSegments.join('/')}`
-      }
-    })
-  }
-}

src/assets/styles/index.css

@@ -413,7 +413,8 @@ select {
   line-height: var(--line-height-base);
 }
 
-.select {
+.select,
+select-pagination {
   border-radius: var(--rounded-full);
   background-color: var(--accent-color);
   padding: 0 var(--sizing-lg);
@@ -426,17 +427,22 @@ select {
 }
 
 .select,
-.select select {
+.select select,
+select-pagination,
+select-pagination select {
   min-height: calc(var(--sizing-3xl) * 1.25);
   min-width:  calc(var(--sizing-3xl) * 4);;
 }
 
 .select select,
-.select::after {
+.select::after,
+select-pagination select,
+select-pagination::after {
   grid-area: select;
 }
 
-.select::after {
+.select::after,
+select-pagination::after {
   content: '';
   width: var(--sizing-md);
   height: var(--sizing-sm);

src/posts/2024/enhancing-pagination-with-a-page-selector.md

@@ -40,4 +40,6 @@ We wait for the document to load, select the pagination DOM node, get the curren
 
   Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
 
-  With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
+  With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
+
+  {% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}