Add copy-to-clipboard button to meta page #44

Merged
electricdusk merged 2 commits from issue-42 into master 2020-04-14 16:08:09 +02:00
3 changed files with 71 additions and 1 deletions

View File

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

View File

@ -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");
}
})();

View File

@ -2,7 +2,14 @@
'{{.Paste.Key}}{{.FileExt}}' metadata - rushlink '{{.Paste.Key}}{{.FileExt}}' metadata - rushlink
{{end}} {{end}}
{{define "head-append"}}
<script type="text/javascript" src="/js/copyclipboard.js" defer></script>
{{end}}
{{define "body"}} {{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> <pre>
<a href="{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}">{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}</a> <a href="{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}">{{.RootURL}}/{{.Paste.Key}}{{.FileExt}}</a>
--- ---