smooth things out

assets/js/index.js

@@ -96,6 +96,7 @@ class PageTransitions {
   init() {
     document.addEventListener('DOMContentLoaded', () => {
       this.addLinkClickListener('a');
+      this.addFormSubmitListener('form');
     });
   }
   addLinkClickListener(selector) {
@@ -123,6 +124,24 @@ class PageTransitions {
       });
     });
   }
+  addFormSubmitListener(selector) {
+    this.forms = document.querySelectorAll(selector);
+    this.forms.forEach(form => {
+      form.addEventListener('submit', e => {
+        e.preventDefault();
+        if (form.action === window.location.href) {
+          return;
+        }
+        this.navControl = new _NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
+        if (this.navControl.toggleMenuBtn.classList.contains('active')) {
+          this.navControl.toggleNavMenu();
+        }
+        this.animatePageTransition(() => {
+          this.submitFormAsync(form);
+        });
+      });
+    });
+  }
   animatePageTransition(callback) {
     const contentContainer = document.getElementById('content-container');
 
@@ -149,6 +168,27 @@ class PageTransitions {
       }, 300);
     }).catch(error => console.error('Error fetching content:', error));
   }
+  submitFormAsync(form) {
+    const formData = new FormData(form);
+    fetch(form.action, {
+      method: 'POST',
+      body: formData
+    }).then(response => response.text()).then(data => {
+      // Assuming the response contains the new content to be loaded
+      const targetUrl = form.action; // You might need to adjust this based on your server's response
+      const elementId = 'content-container';
+
+      // Update content, push state, and remove transition class
+      this.updateContent(data, elementId);
+      history.pushState(null, null, targetUrl);
+
+      // Trigger removal of transition class after fetching data
+      const contentContainer = document.getElementById(elementId);
+      setTimeout(() => {
+        this.removeTransitionClass(contentContainer);
+      }, 300);
+    }).catch(error => console.error('Error submitting form:', error));
+  }
   updateContent(data, elementId) {
     const contentContainer = document.getElementById('content-container');
     const parsedData = new DOMParser().parseFromString(data, 'text/html');