src/frontend/onboarding.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
35
36
37
38
39
40
41
42
43
44
45

const firstOnboardingCard = "intro";

function switchOnboardingCard(card) {
    Array.from(document.querySelectorAll("form.onboarding > fieldset")).map(node => {
        if (node.id == card) {
            node.style.display = "block";
        } else {
            node.style.display = "none";
        }
    });

    Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")).map(node => {
        if (node.id == card) {
            node.classList.add("active")
        } else {
            node.classList.remove("active")
        }
    })
};

window.kittybox_onboarding = {
    switchOnboardingCard
};

document.querySelector("form.onboarding > ul#progressbar").style.display = "";
switchOnboardingCard(firstOnboardingCard);

function switchCardOnClick(event) {
    switchOnboardingCard(event.target.dataset.card)
}

function multiInputAddMore(event) {
    let parent = event.target.parentElement;
    let template = event.target.parentElement.querySelector("template").content.cloneNode(true);
    parent.prepend(template);
}

Array.from(document.querySelectorAll("form.onboarding > fieldset button.switch_card")).map(button => {
    button.addEventListener("click", switchCardOnClick)
})

Array.from(document.querySelectorAll("form.onboarding > fieldset div.multi_input > button.add_more")).map(button => {
    button.addEventListener("click", multiInputAddMore)
    multiInputAddMore({ target: button });
})