From 7aad2ecf6a43404b92f644733f63311833bc0969 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Fri, 10 Feb 2023 14:57:11 +0000
Subject: [PATCH] Add Copy button

---
 public/copy_icon.png | Bin 0 -> 599 bytes
 src/App.css          |   5 +++-
 src/CopyButton.jsx   |  53 +++++++++++++++++++++++++++++++++++++++++++
 src/ImageItem.jsx    |   2 ++
 src/OpenWith.jsx     |  16 ++++++-------
 5 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 public/copy_icon.png
 create mode 100644 src/CopyButton.jsx

diff --git a/public/copy_icon.png b/public/copy_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cfdbd545c254a6ed036792e9ccd0e3faf52d6db
GIT binary patch
literal 599
zcmV-d0;v6oP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00004b3#c}2nYxW
zd<bNS00009a7bBm0001P0001P0VCx;rvLx|8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10n|xEK~zYIwbo0B&ruY>@z0nc@~D|2Sq&DFLdv6TY>17LjbtLp
zC{~mtyIIbHQt~ckVHUC=b{;i0ghXP>v!obPQ)<d%Sls)o>F3_x^<VhbsdInl+;i^Z
z+<Sj*%CuuSIy3ek7{srXv8@n%25v`vG~=@px6p&1g?N8)5T^@1_wfW*&`~!|Ds*0m
z2mdgTy_k&4sU#JPaScOw9c2`sC$vu_26Y4LV}h#~NF|vP1MI?rj2y#voUbL>idQ&*
z{c%78m9g67r8tW<x#?jamZ2LTg=HC!wsqKy>9M^X^D$g?UX42q!C?<hVyaLz7v%Tw
z17>S*NbwLG(S<FThjXPE*&R>t6vy#c*s~7I6w35su2U;BfK!+&%wiV$qMoJI1TB+F
za0Vkac_-9)j!V(+NZpXygWf2uurp`)?@N@L!EWJPH1QQjC$xL9Lbx`rml6zRzE5PN
z)_#fKcwcu+1saUf3iqN^Ov6|%L8tudRWXK7QSTBiLqetPz%zWyB{(cxzfF9>rl|K|
zL)6EGlfJFqVHNHcf~M%hp(cl_Oy6LU!m+Q>j<v#DkfmCpVf5oUUI-OYq8pEJv&pIc
lS1|`m;^<1e6<)zc{s2}%S%N}>;+X&d002ovPDHLkV1h<F20{P;

literal 0
HcmV?d00001

diff --git a/src/App.css b/src/App.css
index 087cca4..b73bbed 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,4 +34,7 @@ tbody tr:nth-child(odd) {
   max-width: 20px;
   max-height: 20px;
   margin: 2px;
-}
\ No newline at end of file
+}
+
+@-webkit-keyframes seesaw { from { transform: rotate(-0.05turn) } to { transform: rotate(0.05turn); }  }
+@keyframes seesaw { from { transform: rotate(-0.05turn) } to { transform: rotate(0.05turn); }  }
diff --git a/src/CopyButton.jsx b/src/CopyButton.jsx
new file mode 100644
index 0000000..fe8c1be
--- /dev/null
+++ b/src/CopyButton.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+export default function CopyButton({ source }) {
+
+  let [shaking, setShaking] = React.useState(false);
+
+  function copyTextToClipboard() {
+    var textArea = document.createElement("textarea");
+    // Place in the top-left corner of screen regardless of scroll position.
+    textArea.style.position = "fixed";
+
+    textArea.value = source;
+
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    var successful;
+    try {
+      successful = document.execCommand("copy");
+    } catch (err) {
+      console.log("Oops, unable to copy");
+    }
+    document.body.removeChild(textArea);
+
+    if (successful) {
+      // show user that copying happened - update text on element (e.g. button)
+      setShaking(true);
+      setTimeout(() => {
+        // reset after 1 second
+        setShaking(false);
+      }, 1000);
+    } else {
+      console.log("Copying failed");
+    }
+  }
+
+  let buttonStyle = {
+    background: "transparent",
+    border: "none",
+    padding: "0 2px"
+  };
+  if (shaking) {
+    // NB: seesaw is defined in global App.css
+    buttonStyle["animation"] = "0.1s linear 0s infinite alternate seesaw";
+  }
+  
+  return (
+    <button title="Copy" style={buttonStyle} onClick={copyTextToClipboard}>
+      <img src="/copy_icon.png" />
+    </button>
+  );
+}
diff --git a/src/ImageItem.jsx b/src/ImageItem.jsx
index 9d6e127..e62c87c 100644
--- a/src/ImageItem.jsx
+++ b/src/ImageItem.jsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import Viewer from "./Viewer";
 import OpenWith from "./OpenWith";
+import CopyButton from "./CopyButton";
 import { loadOmeroMultiscales, open, getNgffAxes } from "./util";
 
 // DeckGL react component
@@ -103,6 +104,7 @@ export default function ImageItem({ source }) {
       <td>{imgInfo.version}</td>
       <td>
         <a title={source} style={link_style} href={source}>{source}</a>
+        <CopyButton source={source} />
         <OpenWith source={source} />
       </td>
       {sizes}
diff --git a/src/OpenWith.jsx b/src/OpenWith.jsx
index c6afbdf..54a3829 100644
--- a/src/OpenWith.jsx
+++ b/src/OpenWith.jsx
@@ -3,17 +3,15 @@ import React from "react";
 import openwithJson from "../public/openwith.json";
 
 export default function OpenWith({ source }) {
-
   let viewers = openwithJson.viewers;
 
-
-  return (<div>
-    {
-      viewers.map(viewer => (
+  return (
+    <React.Fragment>
+      {viewers.map((viewer) => (
         <a target="_blank" href={viewer.href + source}>
-          <img className="viewer_icon" src={viewer.logo}/>
+          <img className="viewer_icon" src={viewer.logo} />
         </a>
-      ))
-    }
-  </div>);
+      ))}
+    </React.Fragment>
+  );
 }