https://www.ncpc.org.sg/assets/js/paginate-resources.js

1"use strict";
2
3var PAGE_SIZE = 12;
4var MAX_ADJACENT_PAGE_BTNS = 4;
5var MAX_ADJACENT_MOBILE_PAGE_BTNS = 1;
6var pageResults = void 0;
7var currentPageIndex = 0;
8var resourceCardArray = void 0;
9var filteredArray = void 0;
10
11paginateResources();
12
13document.getElementById('apply-filter-recent').addEventListener('click', function () {
14  return applyFilter('Recent');
15});
16document.getElementById('year-filter-mobile').addEventListener('change', function (event) {
17  return applyFilter(event.target.value);
18});
19
20// Main function to paginate resource page
21function paginateResources() {
22  resourceCardArray = Array.prototype.slice.call(document.getElementsByClassName("resource-card-element")); // Convert NodeList into Array
23  // 1. Display the years that are available
24  var earliestYear = findEarliestYear();
25  var currYear = new Date().getFullYear();
26  displayFilterDropdown(earliestYear, currYear);
27
28  var selectedYear = "Recent";
29  applyFilter(selectedYear);
30}
31
32function applyFilter(selectedYear) {
33  hideAllPostsAndPagination();
34
35  // Only keep posts in the selected year
36  filteredArray = extractPostsByYear(selectedYear);
37
38  pageResults = splitPages(filteredArray, PAGE_SIZE);
39
40  // Reset the current page index to 0
41  currentPageIndex = 0;
42  unhideChunk(currentPageIndex, currentPageIndex);
43
44  var filterDropdownDesktop = document.getElementById('sgds-selector-text-desktop');
45  filterDropdownDesktop.innerHTML = selectedYear;
46
47  if (!filteredArray.length || filteredArray.length <= PAGE_SIZE) return;
48  displayPagination();
49}
50
51function yearHasPosts(year) {
52  for (var i = 0; i < resourceCardArray.length; i++) {
53    var post = resourceCardArray[i];
54    if (Number(post.id) === year) {
55      return true;
56    }
57  }
58  return false;
59}
60
61function displayFilterDropdown(earliestYear, currYear) {
62  var yearFilterDesktop = document.getElementById('year-filter-desktop');
63  var yearFilterMobile = document.getElementById('year-filter-mobile');
64
65  for (var year = earliestYear; year <= currYear; year++) {
66    if (!yearHasPosts(year)) continue;
67    // Creating the select element for mobile view
68    var option = document.createElement("option");
69    option.value = year;
70    option.text = year;
71    yearFilterMobile.appendChild(option);
72
73    // Creating the a tags for desktop view
74    var a_element = document.createElement("a");
75    a_element.id = year;
76    a_element.classList.add("bp-dropdown-item", "padding--top--sm", "padding--bottom--none");
77    a_element.onclick = function () {
78      var closureYear = year.toString();
79      return function () {
80        applyFilter(closureYear);
81      };
82    }();
83
84    yearFilterDesktop.appendChild(a_element);
85    var p_element = document.createElement("p");
86    p_element.innerHTML = year;
87    a_element.appendChild(p_element);
88  }
89}
90
91function hideAllPostsAndPagination() {
92  for (var postIndex = 0; postIndex < resourceCardArray.length; postIndex++) {
93    if (!resourceCardArray[postIndex].classList.contains("hide")) {
94      resourceCardArray[postIndex].classList.add("hide");
95    }
96  }
97
98  var paginationElement = document.getElementById("paginator-pages");
99  while (paginationElement.firstElementChild) {
100    paginationElement.removeChild(paginationElement.firstElementChild);
101  }
102
103  document.querySelector(".pagination").style.display = "none";
104}
105
106function findEarliestYear() {
107  if (resourceCardArray.length === 0) {
108    return null;
109  }
110
111  var earliestYear = parseInt(resourceCardArray[0].id);
112  if (resourceCardArray.length === 1) {
113    return earliestYear;
114  }
115
116  for (var i = 1; i < resourceCardArray.length; i++) {
117    earliestYear = earliestYear < parseInt(resourceCardArray[i].id) ? earliestYear : parseInt(resourceCardArray[i].id);
118  }
119
120  return earliestYear;
121}
122
123// If the year is set to 'All', return all posts; else filter only the posts in that year
124function extractPostsByYear(year) {
125  if (year === 'Recent') {
126    return resourceCardArray;
127  }
128  var tempArray = [];
129
130  for (var i = 0; i < resourceCardArray.length; i++) {
131    var post = resourceCardArray[i];
132    if (post.id === year) {
133      tempArray.push(post);
134    }
135  }
136
137  return tempArray;
138}
139
140// Unhide the chunk of resource posts that user wants to see and hides the currently displayed chunk
141function unhideChunk(hidePageIndex, unhidePageIndex) {
142  for (var cardIndex = 0; cardIndex < pageResults[hidePageIndex].length; cardIndex++) {
143    pageResults[hidePageIndex][cardIndex].classList.add("hide");
144  }
145  for (var cardIndex = 0; cardIndex < pageResults[unhidePageIndex].length; cardIndex++) {
146    pageResults[unhidePageIndex][cardIndex].classList.remove("hide");
147  }
148}
149
150function changePage(curr, index) {
151  var prev = document.querySelector("#paginator-pages .selected-page");
152  changePageUtil(curr, index);
153
154  // Use the number in the paginated button to figure out current page index and next page index
155  var currentIndex = parseInt(prev.innerHTML);
156  var selectedIndex = parseInt(curr.innerHTML);
157  unhideChunk(currentIndex - 1, selectedIndex - 1);
158}