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 container = document.getElementById("wiki-contents");
const filtersContainer = document.getElementById("filters-container"); 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
let filters = new Set(); 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 // Request the content to the Wiki API and parse it as a JSON file
fetch(endpoint) fetch(endpoint)
.then((response) => response.json()) .then((response) => response.json())
@ -22,10 +30,12 @@ fetch(endpoint)
// Fill the filter section with all the tags gathered in the filters Set // 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 // We don't need any argument because the filters set is defined as global
createFilters(); createFilters();
showAllTags();
}); });
function createTable(data) { function createTable(data) {
let table = document.createElement("table"); table = document.createElement("table");
// Traverse the rows collection as an array // Traverse the rows collection as an array
[...data.rows].forEach((row, index) => { [...data.rows].forEach((row, index) => {
@ -34,6 +44,11 @@ function createTable(data) {
// Create a row element // Create a row element
let tableRow = document.createElement("tr"); 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 // Columns order could be modified simply by reordering the next 4 sections
// Create a cell with title + link to the pad // Create a cell with title + link to the pad
@ -48,7 +63,7 @@ function createTable(data) {
// Create a cell with categories // Create a cell with categories
let categories = document.createElement("td"); let categories = document.createElement("td");
categories.appendChild(createTags(row.cells[3].innerText)); categories.appendChild(createTags(categoryTags));
tableRow.appendChild(categories); tableRow.appendChild(categories);
// Create a cell with date // Create a cell with date
@ -82,15 +97,14 @@ function createTitleLink(row) {
} }
function createTags(categories) { 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 // Create a list to contain all the tags
let tagsContainer = document.createElement("ul"); let tagsContainer = document.createElement("ul");
// For each category create a li element // For each category create a li element
tags.forEach((item) => { categories.forEach((item) => {
let tag = createTag(item); let tag = document.createElement("li");
tag.classList.add("tag");
tag.innerHTML = item;
tagsContainer.appendChild(tag); tagsContainer.appendChild(tag);
// add the category to the filters Set to use it later // add the category to the filters Set to use it later
@ -100,16 +114,101 @@ function createTags(categories) {
return tagsContainer; return tagsContainer;
} }
function createTag(item) { function createFilters() {
filters.forEach((item) => {
let tag = document.createElement("li"); let tag = document.createElement("li");
tag.setAttribute("data-tag", item);
tag.setAttribute("tabindex", 0);
tag.classList.add("tag"); tag.classList.add("tag");
tag.innerHTML = item; tag.innerHTML = item;
return tag; filtersContainer.appendChild(tag);
});
tagList = document.querySelectorAll("[data-tag]");
} }
function createFilters() { function conditionalToggle(element) {
filters.forEach((item) => { if (allActive) {
let tag = createTag(item); tagList.forEach((tag) => {
filtersContainer.appendChild(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> <h1>🏓 PADliography</h1>
<div class="contents" id="wiki-contents"> <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> </div>
</body> </body>
</html> </html>

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

Loading…
Cancel
Save