moved airtable and dialog config so that its accessible from everywhere

virto-network · Jun 18, 2024 · 346bbcf · 346bbcf
1 parent 5c7e47b
commit 346bbcf
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 69 deletions.
diff --git a/_layouts/index.liquid b/_layouts/index.liquid
@@ -16,13 +16,20 @@
 
 <body class="hidden">
 	{% include "nav.liquid" %}
+	<dialog data-modal class="light-green-bg">
+        <span class="close-button boldest">X</span>
+        <div id="modal-message" class="center"></div>
+	</dialog>
 		<main>{{ page.content }}</main>
 		<a href="#footer" class="scroll-down-link white-text center-arrow">Ir al final
 			<figure class="link-arrow">
 				{% include "down.svg" %}
 			</figure>
 	 	</a>
 	{% include "footer.liquid" %}
+
+{% assign env = site.data.env %}
+
 	<script>
 	const observer = new IntersectionObserver(entries => {
   		entries.forEach(entry => {
@@ -41,7 +48,70 @@
 
 		document.fonts.ready.then((fontFaceSet) => {
 			document.body.classList.remove('hidden');
-		})
+		});
+
+// Airtable Connection
+const apiKeyAirtable = '{{ env.AIRTABLE_API_KEY }}';
+const baseId = '{{ env.AIRTABLE_BASE_ID }}';
+const table = '{{ env.AIRTABLE_TABLE_ID }}';
+
+const mailForm = document.getElementById('mail-form');
+const modal = document.querySelector('[data-modal]')
+const mailButton = document.getElementById('mail-button');
+const closeButton = document.querySelector('.close-button');
+const modalMessage = document.getElementById('modal-message');
+
+function openModal(message) {
+    modalMessage.innerHTML = message;
+    modal.showModal();
+}
+
+closeButton.addEventListener('click', () => {
+    modal.close()
+});
+
+mailForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  const contactName = event.target.elements['contactName'].value;
+  const contactLastName = event.target.elements['contactLastName'].value;
+  const contactEmail = event.target.elements['contactEmail'].value;
+
+  try {
+	const data = {
+		fields: {
+			"Name": contactName,
+			"LastName": contactLastName,
+			"Email": contactEmail,
+		}
+	};
+
+    const response = await fetch(`https://api.airtable.com/${baseId}/${table}`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKeyAirtable}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    });
+
+	console.log(response.json())
+
+    if (!response.ok) {
+      throw new Error(`Airtable API error: ${response.status}`);
+    }
+
+    const result = await response.json();
+    openModal(`<img src="/img/success.svg" alt="success" /><h2>¡Gracias!</h2><h3>Su mail ha sido registrado exitosamente.</h3>`);
+    console.log('Datos enviados exitosamente a Airtable:', result);
+
+  	} catch (error) {
+        openModal('<img src="/img/error.svg" alt="error" /><h2>Error</h2><h3>Hubo un problema al registrar su mail.</h3><h3 class="bolder">Por favor, intente nuevamente.</h3>');
+    	console.error("Error al enviar datos a Airtable:", error);
+  }
+});
+
+
 	</script>
 </body>
 

diff --git a/index.liquid b/index.liquid
@@ -5,11 +5,6 @@ data:
   route: home
 ---
 
-<dialog data-modal class="light-green-bg">
-        <span class="close-button boldest">X</span>
-        <div id="modal-message" class="center"></div>
-</dialog>
-
 {% for home_section in site.data.index.home_sections %}
 <section {% if home_section.id == "home" %} id="home">
 	<article class="max animated">
@@ -169,8 +164,6 @@ data:
 {% endif %}
 {% endfor %}
 
-{% assign env = site.data.env %}
-
 <script>
 const $ = document.querySelector.bind(document),
 	$$ = document.querySelectorAll.bind(document);
@@ -211,65 +204,4 @@ questionButtons.forEach(button => {
     });
 });
 
-// Airtable Connection
-const apiKeyAirtable = '{{ env.AIRTABLE_API_KEY }}';
-const baseId = '{{ env.AIRTABLE_BASE_ID }}';
-const table = '{{ env.AIRTABLE_TABLE_ID }}';
-
-const mailForm = document.getElementById('mail-form');
-const modal = document.querySelector('[data-modal]')
-const mailButton = document.getElementById('mail-button');
-const closeButton = document.querySelector('.close-button');
-const modalMessage = document.getElementById('modal-message');
-
-function openModal(message) {
-    modalMessage.innerHTML = message;
-    modal.showModal();
-}
-
-closeButton.addEventListener('click', () => {
-    modal.close()
-});
-
-mailForm.addEventListener('submit', async (event) => {
-  event.preventDefault();
-
-  const contactName = event.target.elements['contactName'].value;
-  const contactLastName = event.target.elements['contactLastName'].value;
-  const contactEmail = event.target.elements['contactEmail'].value;
-
-  try {
-	const data = {
-		fields: {
-			"Name": contactName,
-			"LastName": contactLastName,
-			"Email": contactEmail,
-		}
-	};
-
-    const response = await fetch(`https://api.airtable.com/${baseId}/${table}`, {
-      method: 'POST',
-      headers: {
-        'Authorization': `Bearer ${apiKeyAirtable}`,
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(data)
-    });
-
-	console.log(response.json())
-
-    if (!response.ok) {
-      throw new Error(`Airtable API error: ${response.status}`);
-    }
-
-    const result = await response.json();
-    openModal(`<img src="/img/success.svg" alt="success" /><h2>¡Gracias!</h2><h3>Su mail ha sido registrado exitosamente.</h3>`);
-    console.log('Datos enviados exitosamente a Airtable:', result);
-
-  	} catch (error) {
-        openModal('<img src="/img/error.svg" alt="error" /><h2>Error</h2><h3>Hubo un problema al registrar su mail.</h3><h3 class="bolder">Por favor, intente nuevamente.</h3>');
-    	console.error("Error al enviar datos a Airtable:", error);
-  }
-});
-
 </script>