Init

res/asset-js-list.js

@@ -0,0 +1,58 @@
+// Find where we will create rows and insert all items
+const rowSection = document.getElementById("link-box");
+
+// Fetch our json file so we can insert it into our document
+function listInitialise() {
+  fetch("res/asset-json-list.json")
+    .then((res) => res.json())
+    .then((listData) => {
+      listUpdate(listData);
+    })
+    .catch(console.error);
+}
+listInitialise();
+
+function listUpdate(listData) {
+  // Pulling the number of columns the user asserts to render
+  let columnCount = listData.columnCount;
+  // Calculating how many items there are to list
+  let rowItemCount = listData.rowItems.length;
+  // Calculating the number of rows to create
+  let rows = Math.ceil(rowItemCount / columnCount);
+
+  // Use our calculated number of rows to create that many unordered lists
+  for (let listContainer = 0; listContainer < rows; listContainer++) {
+    // The template for our unordered list html
+    rowHTML = '<ul class="row"></ul>';
+    // Append said unordered list template to the page
+    rowSection.innerHTML += rowHTML;
+    // Select our unordered list's inner html
+    rowList = rowSection.childNodes[listContainer];
+    // Create first entry (purely decorative)
+    rowList.innerHTML = "<li>>//</li>";
+    // Use our asserted number of items in each row (columnCount) to populate each row
+    for (let rowItem = 0; rowItem < columnCount; rowItem++) {
+      // Each row must contain our decided number but not repeat. This will offset each new row with the next item entries.
+      rowOffset = listContainer * columnCount;
+      // In the case that the number of items does not exactly divide, end the appending early to avoid errors
+      if (rowItemCount <= rowOffset + rowItem) {
+        // Append last list entry (purely decorative)
+        rowList.innerHTML += "<li>//-</li>";
+        // End the function early
+        return;
+      } else {
+        // Get the title of this rows appropriate item
+        let title = listData.rowItems[rowItem + rowOffset].title;
+        // Get the url of this rows appropriate item
+        let url = listData.rowItems[rowItem + rowOffset].url;
+        // The template for our list item
+        rowConstruct = '<li><a href="' + url + '">' + title + "</a></li>";
+        // Append said list item template to the current row.
+        rowList.innerHTML += rowConstruct;
+      }
+    }
+
+    // Append last list entry (purely decorative)
+    rowList.innerHTML += "<li>//-</li>";
+  }
+}