docs/stories.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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);