mirror of
https://github.com/samber/awesome-prometheus-alerts.git
synced 2026-06-25 02:46:59 +08:00
Update site/src/components/CopyButton.astro
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
parent
e056652504
commit
96731e7ee2
1 changed files with 39 additions and 36 deletions
|
|
@ -43,45 +43,48 @@ const btnId = `copy-btn-${targetId}`;
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<script>
|
<script define:vars={{ btnId }}>
|
||||||
document.querySelectorAll<HTMLButtonElement>('.copy-btn').forEach((btn) => {
|
const btn = document.getElementById(btnId);
|
||||||
btn.addEventListener('click', async () => {
|
if (!(btn instanceof HTMLButtonElement)) return;
|
||||||
const targetId = btn.dataset.copyTarget;
|
if (btn.dataset.copyBound === 'true') return;
|
||||||
if (!targetId) return;
|
|
||||||
const target = document.getElementById(targetId);
|
|
||||||
if (!target) return;
|
|
||||||
|
|
||||||
const text = target.textContent ?? '';
|
btn.dataset.copyBound = 'true';
|
||||||
try {
|
btn.addEventListener('click', async () => {
|
||||||
await navigator.clipboard.writeText(text.trim());
|
const targetId = btn.dataset.copyTarget;
|
||||||
} catch {
|
if (!targetId) return;
|
||||||
// Fallback for older browsers
|
const target = document.getElementById(targetId);
|
||||||
const ta = document.createElement('textarea');
|
if (!target) return;
|
||||||
ta.value = text.trim();
|
|
||||||
ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;';
|
|
||||||
document.body.appendChild(ta);
|
|
||||||
ta.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
document.body.removeChild(ta);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Visual feedback
|
const text = target.textContent ?? '';
|
||||||
const copyIcon = btn.querySelector('.copy-icon');
|
try {
|
||||||
const checkIcon = btn.querySelector('.check-icon');
|
await navigator.clipboard.writeText(text.trim());
|
||||||
const copyLabel = btn.querySelector('.copy-label');
|
} catch {
|
||||||
const copiedLabel = btn.querySelector('.copied-label');
|
// Fallback for older browsers
|
||||||
|
const ta = document.createElement('textarea');
|
||||||
|
ta.value = text.trim();
|
||||||
|
ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;';
|
||||||
|
document.body.appendChild(ta);
|
||||||
|
ta.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(ta);
|
||||||
|
}
|
||||||
|
|
||||||
copyIcon?.classList.add('hidden');
|
// Visual feedback
|
||||||
checkIcon?.classList.remove('hidden');
|
const copyIcon = btn.querySelector('.copy-icon');
|
||||||
copyLabel?.classList.add('hidden');
|
const checkIcon = btn.querySelector('.check-icon');
|
||||||
copiedLabel?.classList.remove('hidden');
|
const copyLabel = btn.querySelector('.copy-label');
|
||||||
|
const copiedLabel = btn.querySelector('.copied-label');
|
||||||
|
|
||||||
setTimeout(() => {
|
copyIcon?.classList.add('hidden');
|
||||||
copyIcon?.classList.remove('hidden');
|
checkIcon?.classList.remove('hidden');
|
||||||
checkIcon?.classList.add('hidden');
|
copyLabel?.classList.add('hidden');
|
||||||
copyLabel?.classList.remove('hidden');
|
copiedLabel?.classList.remove('hidden');
|
||||||
copiedLabel?.classList.add('hidden');
|
|
||||||
}, 2000);
|
setTimeout(() => {
|
||||||
});
|
copyIcon?.classList.remove('hidden');
|
||||||
|
checkIcon?.classList.add('hidden');
|
||||||
|
copyLabel?.classList.remove('hidden');
|
||||||
|
copiedLabel?.classList.add('hidden');
|
||||||
|
}, 2000);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue