<script src="/src/js/copy-text-init.js"></script>
<div class="copy-text">
<div class="text theme container">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum dolores
asperiores explicabo quibusdams aperiam deleniti sed expedita similique, vel
quos eum facere sapiente rem corporis assumenda fugit, neque mollitia
ratione.
</div>
<button class="button theme">
<span class="text">Copy Text</span>
</button>
</div>
.copy-text button * {
pointer-events: none;
}
.copy-text button .text {
position: relative;
&:after {
content: "Copied!";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: var(--sl-color-text);
background-color: var(--sl-color-bg);
opacity: 0;
transition: opacity 200ms linear;
}
}
.copy-text button.-string-copied .text:after {
opacity: 1;
transition: opacity 200ms linear;
}
export default class CopyText {
constructor(CopyTextElements) {
CopyTextElements.forEach((CopyTextElement) => {
const btn = CopyTextElement.querySelector('button');
btn.addEventListener('click', (e) => {
this.copy(e.target);
});
});
}
copy(btn) {
const textTarget = btn.closest('.copy-text').querySelector('.text');
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
btn.classList.add('-string-copied');
setTimeout(() => {
btn.classList.remove('-string-copied');
}, 1750);
return navigator.clipboard.writeText(textTarget.textContent);
}
return Promise.reject('The Clipboard API is not available.');
}
}