Add copy button to templates by @tanjz12

Storce · web-flow · commit 0808e6a3a52e · 2025-09-16T09:25:46.000-07:00
Copy button
diff --git a/www/index.html.tmpl b/www/index.html.tmpl
@@ -13,6 +13,18 @@
                 background-color: #f66;
                 border-color: #a94442;
             }
+
+            .copied {
+                color:#888;
+            }
+
+            .fresh {
+                color:#000;
+            }
+
+            .notready {
+                color:#000;
+            }
         </style>
     </head>
     <body>
@@ -31,6 +43,7 @@
                         <h2 style="margin-top: 0;" id="title"></h2>
                         <div id="variables"></div>
                         <textarea id="text" class="form-control" style="height: 400px;"></textarea>
+                        <button style="margin-top: 20px;" id="button" class="fresh" onclick="copyText()">Copy Text</button>
                     </div>
                 </div>
             </div>
@@ -75,6 +88,7 @@
                                             values[v] = $(this).val();
                                             // If the field is empty, show it as errored
                                             $(this).toggleClass('error', values[v] === "");
+                                            refreshButton();
                                             updateText();
                                         })
                                 )
@@ -92,6 +106,7 @@
                         if (!(v in values) || values[v] === "") {
                             $('#text').bind('mousedown', preventSelection);
                             $('#text').prop('readonly', true);
+                            buttonNotReady();
                         }
 
                         // fuck JavaScript
@@ -119,6 +134,7 @@
 
                                 $.get('/templates/' + encodeURI(page), function(newText) {
                                     text = newText;
+                                    refreshButton();
                                     updateText();
                                 });
                             }
@@ -142,10 +158,42 @@
                     });
 
                     $(window).on('hashchange', updatePage);
+                    refreshButton();
                     updateText();
                     updatePage();
                 });
+
+                const copy_button = document.getElementById("button");
+
+                window.copyText = () => {
+                    const copy_button = document.getElementById("button");
+                    // Copy text to clipboard onclick.
+                    if (copy_button.className == 'notready') {
+                        buttonNotReady();
+                    }
+                    else {
+                        const copyText = document.getElementById("text");
+                        const title = document.getElementById("title");
+                        navigator.clipboard.writeText(copyText.value);
+
+                        // Button text change from "Copy Text" to "Copied", and text turns grey.
+                        copy_button.innerHTML = 'Copied';
+                        copy_button.className = 'copied';
+                    }
+                }
+
+                window.refreshButton = () => {
+                    copy_button.innerHTML = 'Copy Text';
+                    copy_button.className = 'fresh';
+                }
+
+                window.buttonNotReady = () => {
+                    copy_button.innerHTML = 'Not all fields are filled';
+                    copy_button.className = 'notready';
+                }
             })();
+
+
         </script>
     </body>
 </html>
