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

View File

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

View File

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

View File

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