From 4001c37dc13d5f511f1a66addad4b3b08d777a8d Mon Sep 17 00:00:00 2001
From: Alex Parsons <alex.parsons@mysociety.org>
Date: Tue, 25 Jun 2024 08:04:09 +0000
Subject: [PATCH] More persistant clipboard message

---
 hub/templates/hub/tools/postcode.html | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/hub/templates/hub/tools/postcode.html b/hub/templates/hub/tools/postcode.html
index 301c6993d..258b49912 100644
--- a/hub/templates/hub/tools/postcode.html
+++ b/hub/templates/hub/tools/postcode.html
@@ -85,6 +85,9 @@ <h2>More information</h2>
 </div>
     <script src="/static/js/mini_lookup.js" type="text/javascript"></script>
     <script>
+
+        const copyButton = document.getElementById("copyButton");
+
         fetch("/static/lookup_data/pcon_2024.json")
             .then(response => response.json())
             .then(data => {
@@ -116,6 +119,10 @@ <h2>More information</h2>
             var postcodes = document.getElementById("postcodes").value.split("\n");
             var constituencies = postcodes.map(postcode => lookup.getValue(postcode));
 
+            copyButton.classList.remove("btn-success");
+            copyButton.classList.add("btn-primary");
+            copyButton.textContent = "Copy Constituencies to clipboard";
+
             // if output_type is not mySoc ID, convert the constituency ids to the desired output
             if (output_type !== "mysoc_id") {
                 constituencies = constituencies.map(constituency => {
@@ -144,25 +151,17 @@ <h2>More information</h2>
             element.addEventListener("input", process);
         });
 
-        document.getElementById("copyButton").addEventListener("click", function () {
+        copyButton.addEventListener("click", function () {
             var constituenciesText = document.getElementById("constituencies").value;
             navigator.clipboard.writeText(constituenciesText)
                 .then(() => {
-                    console.log("Constituencies copied to clipboard");
+                    copyButton.classList.remove("btn-primary");
+                    copyButton.classList.add("btn-success");
+                    copyButton.textContent = "Copied to clipboard";  
                 })
                 .catch(error => {
                     console.error("Error copying constituencies to clipboard:", error);
                 });
-            // change the copyButton class to btn-success and its text to 'Copied to clipboard'
-            // for two seconds before reverting to the original class and text
-            document.getElementById("copyButton").classList.remove("btn-primary");
-            document.getElementById("copyButton").classList.add("btn-success");
-            document.getElementById("copyButton").textContent = "Copied to clipboard";
-            setTimeout(function () {
-                document.getElementById("copyButton").classList.remove("btn-success");
-                document.getElementById("copyButton").classList.add("btn-primary");
-                document.getElementById("copyButton").textContent = "Copy Constituencies to clipboard";
-            }, 500);
         });
     </script>