Added infinite scroll for news page

assets/javascript/index.js

@@ -1,6 +1,8 @@
 const url = new URL(window.location.toLocaleString());
+
 const pageList = document.getElementsByClassName("page");
-const loaded = []
+const loaded = [];
+var currentPage;
 
 const nnRuler = "cool_tellow";
 const nnCoRuler = "ColoradoCrusade";
@@ -138,6 +140,8 @@ function loadDiscordMessagesFromJson(jsonName, addMessageContent, addAttachments
 }
 
 function switchPage(pageName, button) {
+  currentPage = pageName;
+
   for (let page = 0; page < pageList.length; page++) {
     pageList[page].style.display = "none";
   }
@@ -242,11 +246,14 @@ function membersLoad() {
 }
 
 function announcementsLoad() {
-  loadDiscordMessagesFromJson("announcements", true, true, "embed");
+  // loadDiscordMessagesFromJson("announcements", true, true, "embed");
+  addDiscordCards(window[currentPage + "CurrentIndex"], "announcements", true, true, "embed");
 }
 
 function newnamefulnewsnoticeLoad() {
-  loadDiscordMessagesFromJson("newnamefulnewsnotice", false, true, "embed");
+  // loadDiscordMessagesFromJson("newnamefulnewsnotice", false, true, "embed");
+  addDiscordCards(window[currentPage + "CurrentIndex"], "newnamefulnewsnotice", false, true, "embed");
+  window.addEventListener("scroll", handleInfiniteScroll);
 }
 
 function onPageLoad() {

assets/javascript/load-discord-messages.js

@@ -0,0 +1,104 @@
+const cardIncrease = 10;
+
+var announcementsCardLimit;
+var announcementsCurrentIndex = 0;
+
+
+var newnamefulnewsnoticeCardLimit;
+var newnamefulnewsnoticeCurrentIndex = 0;
+
+var throttleTimer;
+
+const throttle = (callback, time) => {
+  if (throttleTimer) return;
+  throttleTimer = true;
+
+  setTimeout(() => {
+    callback();
+    throttleTimer = false;
+  }, time);
+};
+
+function createCardFromDiscordMessage(index, json, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
+  let messageContainer = document.createElement("div");
+  let messageAuthorAvatar = document.createElement("img");
+  let messageTitle = document.createElement("p");
+  let messageDate = new Date(json.messages[index].timestamp);
+  let messageLine = document.createElement("hr");
+
+  messageContainer.className = "card";
+  messageContainer.id = jsonName + "-" + index;
+  messageAuthorAvatar.className = "message-author-avatar";
+  messageAuthorAvatar.src = "/assets/json/" + jsonName + "/" + json.messages[index].author.avatarUrl;
+  messageTitle.style = "margin-top: 5px;"
+  messageTitle.innerHTML = "<span style='color: " + json.messages[index].author.color + ";'>" + json.messages[index].author.nickname + "</span>" + " | " + messageDate.toLocaleDateString();
+
+  document.getElementById(jsonName).append(messageContainer);
+  document.getElementById(messageContainer.id).append(messageAuthorAvatar, messageTitle, messageLine);
+
+  if (addMessageContent == true) {
+    let messageContent = document.createElement("p");
+
+    messageContent.innerText = json.messages[index].content;
+
+    document.getElementById(messageContainer.id).append(messageContent);
+  }
+
+  if (addAttachments == true) {
+    let messageAttachment;
+    for (let attachment = 0; attachment < json.messages[index].attachments.length; attachment++) {
+      if (attachmentLinkOrEmbed === "link") {
+        messageAttachment = document.createElement("a");
+            
+        messageAttachment.href = "/assets/json/" + jsonName + json.messages[index].attachments[attachment].url;
+        messageAttachment.innerText = json.messages[index].attachments[attachment].fileName;
+      } else if (attachmentLinkOrEmbed === "embed") {
+        messageAttachment = document.createElement("img");
+
+        messageAttachment.src = "/assets/json/" + jsonName + "/" + json.messages[index].attachments[attachment].url;
+
+        document.getElementById(messageContainer.id).append(messageAttachment);
+      }
+      messageAttachment.className = "message-attachment";
+
+      document.getElementById(messageContainer.id).append(messageAttachment);
+    }
+  }
+}
+
+async function addDiscordCards(cardIndex, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
+  const response = await fetch("/assets/json/" + jsonName + "/" + jsonName + ".json");  
+  const jsonData = await response.json();
+  jsonData.messages.reverse();
+
+  window[currentPage + "CardLimit"] = jsonData.messages.length;
+  window[currentPage + "CurrentIndex"]  =  cardIndex
+  window[currentPage + "EndIndex"] = window[currentPage + "CurrentIndex"] == window[currentPage + "CardLimit"] ? window[currentPage + "CardLimit"] : window[currentPage + "CurrentIndex"] + cardIncrease;
+
+
+  for (let i = window[currentPage + "CurrentIndex"]; i < window[currentPage + "EndIndex"]; i++) {
+    createCardFromDiscordMessage(i, jsonData, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed);
+    console.log("Added card " + i)
+  }
+  console.log(window[currentPage + "CurrentIndex"] + " " + window[currentPage + "CardLimit"]);
+};
+
+function handleInfiniteScroll() {
+  throttle(() => {
+    const endOfPage = Math.ceil(window.innerHeight + window.pageYOffset + 10) >= document.body.offsetHeight;
+    console.log(endOfPage)
+    if (endOfPage && currentPage === "newnamefulnewsnotice") {
+      console.log("Adding cards")
+      addDiscordCards(window[currentPage + "CurrentIndex"] + cardIncrease, "newnamefulnewsnotice", false, true, "embed")
+    }
+    if (window[currentPage + "CurrentIndex"] + cardIncrease === window[currentPage + "CardLimit"]) {
+      console.log("Removing Handler")
+      removeInfiniteScroll(handleInfiniteScroll);
+    }
+  }, 1500);
+}
+
+function removeInfiniteScroll(name) {
+  window.removeEventListener("scroll", name);
+  console.log("removed " + name)
+}

index.html

@@ -84,7 +84,7 @@
       </div>
     </div>
     <div class="page" id="announcements">
-      <p><b>Announcements</b></p>
+      <p><b>Recent Announcements</b></p>
     </div>
     <div class="page" id="newnamefulnewsnotice">
       <p><b>New Nameful News Nexus News Network News Notice Noticeboard News</b></p>
@@ -95,6 +95,7 @@
     <div id="footer">
       <a href="https://git.lkarch.org/lkarch/newnameful.com">Source</a><br>
     </div>
-    <script src="assets/javascript/index.js"></script>
+    <script src="/assets/javascript/load-discord-messages.js"></script>
+    <script src="/assets/javascript/index.js"></script>
   </body>
 </html>