From 50f0dd83857d824ebf808ef252d3c614428c9dfb Mon Sep 17 00:00:00 2001 From: WriterV2 Date: Sat, 5 Nov 2022 18:04:22 +0100 Subject: Add stories filter form JS --- docs/stories.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/stories.js (limited to 'docs/stories.js') diff --git a/docs/stories.js b/docs/stories.js new file mode 100644 index 0000000..e5a57ec --- /dev/null +++ b/docs/stories.js @@ -0,0 +1,34 @@ +// every story card +const workCards = document.querySelectorAll(".work-card"); + +// story type select input +const storyTypeSelect = document.querySelector("#story-type-select"); +// language select input +const languageSelect = document.querySelector("#language-select"); +// copy of works with all work cards +const works = Array.from(document.querySelector(".works").children); + +// filter cards based on storytype and language filter +function filterWorkCards() { + // restore initial state with all cards + // (TODO: Explore more efficient solutions without another loop) + document.querySelector(".works").replaceChildren(); + works.forEach((card) => { + document.querySelector(".works").appendChild(card); + }) + + // filter card if language or story type filter doesn't match + workCards.forEach((card) => { + if (languageSelect.value != "*" && card.querySelector(".story-language").innerHTML != languageSelect.value) { + document.querySelector(".works").removeChild(card); + } else if (storyTypeSelect.value != "*" && card.querySelector(".story-type").innerHTML != storyTypeSelect.value) { + document.querySelector(".works").removeChild(card); + } + }) +} + +// filter cards when +// story type selection changes +storyTypeSelect.addEventListener("change", filterWorkCards); +// language selection changes +languageSelect.addEventListener("change", filterWorkCards); -- cgit v1.2.3