Merge pull request #79 from Yeghro/main

Reorganize zaplink css/js
HiveTalk · Oct 1, 2024 · 24a97ff · 24a97ff
2 parents 9678f8a + 4be8661
commit 24a97ff
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 64 deletions.
diff --git a/public/css/landing.css b/public/css/landing.css
@@ -1601,6 +1601,10 @@ label {
 .cta-inner > * {
     position: relative;
 }
+.container .br-12 .cta-inner {
+    justify-content: center;
+}
+
 @media (min-width: 641px) {
     .cta {
         text-align: left;
@@ -1626,6 +1630,7 @@ label {
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    -ms-flex-item-align: center;
     min-height: 100vh;
 }
 .boxed-container {

diff --git a/public/js/Landing.js b/public/js/Landing.js
@@ -417,3 +417,89 @@
                 });
             }
     })();
+
+    (function () {
+        'use strict';
+
+        function initializeElements() {
+            // Room name input validation
+            const roomNameInput = document.getElementById('roomName');
+            if (roomNameInput) {
+                roomNameInput.addEventListener('input', function (event) {
+                    const input = event.target;
+                    const value = input.value;
+                    const isValid = /^[a-zA-Z0-9-_ ]*$/.test(value);
+                    if (!isValid) {
+                        input.setCustomValidity('Only alphanumeric characters, "-" and "_" are allowed.');
+                        input.reportValidity();
+                    } else {
+                        input.setCustomValidity('');
+                    }
+                });
+            }
+
+            // Join room button validation
+            const joinRoomButton = document.getElementById('joinRoomButton');
+            if (joinRoomButton) {
+                joinRoomButton.addEventListener('click', function (event) {
+                    const input = document.getElementById('roomName');
+                    const value = input.value;
+                    const isValid = /^[a-zA-Z0-9-_ ]*$/.test(value);
+
+                    if (!isValid) {
+                        alert('Only alphanumeric characters, "-" and "_" are allowed.');
+                        event.preventDefault(); // Prevents the form from being submitted
+                    }
+                });
+            }
+
+            // Zap link functionality
+            const zapLink = document.getElementById('zaplink');
+            if (zapLink) {
+                zapLink.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    Swal.fire({
+                        background: `radial-gradient(#333, #000`,
+                        color: '#fff',
+                        title: '<strong>Zap HiveTalk</strong>',
+                        html:
+                            '<input id="amount" class="swal2-input" type="number" placeholder="Amount (sats)" value="2100">',
+                        showCancelButton: true,
+                        confirmButtonText: 'Zap',
+                        confirmButtonColor: '#3085d6',
+                        cancelButtonText: 'Cancel',
+                        focusConfirm: false,
+                        reverseButtons: true,
+                        preConfirm: () => {
+                            const sats = Swal.getPopup().querySelector('#amount').value;
+                            if (!sats) {
+                                Swal.showValidationMessage(`Please enter the amount of sats`);
+                            }
+                            return { sats: sats };
+                        },
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            let amount = result.value.sats;
+                            let lnaddress = 'donate@hivetalk.org';
+
+                            window.moduleFunctions
+                                .handleDonation(lnaddress, amount)
+                                .then((result) => {
+                                    console.log('handleDonationResult:', result);
+                                })
+                                .catch((error) => {
+                                    console.log('Error:', error);
+                                });
+                        }
+                    });
+                });
+            }
+        }
+
+        // Run initializeElements when the DOM is fully loaded
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initializeElements);
+        } else {
+            initializeElements();
+        }
+    })();
diff --git a/public/views/landing.html b/public/views/landing.html
@@ -340,69 +340,5 @@ <h3 class="section-title mt-0">
         <script defer src="../js/info.js"></script>
         <script async defer src="https://buttons.github.io/buttons.js"></script>
 
-        <script>
-            document.getElementById('roomName').addEventListener('input', function (event) {
-                const input = event.target;
-                const value = input.value;
-                const isValid = /^[a-zA-Z0-9-_ ]*$/.test(value);
-                if (!isValid) {
-                    input.setCustomValidity('Only alphanumeric characters, "-" and "_" are allowed.');
-                    input.reportValidity();
-                } else {
-                    input.setCustomValidity('');
-                }
-            });
-
-            document.getElementById('joinRoomButton').addEventListener('click', function (event) {
-                const input = document.getElementById('roomName');
-                const value = input.value;
-                const isValid = /^[a-zA-Z0-9-_ ]*$/.test(value);
-
-                if (!isValid) {
-                    alert('Only alphanumeric characters, "-" and "_" are allowed.');
-                    event.preventDefault(); // Prevents the form from being submitted
-                }
-            });
-        </script>
-        <script>
-            document.getElementById('zaplink').addEventListener('click', function (e) {
-                e.preventDefault();
-                Swal.fire({
-                    background: `radial-gradient(#333, #000`,
-                    color: '#fff',
-                    title: '<strong>Zap HiveTalk</strong>',
-                    html:
-                        '<input id="amount" class="swal2-input" type="number" placeholder="Amount (sats)" value="2100">',
-                    showCancelButton: true,
-                    confirmButtonText: 'Zap',
-                    confirmButtonColor: '#3085d6',
-                    cancelButtonText: 'Cancel',
-                    focusConfirm: false,
-                    reverseButtons: true,
-                    preConfirm: () => {
-                        const sats = Swal.getPopup().querySelector('#amount').value;
-                        if (!sats) {
-                            Swal.showValidationMessage(`Please enter the amount of sats`);
-                        }
-                        return { sats: sats };
-                    },
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        let amount = result.value.sats;
-                        let lnaddress = 'donate@hivetalk.org';
-
-                        window.moduleFunctions
-                            .handleDonation(lnaddress, amount)
-                            .then((result) => {
-                                console.log('handleDonationResult:', result);
-                            })
-                            .catch((error) => {
-                                console.log('Error:', error);
-                            });
-                    }
-                });
-            });
-        </script>
-
     </body>
 </html>