init
parent
fdd3786d56
commit
093d8436f1
@ -0,0 +1,115 @@
|
||||
let endpoint =
|
||||
"https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*§ion=1&page=Padliography&prop=text";
|
||||
|
||||
const container = document.getElementById("wiki-contents");
|
||||
const filtersContainer = document.getElementById("filters-container");
|
||||
|
||||
// We use a set and not an array in order to avoid repetition
|
||||
let filters = new Set();
|
||||
|
||||
// Request the content to the Wiki API and parse it as a JSON file
|
||||
fetch(endpoint)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
// Create a new element to insert the response from the wiki and get the table out of it
|
||||
let section = document.createElement("div");
|
||||
section.innerHTML = data.parse.text["*"];
|
||||
let wikiTable = section.getElementsByTagName("table")[0];
|
||||
|
||||
// Create a new table using the data in the Wiki table
|
||||
createTable(wikiTable);
|
||||
|
||||
// Fill the filter section with all the tags gathered in the filters Set
|
||||
// We don't need any argument because the filters set is defined as global
|
||||
createFilters();
|
||||
});
|
||||
|
||||
function createTable(data) {
|
||||
let table = document.createElement("table");
|
||||
|
||||
// Traverse the rows collection as an array
|
||||
[...data.rows].forEach((row, index) => {
|
||||
// Avoid first row that contains column titles
|
||||
if (index > 0) {
|
||||
// Create a row element
|
||||
let tableRow = document.createElement("tr");
|
||||
|
||||
// Columns order could be modified simply by reordering the next 4 sections
|
||||
|
||||
// Create a cell with title + link to the pad
|
||||
let title = document.createElement("td");
|
||||
title.appendChild(createTitleLink(row));
|
||||
tableRow.appendChild(title);
|
||||
|
||||
// Create a cell with the overview
|
||||
let overview = document.createElement("td");
|
||||
overview.innerHTML = row.cells[2].innerText;
|
||||
tableRow.appendChild(overview);
|
||||
|
||||
// Create a cell with categories
|
||||
let categories = document.createElement("td");
|
||||
categories.appendChild(createTags(row.cells[3].innerText));
|
||||
tableRow.appendChild(categories);
|
||||
|
||||
// Create a cell with date
|
||||
let date = document.createElement("td");
|
||||
date.innerHTML = row.cells[4].innerText;
|
||||
tableRow.appendChild(date);
|
||||
|
||||
// Insert the row in the table
|
||||
table.appendChild(tableRow);
|
||||
}
|
||||
});
|
||||
// Insert the table in the container
|
||||
container.appendChild(table);
|
||||
}
|
||||
|
||||
function createTitleLink(row) {
|
||||
// Take the first cell of the wiki (link)
|
||||
let url = row.cells[0].innerText;
|
||||
// Take the second cell of the wiki (title)
|
||||
let title = row.cells[1].innerText;
|
||||
|
||||
// Create a link element
|
||||
let link = document.createElement("a");
|
||||
link.setAttribute("target", "_blank");
|
||||
// Use the link as href
|
||||
link.href = url;
|
||||
// Use the title as text
|
||||
link.innerHTML = title;
|
||||
|
||||
return link;
|
||||
}
|
||||
|
||||
function createTags(categories) {
|
||||
// Split the comma separated list into an array
|
||||
let tags = categories.split(",").map((category) => category.trim());
|
||||
|
||||
// Create a list to contain all the tags
|
||||
let tagsContainer = document.createElement("ul");
|
||||
|
||||
// For each category create a li element
|
||||
tags.forEach((item) => {
|
||||
let tag = createTag(item);
|
||||
tagsContainer.appendChild(tag);
|
||||
|
||||
// add the category to the filters Set to use it later
|
||||
filters.add(item);
|
||||
});
|
||||
|
||||
return tagsContainer;
|
||||
}
|
||||
|
||||
function createTag(item) {
|
||||
let tag = document.createElement("li");
|
||||
tag.classList.add("tag");
|
||||
tag.innerHTML = item;
|
||||
return tag;
|
||||
}
|
||||
|
||||
function createFilters() {
|
||||
filters.forEach((item) => {
|
||||
let tag = createTag(item);
|
||||
filtersContainer.appendChild(tag);
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>🏓 PADliography</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="contents.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🏓 PADliography</h1>
|
||||
|
||||
<div class="contents" id="wiki-contents">
|
||||
<ul id="filters-container"></ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
background: rgb(255, 244, 235);
|
||||
}
|
||||
|
||||
.contents {
|
||||
margin: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ecab72;
|
||||
margin: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
border: 1px solid currentColor;
|
||||
padding: 0 0.5em;
|
||||
border-radius: 1em;
|
||||
margin: 4px;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue