filter wip

contents.js

@@ -3,10 +3,18 @@ let endpoint = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&forma
 
 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
 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())
@@ -22,10 +30,12 @@ fetch(endpoint)
 		// 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();
+
+		showAllTags();
 	});
 
 function createTable(data) {
-	let table = document.createElement("table");
+	table = document.createElement("table");
 
 	// Traverse the rows collection as an array
 	[...data.rows].forEach((row, index) => {
@@ -34,6 +44,11 @@ function createTable(data) {
 			// 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));
+
 			// Columns order could be modified simply by reordering the next 4 sections
 
 			// Create a cell with title + link to the pad
@@ -48,7 +63,7 @@ function createTable(data) {
 
 			// Create a cell with categories
 			let categories = document.createElement("td");
-			categories.appendChild(createTags(row.cells[3].innerText));
+			categories.appendChild(createTags(categoryTags));
 			tableRow.appendChild(categories);
 
 			// Create a cell with date
@@ -82,15 +97,14 @@ function createTitleLink(row) {
 }
 
 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);
+	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
@@ -100,16 +114,101 @@ function createTags(categories) {
 	return tagsContainer;
 }
 
-function createTag(item) {
+function createFilters() {
+	filters.forEach((item) => {
 		let tag = document.createElement("li");
+		tag.setAttribute("data-tag", item);
+		tag.setAttribute("tabindex", 0);
 		tag.classList.add("tag");
 		tag.innerHTML = item;
-	return tag;
+		filtersContainer.appendChild(tag);
+	});
+	tagList = document.querySelectorAll("[data-tag]");
 }
 
-function createFilters() {
-	filters.forEach((item) => {
-		let tag = createTag(item);
-		filtersContainer.appendChild(tag);
+function conditionalToggle(element) {
+	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 (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"));
+	}
+
+	allActive = tagList.length == filters.size;
+
+	if (allActive) {
+		activeAllButton.classList.add("active");
+		activeAllButton.setAttribute("aria-expanded", "true");
+	}
+
+	if (filters.size === 0) {
+		showAllTags();
+	}
+}
+
+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();
+}
+
+// TODO: fix active class
+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();
+});

index.html

@@ -12,7 +12,12 @@
 		<h1>🏓 PADliography</h1>
 
 		<div class="contents" id="wiki-contents">
-			<ul id="filters-container"></ul>
+			<div class="filters">
+				<h3>Filters</h3>
+				<ul id="filters-container">
+					<button class="tag active" id="active-all" role="button">All Tags</button>
+				</ul>
+			</div>
 		</div>
 	</body>
 </html>

style.css

@@ -26,6 +26,18 @@ h1 {
 	user-select: none;
 }
 
+.tag.active {
+	background-color: white;
+}
+
 ul {
 	padding: 0;
 }
+
+tr {
+	display: none;
+}
+
+tr.active {
+	display: table-row;
+}