-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathshow-more-pagination.html
110 lines (97 loc) · 3.14 KB
/
show-more-pagination.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show More Pagination</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="How to create show more pagination">
<link href="joy.css" rel="stylesheet">
<style>
sr-hint, .sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
</style>
</head>
<body>
<a href="./index.html">List of all Examples</a>
<h1>Show More Pagination</h1>
This is an example to test a component which paginates with a 'Show More' button.
We want to test it to make sure that the pagination works in connection with a screen reader.
The idea is to focus the reader on the next new item when the "Show More" button is clicked.
To do so, it is necessary to set the <code>tabindex</code> on the elements to make them focussable.
<div id="list-beginning"><span class="sr-only">Element List</span></div>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>
<button is="show-more-btn" data-list="#list">Show More</button>
<a href="#list-beginning">Back to beginning of list</a>
<script>
if(this.customElements)
try{customElements.define('built-in',document.createElement('p').constructor,{'extends':'p'})}
catch(s){document.write('<script src="//unpkg.com/@ungap/custom-elements-builtin"><\x2fscript>')}
else
document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');
</script>
<script>
function html2dom(html) {
let tmp = document.createElement("html");
tmp.innerHTML = html;
let root = document.createDocumentFragment(); // allows for DOM queries
[].slice.call(tmp.childNodes).forEach(node => {
root.appendChild(node);
});
return root;
}
class ShowMorePagination extends HTMLButtonElement {
connectedCallback() {
this.counter = 5;
this.addEventListener("click", ev => {
ev.preventDefault();
this.setAttribute("aria-pressed", "true");
this.paginate();
});
}
paginate () {
var newUl = html2dom(`<ul>${this.dummyHtmlContent()}</ul>`);
var lis = [].slice.call(newUl.querySelectorAll("li"));
var firstLi = lis[0];
var list = this.list
lis.forEach(li => {
list.appendChild(li);
})
firstLi.setAttribute("tabindex", "-1");
firstLi.insertBefore(this.srHint(), firstLi.firstChild);
firstLi.focus();
this.setAttribute("aria-pressed", "false");
}
dummyHtmlContent () {
return [0,1,2,3]
.map(el => {
var ctr = this.counter++
return `<li>Element ${ctr}</li>`
})
.join("");
}
srHint () {
let hint = this.list.querySelector("sr-hint");
return hint || html2dom("<sr-hint>First new entry: </sr-hint>").querySelector("sr-hint");
}
get list () {
return document.querySelector(this.getAttribute("data-list"))
}
}
customElements.define('show-more-btn', ShowMorePagination, { extends: 'button' })
</script>
</body>
</html>