https://childrensmuseums.org/wp-content/themes/acm/news-room.js

1(function () {
2    window.addEventListener("DOMContentLoaded", () => {
3      const navLinks = document.querySelectorAll(".nav-link");
4      const loadedPosts = document.querySelectorAll(".post");
5      const postsWrapper = document.getElementById("posts_wrapper");
6      const authorFilter = document.getElementById("author_filter");
7      const authorFilterIndicator = document.querySelector("#author_filter > i");
8      const dateFilterIndicator = document.querySelector("#date_filter > i");
9      const categoryFilterIndicator = document.querySelector("#category_filter > i");
10      const categoryFilter = document.getElementById("category_filter");
11      const dateFilter = document.getElementById("date_filter");
12      const blogSearch = document.querySelector("#blog_search");
13      const pagination = document.querySelector(".posts_pagination");
14  
15      let posts = loadedPosts;
16      let flipA = true;
17      let flipB = true;
18      let flipC = true;
19  
20      blogSearch.addEventListener("keyup", (e) => {
21        posts.forEac

21h((post) => post.remove());
22        pagination.innerHTML = "";
23  
24        posts.forEach((post) => {
25          if (post.firstElementChild.nextElementSibling.innerText.toLowerCase().includes(blogSearch.value.toLowerCase())) {
26            postsWrapper.appendChild(post);
27          }
28        });
29      });
30  
31      dateFilter.addEventListener("click", () => {
32        posts.forEach((post) => post.remove());
33  
34        if (flipA) {
35          dateFilterIndicator.style.transform = "rotate(180deg)";
36          dateFilterIndicator.style.top = "3px";
37  
38          let sortedPosts = [...posts].sort(function (a, b) {
39            return Date.parse(a.getAttribute("date")) - Date.parse(b.getAttribute("date"));
40          });
41  
42          sortedPosts.forEach((post, i) => {
43            if (i <= 5) {
44              postsWrapper.appendChild(post);
45            }
46          });
47  
48          flipA = !flipA;
49        } else {
50          dateFilterIndicator.style.transform = "rotate(0deg)";
51          dateFilterIndicator.style.top = "-3px";
52  
53          let sortedPosts = [...posts].sort(function (a, b) {
54            return Date.parse(b.getAttribute("date")) - Date.parse(a.getAttribute("date"));
55          });
56  
57          sortedPosts.forEach((post, i) => {
58            if (i <= 5) {
59              postsWrapper.appendChild(post);
60            }
61          });
62  
63          flipA = !flipA;
64        }
65      });
66  
67      categoryFilter.addEventListener("click", () => {
68        posts.forEach((post) => post.remove());
69  
70        if (flipB) {
71          categoryFilterIndicator.style.transform = "rotate(180deg)";
72          categoryFilterIndicator.style.top = "3px";
73          let sortedPosts = [...posts].sort(function (a, b) {
74            return parseInt(a.getAttribute("cat_num")) - parseInt(b.getAttribute("cat_num"));
75          });
76          sortedPosts.forEach((post, i) => {
77            if (i <= 5) {
78              postsWrapper.appendChild(post);
79            }
80          });
81          flipB = !flipB;
82        } else {
83          categoryFilterIndicator.style.transform = "rotate(0deg)";
84          categoryFilterIndicator.style.top = "-3px";
85  
86          let sortedPosts = [...posts].sort(function (a, b) {
87            return parseInt(b.getAttribute("cat_num")) - parseInt(a.getAttribute("cat_num"));
88          });
89          sortedPosts.forEach((post, i) => {
90            if (i <= 5) {
91              postsWrapper.appendChild(post);
92            }
93          });
94          flipB = !flipB;
95        }
96      });
97  
98      authorFilter.addEventListener("click", () => {
99        posts.forEach((post) => post.remove());
100  
101        if (flipC) {
102          authorFilterIndicator.style.transform = "rotate(180deg)";
103          authorFilterIndicator.style.top = "3px";
104  
105          let sortedPosts = [...posts].sort(function (a, b) {
106            return parseInt(a.getAttribute("author")) - parseInt(b.getAttribute("author"));
107          });
108          sortedPosts.forEach((post, i) => {
109            if (i <= 5) {
110              postsWrapper.appendChild(post);
111            }
112          });
113          flipC = !flipC;
114        } else {
115          authorFilterIndicator.style.transform = "rotate(0deg)";
116          authorFilterIndicator.style.top = "-3px";
117  
118          let sortedPosts = [...posts].sort(function (a, b) {
119            return parseInt(b.getAttribute("author")) - parseInt(a.getAttribute("author"));
120          });
121          sortedPosts.forEach((post, i) => {
122            if (i <= 5) {
123              postsWrapper.appendChild(post);
124            }
125          });
126          flipC = !flipC;
127        }
128      });
129  
130      function processPosts(category = "News", offset = 0) {
131        const paginationWrapper = document.querySelector(".posts_pagination ul");
132  
133        // Reset posts and pagination
134        posts.forEach((post) => post.remove());
135        paginationWrapper.innerHTML = "";
136  
137        // build temp of array of chosen post category
138        let tempPosts = [];
139        posts.forEach((post) => {
140          if (post.getAttribute("categories").toLowerCase().includes(category)) {
141            tempPosts.push(post);
142          }
143        });
144  
145        let postCount = 1 * offset;
146        while (tempPosts && postCount <= 5 + offset) {
147          if (tempPosts[postCount].getAttribute("categories").toLowerCase().includes(category)) {
148            postsWrapper.appendChild(tempPosts[postCount]);
149          }
150          postCount++;
151        }
152        for (let i = 1; i < tempPosts.length / 5; i++) {
153          const li = document.createElement("li");
154          paginationWrapper.appendChild(li);
155          li.innerText = i;
156          li.addEventListener("click", (e) => {
157            thisOffset = parseInt(e.target.innerText);
158            processPosts(category, thisOffset);
159          });
160        }
161      };
162  
163      navLinks.forEach((link) => {
164        link.addEventListener("click", (e) => {
165          let category = e.target.innerText.toLowerCase();
166  
167          processPosts(category);
168        });
169      });
170  
171      setTimeout(() => {
172        document.querySelector('#Latest-tab').click();
173        postsWrapper.style.opacity = "1";
174      }, 1000);
175    });
176  })();
177