Load More Scratch News

features/features.json

@@ -1,8 +1,13 @@
 [
+  {
+    "version": 2,
+    "id": "more-news",
+    "versionAdded": "v3.1.0"
+  },
   {
     "version": 2,
     "id": "steal-game",
-    "versionUpdated": "v3.1.0"
+    "versionAdded": "v3.1.0"
   },
   {
     "version": 2,

features/more-news/data.json

@@ -0,0 +1,12 @@
+{
+  "title": "More Scratch News",
+  "description": "On the main page, scroll through the Scratch News section and load more results.",
+  "credits": [
+    { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
+  ],
+  "type": ["Website"],
+  "tags": ["New", "Featured"],
+  "dynamic": true,
+  "scripts": [{ "file": "script.js", "runOn": "/" }],
+  "styles": [{ "file": "style.css", "runOn": "/" }]
+}

features/more-news/script.js

@@ -0,0 +1,52 @@
+export default async function ({ feature, console }) {
+  let news = await ScratchTools.waitForElement(".splash-header > .news ul");
+
+  let button = document.createElement("button");
+  button.textContent = "Load More";
+  button.classList.add("button");
+  button.classList.add("ste-load-more-news");
+  feature.self.hideOnDisable(button);
+
+  let offset = 3;
+
+  news.appendChild(button);
+  button.addEventListener("click", async function () {
+    button.style.display = "none";
+    let data = await (
+      await fetch(
+        `https://api.scratch.mit.edu/news?offset=${offset.toString()}`
+      )
+    ).json();
+    if (data.length === 20) {
+      button.style.display = null;
+    }
+    offset += 20;
+    data.forEach(function (item) {
+      let li = document.createElement("li");
+      let a = document.createElement("a");
+      a.href = item.url;
+      li.appendChild(a);
+
+      let img = document.createElement("img");
+      img.className = "news-image";
+      img.src = item.image;
+      img.height = 54;
+      a.appendChild(img);
+
+      let div = document.createElement("div");
+      div.className = "news-description";
+      a.appendChild(div);
+
+      let h4 = document.createElement("h4");
+      h4.textContent = item.headline;
+      div.appendChild(h4);
+
+      let p = document.createElement("p");
+      p.textContent = item.copy;
+      div.appendChild(p);
+
+      feature.self.hideOnDisable(li);
+      news.insertBefore(li, button);
+    });
+  });
+}

features/more-news/style.css

@@ -0,0 +1,9 @@
+.splash-header > .news ul {
+    height: 23rem;
+    overflow-y: scroll;
+}
+
+button.button.ste-load-more-news {
+    width: 100%;
+    padding: .4rem;
+}