-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpagination.js
More file actions
91 lines (79 loc) · 2.29 KB
/
pagination.js
File metadata and controls
91 lines (79 loc) · 2.29 KB
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
//-----------------------------------------------
// Total CMS Pagination Component
//-----------------------------------------------
export default class Pagination {
constructor(container, options = {}) {
this.container = container;
container.pagination = this;
this.pageKey = container.dataset.pageKey || 'p';
if (container.classList.contains('full')) {
this.initFullPagination();
} else {
this.initSimplePagination();
}
}
redirectToPage(page)
{
const url = new URL(window.location.href);
url.searchParams.set(this.pageKey, page);
window.location = url.href;
}
initSimplePagination()
{
this.pageEdit = this.container.querySelector('.pagination-current');
if (!this.pageEdit.isContentEditable) return;
this.pageEdit.addEventListener('keydown', event => this.pageEditKeyPress(event));
}
pageEditKeyPress(event)
{
if (!/^\d$/.test(event.key)
&& event.key !== 'Backspace'
&& event.key !== 'ArrowLeft'
&& event.key !== 'ArrowRight'
&& event.key !== 'Enter'
) {
event.preventDefault();
}
if (event.key === 'Enter') {
event.preventDefault();
this.pageEdit.blur();
this.redirectToPage(this.pageEdit.innerText);
}
}
initFullPagination() {
const prev = this.container.querySelector(".pagination-prev");
const next = this.container.querySelector(".pagination-next");
const pages = this.container.querySelector(".pagination-pages");
if (pages.scrollWidth < pages.clientWidth) {
// no need for the scroll on hover effect
return;
}
// pages.classList.add("scrollable");
this.scrollToActivePage(pages);
prev.addEventListener("pointerover", e => pages.scrollTo({
top : 0,
left : 0,
behavior : 'smooth'
}));
next.addEventListener("pointerover", e => pages.scrollTo({
top : 0,
left : pages.scrollWidth,
behavior : 'smooth'
}));
}
scrollToActivePage(pages)
{
const activePage = pages.querySelector('li.active');
if (activePage) {
const activePageRect = activePage.getBoundingClientRect();
const pagesRect = pages.getBoundingClientRect();
if (activePageRect.left < pagesRect.left || activePageRect.right > pagesRect.right) {
pages.scrollTo({
top: 0,
left: activePage.offsetLeft - pagesRect.width / 2 + activePageRect.width / 2,
behavior: 'smooth'
});
}
}
}
}