fs
d9f07dcd63
CSS: - Remove duplicate li::before block in app-search.css - Fix typo: search-reuslt → search-result in app-search.css - Remove commented-out CSS rules in app-flash.css - Add descriptive header comment to all 27 CSS component files JS: - Complete WAI-ARIA Tabs pattern: generate IDs, add aria-controls on tab buttons and aria-labelledby on tab panels (app-tabs.js) - Add JSDoc header comments to ~33 JS files (core + components) - Add explanatory block comment to app-boot.js (why classic IIFE) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
/**
|
|
* Click-to-copy badge — copies text to clipboard with visual feedback.
|
|
*/
|
|
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();
|
|
}
|