Copy to clipboard

How It Works

• Clicking an element with blx-el="copy-trigger":
  • Finds the corresponding copy-text and reads its content
  • Writes the content to the clipboard
  • Shows the matching copy-alert with animation
• Uses blx-id (optional for single instance) to associate the three elements

‍

<!-- BLX by https://www.codeandwander.com -- Copy to clipboard -->
<script>
  document.addEventListener('click', function (event) {
    const trigger = event.target.closest('[blx-el="copy-trigger"]');
    if (!trigger) return;

    const id = trigger.getAttribute('blx-id') || '';

    // Match text element
    const textEl = document.querySelector(
      `[blx-el="copy-text"][blx-id="${id}"], [blx-el="copy-text"]:not([blx-id])`
    );

    // Match alert element
    const alertEl = document.querySelector(
      `[blx-el="copy-alert"][blx-id="${id}"], [blx-el="copy-alert"]:not([blx-id])`
    );

    const text = textEl?.textContent || textEl?.value || '';
    if (!text) return;

    // Special case: sharelink
    const finalText = id === 'sharelink' ? window.location.href : text;

    navigator.clipboard.writeText(finalText).then(() => {
      if (!alertEl) return;

      alertEl.style.display = 'block';
      alertEl.classList.add('show');

      setTimeout(() => {
        alertEl.classList.remove('show');
        alertEl.style.display = 'none';
      }, 2000);
    }, (err) => {
      console.error('Copy failed:', err);
    });
  });
</script>