baseline

web/js/components/app-copy-badge.js

@@ -0,0 +1,66 @@
+const COPY_SELECTOR = '.badge[data-copy="true"]';
+const COPIED_CLASS = 'is-copied';
+
+const getCopyValue = (badge) => {
+  const explicit = badge.getAttribute('data-copy-value');
+  if (explicit !== null && explicit !== '') {
+    return explicit;
+  }
+  return (badge.textContent || '').trim();
+};
+
+const copyText = async (value) => {
+  if (!value) return false;
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value);
+    return true;
+  }
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.select();
+  const ok = document.execCommand('copy');
+  document.body.removeChild(textarea);
+  return ok;
+};
+
+const enhanceBadge = (badge) => {
+  if (badge.querySelector('.badge-copy-icon')) return;
+  const icon = document.createElement('span');
+  icon.className = 'badge-copy-icon';
+  icon.setAttribute('aria-hidden', 'true');
+  icon.innerHTML = '<i class="bi bi-copy"></i><i class="bi bi-check2"></i>';
+  badge.appendChild(icon);
+  badge.setAttribute('role', 'button');
+  badge.setAttribute('tabindex', '0');
+  if (!badge.hasAttribute('aria-label')) {
+    badge.setAttribute('aria-label', 'Copy to clipboard');
+  }
+  const handler = async (event) => {
+    event.preventDefault();
+    const value = getCopyValue(badge);
+    const ok = await copyText(value);
+    if (!ok) return;
+    badge.classList.add(COPIED_CLASS);
+    window.setTimeout(() => badge.classList.remove(COPIED_CLASS), 1200);
+  };
+  badge.addEventListener('click', handler);
+  badge.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      handler(event);
+    }
+  });
+};
+
+const initBadgeCopy = () => {
+  document.querySelectorAll(COPY_SELECTOR).forEach(enhanceBadge);
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initBadgeCopy);
+} else {
+  initBadgeCopy();
+}