filter wip

master
km0 3 years ago
parent 767d1ef901
commit 220695f391

@ -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();
});

@ -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>

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

Loading…
Cancel
Save