code documentation

contents.js

@@ -5,7 +5,7 @@ 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
+// 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
@@ -19,7 +19,7 @@ let table;
 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
+		// 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];
@@ -31,9 +31,14 @@ fetch(endpoint)
 		// 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");
 
@@ -49,27 +54,30 @@ function createTable(data) {
 			// 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 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(categoryTags));
 			tableRow.appendChild(categories);
 
-			// Create a cell with date
-			let date = document.createElement("td");
-			date.innerHTML = row.cells[4].innerText;
-			tableRow.appendChild(date);
+			// 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);
@@ -96,6 +104,8 @@ function createTitleLink(row) {
 	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");
@@ -114,19 +124,30 @@ function createTags(categories) {
 	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"));
@@ -137,6 +158,7 @@ function conditionalToggle(element) {
 		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");
@@ -147,18 +169,21 @@ function conditionalToggle(element) {
 		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");
@@ -185,7 +210,6 @@ function showAllTags() {
 	showSelectedRows();
 }
 
-// TODO: fix active class
 function allActiveCheck() {
 	if (tagList.length === filters.size) {
 		allActive = true;
@@ -198,7 +222,9 @@ function allActiveCheck() {
 	}
 }
 
+// ---
 // Event Listener
+// ---
 
 filtersContainer.addEventListener("click", (e) => {
 	if (e.target.tagName === "LI") {
@@ -212,3 +238,16 @@ activeAllButton.addEventListener("click", (e) => {
 	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
+});

style.css

@@ -24,6 +24,10 @@ h1 {
 	margin: 4px;
 	text-transform: capitalize;
 	user-select: none;
+	cursor: pointer;
+
+	transform: translateY(0);
+	transition: transform 0.4s ease-in;
 }
 
 .tag.active {
@@ -34,6 +38,11 @@ h1 {
 	background: none;
 }
 
+.tag:focus {
+	transform: translateY(-4px);
+	transition: transform 0.2s ease-out;
+}
+
 ul {
 	padding: 0;
 }
@@ -45,3 +54,7 @@ tr {
 tr.active {
 	display: table-row;
 }
+
+tr .tag {
+	cursor: default;
+}