58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
// 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>";
|
|
}
|
|
}
|