Add copy button

Gemfile.lock

@@ -79,6 +79,7 @@ GEM
 PLATFORMS
   arm64-darwin-21
   arm64-darwin-22
+  arm64-darwin-23
   x86_64-linux
 
 DEPENDENCIES

_posts/2025-01-25/2025-01-25-seo-generator.html

@@ -29,11 +29,11 @@
         </form>
 
     <div class="grid-item">
-        <textarea rows="20" disabled id="output">Please fill all the fieldss</textarea>
-<!--        <button id="copy">Copy 📋</button>-->
+        <textarea rows="20" disabled id="output">Please fill all the fields</textarea>
+        <button id="copy">Copy 📋</button>
 
     </div>
 </div>
 
-
+<script src="{{"/assets/js/clipboard.js" | relative_url }}"></script>
 <script src="seo-generator.js"></script>

_posts/2025-01-25/seo-generator.js

@@ -1,5 +1,7 @@
 document.addEventListener("DOMContentLoaded", (event) => {
     const output = document.getElementById("output");
+    const copy = document.getElementById("copy");
+
     const form = document.getElementById("main-form");
 // Debouncing function to limit the frequency of updates
     let debounceTimer;
@@ -27,6 +29,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
         }
     });
 
+    addCopyToClipboardOnButton(copy,()=> output.value)
+
 });
 
 

assets/js/clipboard.js

@@ -0,0 +1,48 @@
+const fallbackCopyTextToClipboard = (text) => {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+
+    // Avoid scrolling to bottom
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+        const successful = document.execCommand("copy");
+        const msg = successful ? "successful" : "unsuccessful";
+        console.log("Fallback: Copying text command was " + msg);
+    } catch (err) {
+        console.error("Fallback: Oops, unable to copy", err);
+    }
+
+    document.body.removeChild(textArea);
+};
+
+const copyTextToClipboard = (text) => {
+    if (!navigator.clipboard) {
+        fallbackCopyTextToClipboard(text);
+        return;
+    }
+    navigator.clipboard.writeText(text).then(
+        () => {
+            console.log("Async: Copying to clipboard was successful!");
+        },
+        function (err) {
+            console.error("Async: Could not copy text: ", err);
+        },
+    );
+};
+
+const addCopyToClipboardOnButton = (button, getTextToCopy) => {
+    button.onclick = (e) => {
+        e.preventDefault();
+        copyTextToClipboard(getTextToCopy());
+        const original = button.innerHTML;
+        button.innerHTML = "✅ Copied";
+        setTimeout(() => (button.innerHTML = original), 1000);
+    };
+};