make copying more generic and hide when unsupported
This commit is contained in:
parent
530ae31c77
commit
c320f87961
|
@ -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")
|
||||
);
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue