From bebcfc5ad075cf32e8e0389a42468786270e6942 Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Fri, 29 Oct 2021 12:06:47 +0200 Subject: [PATCH] code documentation --- contents.js | 65 ++++++++++++++++++++++++++++++++++++++++++----------- style.css | 13 +++++++++++ 2 files changed, 65 insertions(+), 13 deletions(-) diff --git a/contents.js b/contents.js index dd4d160..6c1a968 100644 --- a/contents.js +++ b/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 +}); diff --git a/style.css b/style.css index 5b97210..873c06a 100644 --- a/style.css +++ b/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; +}