make astro module scripts view transition aware

This commit is contained in:
bytedream 2025-06-03 23:28:31 +02:00
parent e09a232f3c
commit 56e0e15a04
2 changed files with 163 additions and 144 deletions

View File

@ -32,6 +32,7 @@ import Input from '@components/input/Input.svelte';
import { popupState } from '@components/popup/Popup'; import { popupState } from '@components/popup/Popup';
import { actionErrorPopup } from '../util/action'; import { actionErrorPopup } from '../util/action';
function setupForm() {
const form = document.getElementById('feedback-contact') as HTMLFormElement; const form = document.getElementById('feedback-contact') as HTMLFormElement;
const type = document.getElementById('type') as HTMLSelectElement; const type = document.getElementById('type') as HTMLSelectElement;
const content = document.getElementById('content') as HTMLTextAreaElement; const content = document.getElementById('content') as HTMLTextAreaElement;
@ -76,7 +77,7 @@ import Input from '@components/input/Input.svelte';
} }
}); });
async function sendFeedback() { const sendFeedback = async () => {
const { error } = await actions.feedback.addWebsiteFeedback({ const { error } = await actions.feedback.addWebsiteFeedback({
content: content.value content: content.value
}); });
@ -91,9 +92,9 @@ import Input from '@components/input/Input.svelte';
title: 'Feedback abgeschickt', title: 'Feedback abgeschickt',
message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!' message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!'
}); });
} };
async function sendContact() { const sendContact = async () => {
const { error } = await actions.feedback.addWebsiteContact({ const { error } = await actions.feedback.addWebsiteContact({
content: content.value, content: content.value,
email: email.value email: email.value
@ -109,5 +110,13 @@ import Input from '@components/input/Input.svelte';
title: 'Kontaktanfrage abgeschickt', title: 'Kontaktanfrage abgeschickt',
message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.' message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.'
}); });
};
} }
const pathname = document.location.pathname;
document.addEventListener('astro:page-load', () => {
if (document.location.pathname !== pathname) return;
setupForm();
});
</script> </script>

View File

@ -155,8 +155,8 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
import { teamPopupName, teamPopupOpen } from '@app/website/signup/TeamPopup'; import { teamPopupName, teamPopupOpen } from '@app/website/signup/TeamPopup';
import { registeredPopupState } from '@app/website/signup/RegisteredPopup'; import { registeredPopupState } from '@app/website/signup/RegisteredPopup';
/* ----- client validation ----- */ function setupClientValidation() {
const rulesCheckbox = document.getElementById('rules')! as HTMLInputElement; const rulesCheckbox = document.getElementById('rules') as HTMLInputElement;
const rulesCheckboxRulesLink = rulesCheckbox.nextElementSibling!.querySelector('.link') as HTMLAnchorElement; const rulesCheckboxRulesLink = rulesCheckbox.nextElementSibling!.querySelector('.link') as HTMLAnchorElement;
// add popup state subscriber to check when the accepted button is clicked // add popup state subscriber to check when the accepted button is clicked
@ -174,14 +174,15 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
// add click handler to open rules popup when clicking the rules link in the rules checkbox label // add click handler to open rules popup when clicking the rules link in the rules checkbox label
rulesCheckboxRulesLink!.addEventListener('click', () => rulesPopupState.set('open')); rulesCheckboxRulesLink!.addEventListener('click', () => rulesPopupState.set('open'));
}
/* ----- signup form ----- */ function setupForm() {
const form = document.getElementById('signup')! as HTMLFormElement; const form = document.getElementById('signup')! as HTMLFormElement;
// reset form on site (re-)load // reset form on site (re-)load
form.reset(); form.reset();
async function sendSignup() { const sendSignup = async () => {
const { data, error } = await actions.signup.signup({ const { data, error } = await actions.signup.signup({
firstname: form.firstname.value, firstname: form.firstname.value,
lastname: form.lastname.value, lastname: form.lastname.value,
@ -234,10 +235,19 @@ const signupDisabledSubMessage = signupSetting[SettingKey.SignupDisabledSubMessa
cancel(); cancel();
form.reset(); form.reset();
}); });
} };
form.addEventListener('submit', (e) => { form.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
sendSignup(); sendSignup();
}); });
}
const pathname = document.location.pathname;
document.addEventListener('astro:page-load', () => {
if (document.location.pathname !== pathname) return;
setupClientValidation();
setupForm();
});
</script> </script>