Usage

HTML

<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>

SCSS

.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;
}

JavaScript

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.');
	}
}