optimize share button script

RadicalxChange · Oct 29, 2024 · ec6ec3c · ec6ec3c
1 parent e9a19c3
commit ec6ec3c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 118 deletions.
diff --git a/default.hbs b/default.hbs
@@ -14,64 +14,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
     <script src="{{asset "built/index.js"}}" defer></script>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            const shareModal = document.getElementById("shareModal");
-            const shareButton = document.querySelector(".share-button");
-            const closeButton = shareModal.querySelector(".close-button");
-            const copyButton = shareModal.querySelector(".field button");
-            const copyInput = shareModal.querySelector(".field input");
-            const field = shareModal.querySelector(".field");
-
-            // Open the share modal
-            function openShareModal() {
-                if (shareModal) {
-                    shareModal.classList.remove("hidden");
-                }
-            }
-
-            // Close the share modal
-            function closeShareModal() {
-                if (shareModal) {
-                    shareModal.classList.add("hidden");
-                }
-            }
-
-            // Event listener for opening the modal
-            if (shareButton) {
-                shareButton.addEventListener("click", openShareModal);
-            }
-
-            // Event listener for closing the modal
-            if (closeButton) {
-                closeButton.addEventListener("click", closeShareModal);
-            }
-
-            // Close the modal when clicking outside of it
-            window.addEventListener("click", function(event) {
-                if (event.target === shareModal) {
-                    closeShareModal();
-                }
-            });
-
-            // Copy functionality
-            if (copyButton && copyInput) {
-                copyButton.addEventListener("click", () => {
-                    copyInput.select();
-                    if (document.execCommand("copy")) {
-                        field.classList.add("active");
-                        copyButton.innerText = "Copied";
-                        setTimeout(() => {
-                            window.getSelection().removeAllRanges();
-                            field.classList.remove("active");
-                            copyButton.innerText = "Copy";
-                        }, 3000);
-                    }
-                });
-            }
-        });
-    </script>
-
 
     <title>{{meta_title}}</title>
 

diff --git a/partials/share-button.hbs b/partials/share-button.hbs
@@ -2,7 +2,7 @@
 Re-usable card for social share button and modal
 --}}
 
-<button class="share-button" onclick="openShareModal()">
+<button class="share-button">
     <span>Share</span>
     <img class="inline-block w-4 ml-2" src="{{asset "images/share-arrow.png"}}" />
 </button>
@@ -11,7 +11,7 @@ Re-usable card for social share button and modal
     <div class="share-modal-content">
         <header>
             <span>Share this post</span>
-            <span class="close-button" onclick="closeShareModal()">&times;</span>
+            <span class="close-button">&times;</span>
         </header>
         <ul class="social-share-list">
             {{!-- facebook, linkedin post is empty --}}

diff --git a/podcast.hbs b/podcast.hbs
@@ -14,64 +14,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">
     <script src="{{asset "built/index.js"}}" defer></script>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            const shareModal = document.getElementById("shareModal");
-            const shareButton = document.querySelector(".share-button");
-            const closeButton = shareModal.querySelector(".close-button");
-            const copyButton = shareModal.querySelector(".field button");
-            const copyInput = shareModal.querySelector(".field input");
-            const field = shareModal.querySelector(".field");
-
-            // Open the share modal
-            function openShareModal() {
-                if (shareModal) {
-                    shareModal.classList.remove("hidden");
-                }
-            }
-
-            // Close the share modal
-            function closeShareModal() {
-                if (shareModal) {
-                    shareModal.classList.add("hidden");
-                }
-            }
-
-            // Event listener for opening the modal
-            if (shareButton) {
-                shareButton.addEventListener("click", openShareModal);
-            }
-
-            // Event listener for closing the modal
-            if (closeButton) {
-                closeButton.addEventListener("click", closeShareModal);
-            }
-
-            // Close the modal when clicking outside of it
-            window.addEventListener("click", function(event) {
-                if (event.target === shareModal) {
-                    closeShareModal();
-                }
-            });
-
-            // Copy functionality
-            if (copyButton && copyInput) {
-                copyButton.addEventListener("click", () => {
-                    copyInput.select();
-                    if (document.execCommand("copy")) {
-                        field.classList.add("active");
-                        copyButton.innerText = "Copied";
-                        setTimeout(() => {
-                            window.getSelection().removeAllRanges();
-                            field.classList.remove("active");
-                            copyButton.innerText = "Copy";
-                        }, 3000);
-                    }
-                });
-            }
-        });
-    </script>
-
 
     <title>{{meta_title}}</title>
 

diff --git a/post.hbs b/post.hbs
@@ -122,6 +122,63 @@
     }
   });
 </script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const shareModal = document.getElementById("shareModal");
+        const shareButton = document.querySelector(".share-button");
+        const closeButton = shareModal ? shareModal.querySelector(".close-button") : null;
+        const copyButton = shareModal ? shareModal.querySelector(".field button") : null;
+        const copyInput = shareModal ? shareModal.querySelector(".field input") : null;
+        const field = shareModal ? shareModal.querySelector(".field") : null;
+
+        // Open the share modal
+        function openShareModal() {
+            if (shareModal) {
+                shareModal.classList.remove("hidden");
+            }
+        }
+
+        // Close the share modal
+        function closeShareModal() {
+            if (shareModal) {
+                shareModal.classList.add("hidden");
+            }
+        }
+
+        // Event listener for opening the modal
+        if (shareButton) {
+            shareButton.addEventListener("click", openShareModal);
+        }
+
+        // Event listener for closing the modal
+        if (closeButton) {
+            closeButton.addEventListener("click", closeShareModal);
+        }
+
+        // Close the modal when clicking outside of it
+        window.addEventListener("click", function(event) {
+            if (event.target === shareModal) {
+                closeShareModal();
+            }
+        });
+
+        // Copy functionality
+        if (copyButton && copyInput) {
+            copyButton.addEventListener("click", () => {
+                copyInput.select();
+                if (document.execCommand("copy")) {
+                    field.classList.add("active");
+                    copyButton.innerText = "Copied";
+                    setTimeout(() => {
+                        window.getSelection().removeAllRanges();
+                        field.classList.remove("active");
+                        copyButton.innerText = "Copy";
+                    }, 3000);
+                }
+            });
+        }
+    });
+</script>
 
 <ul class="post-tags" style="display: none;">
   {{#foreach tags}}