Merge pull request 'Add copy-to-clipboard button to meta page' (#44) from issue-42 into master

assets/css/main.css

@@ -19,4 +19,16 @@ body {
 
 pre {
     padding-left: 4ex; /* approx 4 monospaced spaces */
-}
+}
+
+.success {
+    color: #008000;
+}
+
+.fail {
+    color: #800000;
+}
+
+.hidden {
+    display: none;
+}

assets/js/copyclipboard.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const COPY_TO_CLIPBOARD_CONTAINER_ID = "copyToClipboardContainer";
+const COPY_TO_CLIPBOARD_STATUS_ID = "copyToClipboardStatus";
+let copyToClipboardCtr = 0;
+
+function copyToClipboardSuccess() {
+    let statusElem = document.getElementById(COPY_TO_CLIPBOARD_STATUS_ID);
+    statusElem.innerText = "URL copied!";
+    statusElem.classList.remove("fail");
+    statusElem.classList.add("success");
+}
+
+function copyToClipboardFail(cause) {
+    let statusElem = document.getElementById(COPY_TO_CLIPBOARD_STATUS_ID);
+    if (!cause) cause = "unknown error";
+    let msg = "copy failed: " + cause;
+    console.log(msg);
+    statusElem.innerText = msg;
+    statusElem.classList.remove("success");
+    statusElem.classList.add("fail");
+}
+
+function copyToClipboard(url) {
+    let copyEventIdx = ++copyToClipboardCtr;
+
+    if (!window.navigator.clipboard) {
+        copyToClipboardFail("could not access clipboard");
+        return;
+    }
+    window.navigator.clipboard.writeText(url).then(() => {
+        if (copyToClipboardCtr !== copyEventIdx) return;
+        copyToClipboardSuccess();
+    }, () => {
+        if (copyToClipboardCtr !== copyEventIdx) return;
+        copyToClipboardFail();
+    });
+}
+
+(function () {
+    if (!window.navigator.clipboard) {
+        let msg = "cannot access clipboard";
+        if (window.location.protocol !== "https:") {
+            msg += ": website not using https"
+        }
+        console.error(msg);
+    } else {
+        let container = document.getElementById(COPY_TO_CLIPBOARD_CONTAINER_ID);
+        container.classList.remove("hidden");
+    }
+})();

assets/templates/html/pasteMeta.html.tmpl

@@ -2,7 +2,14 @@
 '{{.Paste.Key}}{{.FileExt}}' metadata - rushlink
 {{end}}
 
+{{define "head-append"}}
+<script type="text/javascript" src="/js/copyclipboard.js" defer></script>
+{{end}}
+
 {{define "body"}}
+<pre id="copyToClipboardContainer" class="hidden">
+<button onclick="copyToClipboard('{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}')">Copy URL to clipboard</button> <span id="copyToClipboardStatus"></span>
+</pre>
 <pre>
 <a href="{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}">{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}</a>
 ---