const firstOnboardingCard = "intro"; function switchOnboardingCard(card: string) { (Array.from(document.querySelectorAll("form.onboarding > fieldset")) as HTMLElement[]) .map((node: HTMLElement) => { if (node.id == card) { node.style.display = "block"; } else { node.style.display = "none"; } }); (Array.from(document.querySelectorAll("form.onboarding > ul#progressbar > li")) as HTMLElement[]) .map(node => { if (node.id == card) { node.classList.add("active") } else { node.classList.remove("active") } }); }; interface Window { kittybox_onboarding: { switchOnboardingCard: (card: string) => void } } window.kittybox_onboarding = { switchOnboardingCard }; (document.querySelector("form.onboarding > ul#progressbar") as HTMLElement).style.display = ""; switchOnboardingCard(firstOnboardingCard); function switchCardOnClick(event: MouseEvent) { if (event.target instanceof HTMLElement) { if (event.target.dataset.card !== undefined) { switchOnboardingCard(event.target.dataset.card) } } } function multiInputAddMore(event: (MouseEvent | { target: HTMLElement })) { if (event.target instanceof HTMLElement) { let parent = event.target.parentElement; if (parent !== null) { let template = (parent.querySelector("template") as HTMLTemplateElement).content.cloneNode(true); parent.prepend(template); } } } (Array.from( document.querySelectorAll( "form.onboarding > fieldset button.switch_card" ) ) as HTMLButtonElement[]) .map(button => { button.addEventListener("click", switchCardOnClick) }); (Array.from( document.querySelectorAll( "form.onboarding > fieldset div.multi_input > button.add_more" ) ) as HTMLButtonElement[]) .map(button => { button.addEventListener("click", multiInputAddMore) multiInputAddMore({ target: button }); }); const form = document.querySelector("form.onboarding") as HTMLFormElement; console.log(form); form.onsubmit = async (event: SubmitEvent) => { console.log(event); event.preventDefault(); const form = event.target as HTMLFormElement; const json = { user: { type: ["h-card"], properties: { name: [(form.querySelector("#hcard_name") as HTMLInputElement).value], pronoun: (Array.from( form.querySelectorAll("#hcard_pronouns") ) as HTMLInputElement[]) .map(input => input.value).filter(i => i != ""), url: (Array.from(form.querySelectorAll("#hcard_url")) as HTMLInputElement[]) .map(input => input.value).filter(i => i != ""), note: [(form.querySelector("#hcard_note") as HTMLInputElement).value] } }, first_post: { type: ["h-entry"], properties: { content: [(form.querySelector("#first_post_content") as HTMLTextAreaElement).value] } }, blog_name: (form.querySelector("#blog_name") as HTMLInputElement).value, feeds: (Array.from( form.querySelectorAll(".multi_input#custom_feeds > fieldset.feed") ) as HTMLElement[]) .map(form => { return { name: (form.querySelector("#feed_name") as HTMLInputElement).value, slug: (form.querySelector("#feed_slug") as HTMLInputElement).value } }).filter(feed => feed.name == "" || feed.slug == "") }; await fetch("/.kittybox/onboarding", { method: "POST", body: JSON.stringify(json), headers: { "Content-Type": "application/json" } }).then(response => { if (response.status < 400) { window.location.href = response.headers.get("Location") ?? "/"; } }) }