PADliography/contents.js

let page = "Padliography";
let endpoint = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*&section=1&page=${page}&prop=text`;

const container = document.getElementById("wiki-contents");
const filtersContainer = document.getElementById("filters-container");
const activeAllButton = document.getElementById("active-all");

// We use a set and not an array in order to avoid repetition for the categories
let filters = new Set();

// Variables for the filter system
let allActive = true;
let tagList;

// Global variable for the generated table
let table;

// 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 parse the response from the wiki and get an HTML table element 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();

		// Initially show all the categories
		showAllTags();
	});

// ---
// Contents Generation
// ---

function createTable(data) {
	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");

			// Create a list of tags from the categories cell
			let categoryTags = row.cells[3].innerText.split(",").map((category) => category.trim());
			// Set the categories as classes for future filtering
			categoryTags.forEach((tag) => tableRow.classList.add(tag));

			// --- Beginning of the row
			// Columns order could be modified simply by reordering the next 4 sections

			// Create a cell with date
			let date = document.createElement("td");
			date.innerHTML = row.cells[4].innerText;
			tableRow.appendChild(date);

			// 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 categories
			let categories = document.createElement("td");
			categories.appendChild(createTags(categoryTags));
			tableRow.appendChild(categories);

			// Create a cell with the overview
			let overview = document.createElement("td");
			overview.innerHTML = row.cells[2].innerText;
			tableRow.appendChild(overview);

			// --- End of the row

			// 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;
}

// Take a list of categories and create an unordered list with them
// + store every category to the filters Set
function createTags(categories) {
	// Create a list to contain all the tags
	let tagsContainer = document.createElement("ul");

	// For each category create a li element
	categories.forEach((item) => {
		let tag = document.createElement("li");
		tag.classList.add("tag");
		tag.innerHTML = item;
		tagsContainer.appendChild(tag);

		// add the category to the filters Set to use it later
		filters.add(item);
	});

	return tagsContainer;
}

// ---
// Filtering
// ---

// Parse the filters Set to create a list of interactive list elements
function createFilters() {
	filters.forEach((item) => {
		let tag = document.createElement("li");
		// Store the filter value in the markup and use it for filtering later
		tag.setAttribute("data-tag", item);
		// Tab index is for accessibility via keyboard
		tag.setAttribute("tabindex", 0);
		tag.setAttribute("role", "button");
		tag.classList.add("tag");
		tag.innerHTML = item;
		filtersContainer.appendChild(tag);
	});
	// Build a list of the tag for managing the filter
	tagList = document.querySelectorAll("[data-tag]");
}

// Manage all the combinations when a filter is clicked or selected
function conditionalToggle(element) {
	// If all the filters are active disable them all except the one selected
	if (allActive) {
		tagList.forEach((tag) => {
			filters.delete(tag.getAttribute("data-tag"));
			tag.classList.remove("active");
			tag.setAttribute("aria-expanded", "false");
		});
		activeAllButton.classList.remove("active");
		allActive = false;
	}

	// If the filter is active turn it off, else the contrary
	if (element.classList.contains("active")) {
		element.classList.remove("active");
		element.setAttribute("aria-expanded", "false");
		filters.delete(element.getAttribute("data-tag"));
	} else {
		element.classList.add("active");
		element.setAttribute("aria-expanded", "true");
		filters.add(element.getAttribute("data-tag"));
	}

	// Check if every filter is active or not
	// use it to apply the correct style when all the filters are active
	allActive = tagList.length == filters.size;
	if (allActive) {
		activeAllButton.classList.add("active");
		activeAllButton.setAttribute("aria-expanded", "true");
	}

	// If there are no filters active enable them all
	if (filters.size === 0) {
		showAllTags();
	}
}

// Display the rows that have their categories in the filters Set
function showSelectedRows() {
	[...table.rows].forEach((row) => {
		row.classList.remove("active");
	});

	filters.forEach((filter) => {
		let selectedRows = [...table.rows].filter((el) => {
			filter = filter.replaceAll(" ", "-");
			return el.classList.contains(filter);
		});
		selectedRows.forEach((row) => row.classList.add("active"));
	});

	allActiveCheck();
}

function showAllTags() {
	tagList.forEach((tag) => {
		filters.add(tag.getAttribute("data-tag"));
		tag.classList.add("active");
		tag.setAttribute("aria-expanded", "true");
	});
	allActive = true;
	showSelectedRows();
}

function allActiveCheck() {
	if (tagList.length === filters.size) {
		allActive = true;
		tagList.forEach((tag) => tag.classList.add("all"));
		filtersContainer.firstElementChild.classList.add("active");
	} else {
		allActive = false;
		tagList.forEach((tag) => tag.classList.remove("all"));
		filtersContainer.firstElementChild.classList.remove("active");
	}
}

// ---
// Event Listener
// ---

filtersContainer.addEventListener("click", (e) => {
	if (e.target.tagName === "LI") {
		conditionalToggle(e.target);
		showSelectedRows();
	}
});

activeAllButton.addEventListener("click", (e) => {
	activeAllButton.classList.add("active");
	activeAllButton.setAttribute("aria-expanded", "true");
	showAllTags();
});

document.addEventListener("keydown", (event) => {
	if (event.isComposing || event.keyCode === 229) {
		return;
	}
	if (event.keyCode === 32) {
		if (document.activeElement.tagName === "LI") {
			conditionalToggle(document.activeElement);
			showSelectedRows();
		}
	}
	// do something
});