Merge pull request #403 from Swirrl/tr/copylinkbutton

UI - add button to copy link to csv on Revision and Release (fixes #402)
Swirrl · Mar 20, 2024 · 4168887 · 4168887
2 parents dda3ffb + ce97eb8
commit 4168887
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/consumer-wireframes/_includes/dataset-release.html b/consumer-wireframes/_includes/dataset-release.html
@@ -34,10 +34,15 @@ <h1 class="font-weight-bold pr-5">
             <div class="col-lg-8">
                 <h2 class="pt-4">Latest data</h2>
 
-
-                <h3 id = "downloadButton" class="h4 pt-3"><a class="btn btn-primary" id = "downloadButtonMain" onclick="downloadCSV(uri,'release')">Download dataset (CSV)</a>
-                    <!-- <a a class="btn btn-secondary " href="#">Download metadata (JSON, 20Kb)</a> -->
-                </h3>
+                <div class="d-inline-block">
+                    <a class="btn btn-primary " id="downloadButtonMain1" onclick="downloadCSV(uri,'release')">Download dataset (CSV)</a>
+                </div>
+                <div class="d-inline-block">
+                    <a class="btn btn-primary bg-light text-dark" id="downloadButtonMain2" onclick="copyToClipboard(uri+'.csv')">Direct link (CSV)
+                         <img src="/assets/copyicon3black.png" alt="Copy Icon" class="pb-1" width="22" height="22">
+                    </a>
+                </div>
+
                 <h3 class="h5 pt-3">
                     <a class="" data-bs-toggle="collapse" href="#1986-2010explain" role="button" aria-expanded="false"
                         aria-controls="collapseExample">
@@ -393,4 +398,18 @@ <h3 class="h5">
         request.send();
 
     }
+    function copyToClipboard(text) {
+    var textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+
+    textarea.select();
+
+    document.execCommand('copy');
+
+    document.body.removeChild(textarea);
+
+    alert('Link copied to clipboard: ' + text);
+}
+
 </script>
diff --git a/consumer-wireframes/_includes/dataset-revision.html b/consumer-wireframes/_includes/dataset-revision.html
@@ -36,8 +36,14 @@ <h1 class="font-weight-bold pr-5"><span id="title"></span></h1>
                 <h2 class="pt-4">Data</h2>
 
 
-                <h3 class="h4 pt-3"><a class="btn btn-primary" onclick="downloadCSV(uri,'revision')">Download dataset
-                        (CSV)</a>
+                <div class="d-inline-block">
+                    <a class="btn btn-primary " id="downloadButtonMain1" onclick="downloadCSV(uri,'release')">Download dataset (CSV)</a>
+                </div>
+                <div class="d-inline-block">
+                    <a class="btn btn-primary bg-light text-dark" id="downloadButtonMain2" onclick="copyToClipboard(uri+'.csv')">Direct link (CSV)
+                         <img src="/assets/copyicon3black.png" alt="Copy Icon" class="pb-1" width="22" height="22">
+                    </a>
+                </div>
                     <!-- <a a class="btn btn-secondary " href="#">Download metadata (JSON, 20Kb)</a> -->
                 </h3>
                 <h3 class="h5 pt-3">
@@ -293,4 +299,17 @@ <h3 class="h5">
 
         request.send();
     }
+    function copyToClipboard(text) {
+    var textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+
+    textarea.select();
+
+    document.execCommand('copy');
+
+    document.body.removeChild(textarea);
+
+    alert('Link copied to clipboard: ' + text);
+}
 </script>
diff --git a/consumer-wireframes/assets/copyicon3black.png b/consumer-wireframes/assets/copyicon3black.png