Add Copy button

src/App.css

@@ -34,4 +34,7 @@ tbody tr:nth-child(odd) {
   max-width: 20px;
   max-height: 20px;
   margin: 2px;
-}
+}
+
+@-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); }  }

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>
+  );
+}

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}

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>
+  );
 }