https://www.ncpc.org.sg/assets/js/pagination-util.js

1"use strict";
2
3// Populate the pagination elements
4function displayPagination() {
5  document.querySelector(".pagination").style.display = "flex";
6  var pagination = document.getElementById('paginator-pages');
7
8  var _loop = function _loop(i) {
9    var ele = document.createElement("span");
10    var text = document.createTextNode(i + 1);
11
12    ele.appendChild(text);
13    ele.onclick = function (e) {
14      changePage(e.target, i);
15    };
16    pagination.appendChild(ele);
17  };
18
19  for (var i = 0; i < pageResults.length; i++) {
20    _loop(i);
21  }
22
23  // Create page display for mobile
24  const paginationMobile = document.getElementById('paginator-pages-mobile')
25  if (paginationMobile) {
26    const ele = document.createElement("span")
27    const text = document.createTextNode(`Page`)
28    ele.classList.add("is-full-height", "is-full-width", "remove-border")
29    ele.style.width = "100%"
30    ele.appendChild(text)
31    paginationMobile.appendChild(ele)
32  }
33
34  // Initialise selected page and nav arrows
35  setCurrentPage(pagination.firstElementChild);
36  displayNavArrows(currentPageIndex);
37  setNavArrowHandlers();
38}
39
40// Set click handlers for nav arrows
41function setNavArrowHandlers() {
42  var farLeft = document.querySelector(".pagination .bx.bx-chevrons-left");
43  var left = document.querySelector(".pagination .sgds-icon.sgds-icon-arrow-left");
44  var farRight = document.querySelector(".pagination .bx.bx-chevrons-right");
45  var right = document.querySelector(".pagination .sgds-icon.sgds-icon-arrow-right");
46  var sel = document.querySelector("#paginator-pages .selected-page");
47  var pagination = document.getElementById('paginator-pages');
48
49  if (farLeft) farLeft.onclick = function (e) {
50    changePage(pagination.firstElementChild, 0);
51  };
52  left.onclick = function (e) {
53    var sel = document.querySelector("#paginator-pages .selected-page");
54    changePage(sel.previousElementSibling, currentPageIndex - 1);
55  };
56
57  if (farRight) farRight.onclick = function (e) {
58    const totalPages = pagination.children[pagination.children.length - 1].textContent
59    changePage(pagination.lastElementChild, totalPages - 1);
60  };
61  right.onclick = function (e) {
62    var sel = document.querySelector("#paginator-pages .selected-page");
63    changePage(sel.nextElementSibling, currentPageIndex + 1);
64  };
65}
66
67function changePageUtil(curr, index) {
68  var prev = document.querySelector("#paginator-pages .selected-page");
69  prev.className = "";
70  prev.style.pointerEvents = "auto";
71  currentPageIndex = index;
72  setCurrentPage(curr);
73  displayNavArrows(index);
74  scrollToTop();
75}
76
77function displayNavArrows(i) {
78  var farLeft = document.querySelector(".pagination .bx.bx-chevrons-left");
79  var left = document.querySelector(".pagination .sgds-icon.sgds-icon-arrow-left");
80  var farRight = document.querySelector(".pagination .bx.bx-chevrons-right");
81  var right = document.querySelector(".pagination .sgds-icon.sgds-icon-arrow-right");
82
83  if (i === 0) {
84    if (farLeft) farLeft.classList.add("sgds-icon-disabled");
85    left.classList.add("sgds-icon-disabled");
86  } else {
87    if (farLeft) farLeft.classList.remove("sgds-icon-disabled");
88    left.classList.remove("sgds-icon-disabled");
89  }
90  if (i === pageResults.length - 1) {
91    if (farRight) farRight.classList.add("sgds-icon-disabled");
92    right.classList.add("sgds-icon-disabled");
93  } else {
94    if (farRight) farRight.classList.remove("sgds-icon-disabled");
95    right.classList.remove("sgds-icon-disabled");
96  }
97}
98
99function resetDisplayPages(pages) {
100  for (var p = 0; p < pages.length; p++) {
101    pages[p].classList.add("is-hidden-mobile");
102    pages[p].style.display = "none";
103  }
104}
105
106// function to ensure that number of pagination btns 
107// displayed are constant
108function computeAdjacentPages(max) {
109  var btns = max;
110  if (currentPageIndex < max) {
111    btns += max - currentPageIndex;
112  }
113  if (pageResults.length - currentPageIndex - 1 < max) {
114    btns += max - (pageResults.length - currentPageIndex - 1);
115  }
116  return btns;
117}
118
119function setCurrentPage(ele) {
120  var pages = document.getElementById('paginator-pages').children;
121  resetDisplayPages(pages);
122
123  ele.className = "selected-page";
124  ele.style.display = "inline-block";
125  ele.style.pointerEvents = "none";
126
127  for (var i = 1; i <= computeAdjacentPages(MAX_ADJACENT_PAGE_BTNS); i++) {
128    if (pages[currentPageIndex + i]) {
129      pages[currentPageIndex + i].style.display = "inline-block";
130    }
131    if (pages[currentPageIndex - i]) {
132      pages[currentPageIndex - i].style.display = "inline-block";
133    }
134  }
135  for (var _i = 1; _i <= computeAdjacentPages(MAX_ADJACENT_MOBILE_PAGE_BTNS); _i++) {
136    if (pages[currentPageIndex + _i]) {
137      pages[currentPageIndex + _i].classList.remove("is-hidden-mobile");
138    }
139    if (pages[currentPageIndex - _i]) {
140      pages[currentPageIndex - _i].classList.remove("is-hidden-mobile");
141    }
142  }
143  const mobilePage = document.getElementById("paginator-pages-mobile")
144  if (mobilePage) {
145    mobilePage.children[0].textContent = `Page ${currentPageIndex + 1}`
146  }
147}
148
149function splitPages(results, pageSize) {
150  var tempArray = [];
151
152  for (var i = 0; i < results.length; i += pageSize) {
153    var chunk = results.slice(i, i + pageSize);
154    tempArray.push(chunk);
155  }
156
157  return tempArray;
158}
159
160function scrollToTop() {
161  // scroll to top of results
162  window.scroll({ top: 0, left: 0, behavior: 'smooth' });
163}