From 220695f3912a865d430f062068fd3c2686bad6e3 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Fri, 29 Oct 2021 02:58:58 +0200 Subject: [PATCH] filter wip --- contents.js | 129 ++++++++++++++++++++++++++++++++++++++++++++++------ index.html | 7 ++- style.css | 12 +++++ 3 files changed, 132 insertions(+), 16 deletions(-) diff --git a/contents.js b/contents.js index e8783b9..dd4d160 100644 --- a/contents.js +++ b/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) { - let tag = document.createElement("li"); - tag.classList.add("tag"); - tag.innerHTML = item; - return tag; -} - function createFilters() { filters.forEach((item) => { - let tag = createTag(item); + let tag = document.createElement("li"); + tag.setAttribute("data-tag", item); + tag.setAttribute("tabindex", 0); + tag.classList.add("tag"); + tag.innerHTML = item; filtersContainer.appendChild(tag); }); + tagList = document.querySelectorAll("[data-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(); +}); diff --git a/index.html b/index.html index 0dbe4ca..73c7f7e 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,12 @@

🏓 PADliography

- +
+

Filters

+
    + +
+
diff --git a/style.css b/style.css index f7d011f..2a8e457 100644 --- a/style.css +++ b/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; +}