Le blog de Victor Héry
https://blog.victor-hery.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.5 KiB
52 lines
1.5 KiB
const copyToClipboardDefaultText = {
|
|
innerText: "Copy",
|
|
ariaLabel: "Copy to clipboard"
|
|
};
|
|
const copyToClipboardSuccessText = {
|
|
innerText: "Copied!",
|
|
ariaLabel: "Copied to clipboard"
|
|
};
|
|
|
|
// Get all pre. But ignore line numbers section
|
|
document.querySelectorAll("div.highlight pre").forEach(snippet => {
|
|
// create div.codecopy
|
|
const wrapper = document.createElement("div");
|
|
wrapper.classList.add("codecopy");
|
|
|
|
// Wrap code inside div.codecopy
|
|
const parent = snippet.parentNode;
|
|
parent.replaceChild(wrapper, snippet);
|
|
wrapper.appendChild(snippet);
|
|
|
|
// Create button
|
|
const button = `
|
|
<button
|
|
class="codecopy-btn"
|
|
title=${copyToClipboardDefaultText.ariaLabel}
|
|
aria-label=${copyToClipboardDefaultText.ariaLabel}
|
|
>${copyToClipboardDefaultText.innerText}
|
|
</button>`;
|
|
|
|
// Add button to div.codecopy
|
|
wrapper.insertAdjacentHTML("afterbegin", button);
|
|
});
|
|
|
|
// Add copy to clipboard functionality
|
|
const clipboard = new ClipboardJS(".codecopy-btn", {
|
|
target: trigger => {
|
|
return trigger.parentNode;
|
|
}
|
|
});
|
|
|
|
// Show message on success
|
|
clipboard.on("success", e => {
|
|
e.trigger.innerText = copyToClipboardSuccessText.innerText;
|
|
e.trigger.setAttribute("aria-label", copyToClipboardSuccessText.ariaLabel);
|
|
e.clearSelection();
|
|
|
|
// Reset button text
|
|
setTimeout(() => {
|
|
e.trigger.innerText = copyToClipboardDefaultText.innerText;
|
|
e.trigger.setAttribute("aria-label", copyToClipboardDefaultText.ariaLabel);
|
|
}, 400);
|
|
});
|