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