feat: select page web component
This commit is contained in:
Cory Dransfeldt
parent
5cda0d563f
commit
993266981c
7 changed files with 52 additions and 50 deletions
|
|
@ -64,6 +64,9 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
|
||||
})
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@cdransf/select-pagination/select-pagination.js': 'assets/scripts/components/select-pagination.js',
|
||||
})
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@zachleat/webcare-webshare/webcare-webshare.js': 'assets/scripts/components/webcare-webshare.js'
|
||||
})
|
||||
|
|
|
|||
30
package-lock.json
generated
30
package-lock.json
generated
|
|
@ -1,21 +1,21 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "9.5.1",
|
||||
"version": "9.6.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "9.5.1",
|
||||
"version": "9.6.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.2.2",
|
||||
"@cdransf/select-pagination": "^1.0.2",
|
||||
"@cdransf/theme-toggle": "^1.2.3",
|
||||
"@daviddarnes/mastodon-post": "^1.1.1",
|
||||
"@remy/webmention": "^1.5.0",
|
||||
"@zachleat/webcare-webshare": "^1.0.3",
|
||||
"minisearch": "^6.3.0",
|
||||
"terser": "^5.30.1",
|
||||
"youtube-video-element": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
"markdown-it-anchor": "^8.4.1",
|
||||
"markdown-it-footnote": "^4.0.0",
|
||||
"slugify": "^1.6.6",
|
||||
"terser": "^5.30.1",
|
||||
"writing-stats": "^1.0.6"
|
||||
}
|
||||
},
|
||||
|
|
@ -1219,6 +1220,11 @@
|
|||
"integrity": "sha512-hL94Eez7twe31eQzH4iNk6bb3HjRc2Qnqq+d1O9XpVhKnJPKkMlp+trqnidvos8EEqU4H3VkyVANachFm5cxSw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@cdransf/select-pagination": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@cdransf/select-pagination/-/select-pagination-1.0.2.tgz",
|
||||
"integrity": "sha512-wDQ/jaBSZNf4bUB5NXC0G86IJlOEEyUBaOmRNOoMjmFhBW6RXVXhAZr6ggBksbSi7guImZgdW556CxeGiJjt7w=="
|
||||
},
|
||||
"node_modules/@cdransf/theme-toggle": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.3.tgz",
|
||||
|
|
@ -1699,6 +1705,7 @@
|
|||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
|
|
@ -1712,6 +1719,7 @@
|
|||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -1720,6 +1728,7 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
|
||||
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -1728,6 +1737,7 @@
|
|||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25"
|
||||
|
|
@ -1736,12 +1746,14 @@
|
|||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
|
||||
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
|
|
@ -2920,6 +2932,7 @@
|
|||
"version": "8.11.3",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
|
||||
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -3178,7 +3191,8 @@
|
|||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.7",
|
||||
|
|
@ -6330,6 +6344,7 @@
|
|||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -6338,6 +6353,7 @@
|
|||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
|
|
@ -6427,6 +6443,7 @@
|
|||
"version": "5.30.3",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
|
||||
"integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.8.2",
|
||||
|
|
@ -6443,7 +6460,8 @@
|
|||
"node_modules/terser/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/timers-ext": {
|
||||
"version": "0.1.7",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "9.6.4",
|
||||
"version": "9.7.0",
|
||||
"description": "The source for my personal site. Built using 11ty.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.2.2",
|
||||
"@cdransf/select-pagination": "^1.0.2",
|
||||
"@cdransf/theme-toggle": "^1.2.3",
|
||||
"@daviddarnes/mastodon-post": "^1.1.1",
|
||||
"@remy/webmention": "^1.5.0",
|
||||
"@zachleat/webcare-webshare": "^1.0.3",
|
||||
"minisearch": "^6.3.0",
|
||||
"terser": "^5.30.1",
|
||||
"youtube-video-element": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
"markdown-it-anchor": "^8.4.1",
|
||||
"markdown-it-footnote": "^4.0.0",
|
||||
"slugify": "^1.6.6",
|
||||
"terser": "^5.30.1",
|
||||
"writing-stats": "^1.0.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -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('/')}`
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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' %}
|
||||
Reference in a new issue