make astro module scripts view transition aware

src/pages/feedback.astro

@@ -32,82 +32,91 @@ import Input from '@components/input/Input.svelte';
   import { popupState } from '@components/popup/Popup';
   import { actionErrorPopup } from '../util/action';
 
-  const form = document.getElementById('feedback-contact') as HTMLFormElement;
-  const type = document.getElementById('type') as HTMLSelectElement;
-  const content = document.getElementById('content') as HTMLTextAreaElement;
-  const email = document.getElementById('email') as HTMLInputElement;
+  function setupForm() {
+    const form = document.getElementById('feedback-contact') as HTMLFormElement;
+    const type = document.getElementById('type') as HTMLSelectElement;
+    const content = document.getElementById('content') as HTMLTextAreaElement;
+    const email = document.getElementById('email') as HTMLInputElement;
 
-  // reset form on site (re-)load
-  form.reset();
+    // reset form on site (re-)load
+    form.reset();
 
-  type.addEventListener('change', () => {
-    if (type.value === 'website-feedback') {
-      // content input
-      content.previousElementSibling!.firstChild!.textContent = 'Feedback';
-      // email input
-      email.parentElement!.hidden = true;
-      email.required = false;
-    } else if (type.value === 'website-contact') {
-      // content input
-      content.previousElementSibling!.firstChild!.textContent = 'Anfrage';
-      // email input
-      email.required = true;
-      email.parentElement!.hidden = false;
-    }
-  });
-
-  email.required = false;
-
-  form.addEventListener('submit', async (e) => {
-    e.preventDefault();
-
-    if (type.value === 'website-feedback') {
-      confirmPopupState.set({
-        title: 'Feedback abschicken',
-        message: 'Soll das Feedback abgeschickt werden?',
-        onConfirm: () => sendFeedback().then(() => form.reset())
-      });
-    } else if (type.value === 'website-contact') {
-      confirmPopupState.set({
-        title: 'Kontaktanfrage abschicken',
-        message: 'Soll die Kontaktanfrage abgeschickt werden?',
-        onConfirm: () => sendContact().then(() => form.reset())
-      });
-    }
-  });
-
-  async function sendFeedback() {
-    const { error } = await actions.feedback.addWebsiteFeedback({
-      content: content.value
+    type.addEventListener('change', () => {
+      if (type.value === 'website-feedback') {
+        // content input
+        content.previousElementSibling!.firstChild!.textContent = 'Feedback';
+        // email input
+        email.parentElement!.hidden = true;
+        email.required = false;
+      } else if (type.value === 'website-contact') {
+        // content input
+        content.previousElementSibling!.firstChild!.textContent = 'Anfrage';
+        // email input
+        email.required = true;
+        email.parentElement!.hidden = false;
+      }
     });
 
-    if (error) {
-      actionErrorPopup(error);
-      return;
-    }
+    email.required = false;
 
-    popupState.set({
-      type: 'info',
-      title: 'Feedback abgeschickt',
-      message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!'
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      if (type.value === 'website-feedback') {
+        confirmPopupState.set({
+          title: 'Feedback abschicken',
+          message: 'Soll das Feedback abgeschickt werden?',
+          onConfirm: () => sendFeedback().then(() => form.reset())
+        });
+      } else if (type.value === 'website-contact') {
+        confirmPopupState.set({
+          title: 'Kontaktanfrage abschicken',
+          message: 'Soll die Kontaktanfrage abgeschickt werden?',
+          onConfirm: () => sendContact().then(() => form.reset())
+        });
+      }
     });
+
+    const sendFeedback = async () => {
+      const { error } = await actions.feedback.addWebsiteFeedback({
+        content: content.value
+      });
+
+      if (error) {
+        actionErrorPopup(error);
+        return;
+      }
+
+      popupState.set({
+        type: 'info',
+        title: 'Feedback abgeschickt',
+        message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!'
+      });
+    };
+
+    const sendContact = async () => {
+      const { error } = await actions.feedback.addWebsiteContact({
+        content: content.value,
+        email: email.value
+      });
+
+      if (error) {
+        actionErrorPopup(error);
+        return;
+      }
+
+      popupState.set({
+        type: 'info',
+        title: 'Kontaktanfrage abgeschickt',
+        message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.'
+      });
+    };
   }
 
-  async function sendContact() {
-    const { error } = await actions.feedback.addWebsiteContact({
-      content: content.value,
-      email: email.value
-    });
+  const pathname = document.location.pathname;
+  document.addEventListener('astro:page-load', () => {
+    if (document.location.pathname !== pathname) return;
 
-    if (error) {
-      actionErrorPopup(error);
-      return;
-    }
-
-    popupState.set({
-      type: 'info',
-      title: 'Kontaktanfrage abgeschickt',
-      message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.'
-    });
-  }
+    setupForm();
+  });
 </script>