make copying more generic and hide when unsupported

This commit is contained in:
neri 2021-12-20 01:05:38 +01:00
parent 530ae31c77
commit c320f87961
4 changed files with 25 additions and 27 deletions

View File

@ -1,17 +1,13 @@
const button = document.getElementById("copy");
button.classList.remove("hidden");
button.onclick = () => {
if (!navigator.clipboard) {
button.innerText = "nicht unterstützt";
return;
}
const content = document.getElementsByClassName("copy-content")[0];
navigator.clipboard.writeText(content.textContent).then(
(_) => {
button.innerText = "kopiert!";
},
(_) => {
button.innerText = "nicht unterstützt";
}
if (navigator.clipboard) {
const buttons = document.querySelectorAll("button[data-copy], a[data-copy]");
for (const button of buttons) {
button.classList.remove("hidden");
button.onclick = () => {
const target = document.querySelector(button.getAttribute("data-copy"));
navigator.clipboard.writeText(target.textContent).then(
(_) => (button.innerText = "kopiert!"),
(_) => (button.innerText = "nicht unterstützt")
);
};
};
}
}

View File

@ -9,12 +9,12 @@
<body>
<main>
<h1><a href="/">datatrash</a></h1>
<textarea id="text" rows="20" cols="120" class="copy-content" readonly>
{text}</textarea
>
<textarea id="text" rows="20" cols="120" readonly>{text}</textarea>
<br />
<a class="main button" href="?dl">herunterladen</a>
<button id="copy" class="button hidden">text kopieren</button>
<button id="copy" data-copy="#text" class="button hidden">
text kopieren
</button>
</main>
<footer>
<a

View File

@ -9,11 +9,10 @@
<body>
<main>
<h1><a href="/">datatrash</a></h1>
<p>
datei-link:
<a id="link" class="copy-content" href="{url}">{url}</a>
</p>
<button id="copy" class="main button hidden">link kopieren</button>
<p>link: <a id="link" href="{url}">{url}</a></p>
<button id="copy" data-copy="#link" class="main button hidden">
link kopieren
</button>
</main>
<footer>
<a

View File

@ -10,7 +10,8 @@
<main>
<h1><a href="/">datatrash</a></h1>
<a
class="large-link copy-content"
id="link"
class="large-link"
href="{link_attribute}"
rel="noopener noreferrer"
>{link_content}</a
@ -19,7 +20,9 @@
<a class="main button" href="{link_attribute}" rel="noopener noreferrer">
link öffnen
</a>
<button id="copy" class="button hidden">link kopieren</button>
<button id="copy" data-copy="#link" class="button hidden">
link kopieren
</button>
<a class="button" href="?dl">als text herunterladen</a>
</main>
<footer>