2025-02-06 18:05:35 +01:00
|
|
|
// Based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
let blocks = document.querySelectorAll("pre[class^='language-']");
|
|
|
|
|
|
|
|
blocks.forEach((block) => {
|
|
|
|
if (navigator.clipboard) {
|
|
|
|
// Code block header title
|
|
|
|
let title = document.createElement("span");
|
|
|
|
let lang = block.getAttribute("data-lang");
|
|
|
|
title.innerHTML = lang;
|
|
|
|
|
|
|
|
// Copy button icon
|
2025-03-04 04:23:12 +01:00
|
|
|
let iconCopy = document.createElement("i");
|
|
|
|
iconCopy.classList.add("ph-bold", "ph-copy");
|
|
|
|
|
|
|
|
let iconCheck = document.createElement("i");
|
|
|
|
iconCheck.classList.add("ph-bold", "ph-check-square-offset");
|
2025-02-06 18:05:35 +01:00
|
|
|
|
|
|
|
// Copy button
|
|
|
|
let button = document.createElement("button");
|
|
|
|
let copyCodeText = document.getElementById("copy-code-text").textContent;
|
2025-03-04 04:23:12 +01:00
|
|
|
button.setAttribute("title", copyCodeText);
|
|
|
|
button.appendChild(iconCopy);
|
|
|
|
button.appendChild(iconCheck);
|
2025-02-06 18:05:35 +01:00
|
|
|
|
|
|
|
// Code block header
|
|
|
|
let header = document.createElement("div");
|
|
|
|
header.classList.add("header");
|
2025-03-04 04:23:12 +01:00
|
|
|
|
|
|
|
if (block.classList.contains("z-code")) {
|
|
|
|
header.classList.add("z-code");
|
|
|
|
}
|
|
|
|
|
2025-02-06 18:05:35 +01:00
|
|
|
header.appendChild(title);
|
|
|
|
header.appendChild(button);
|
|
|
|
|
|
|
|
// Container that holds header and the code block itself
|
|
|
|
let container = document.createElement("div");
|
|
|
|
container.classList.add("pre-container");
|
|
|
|
container.appendChild(header);
|
|
|
|
|
|
|
|
// Move code block into the container
|
|
|
|
block.parentNode.insertBefore(container, block);
|
|
|
|
container.appendChild(block);
|
|
|
|
|
|
|
|
button.addEventListener("click", async () => {
|
2025-03-04 04:23:12 +01:00
|
|
|
await copyCode(block, header, button);
|
2025-02-06 18:05:35 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
async function copyCode(block, header, button) {
|
|
|
|
let code = block.querySelector("code");
|
|
|
|
let text = code.innerText;
|
|
|
|
|
|
|
|
await navigator.clipboard.writeText(text);
|
|
|
|
|
|
|
|
header.classList.add("active");
|
|
|
|
button.setAttribute("disabled", true);
|
|
|
|
|
|
|
|
header.addEventListener("animationend", () => {
|
|
|
|
header.classList.remove("active");
|
|
|
|
button.removeAttribute("disabled");
|
|
|
|
}, { once: true });
|
|
|
|
}
|
|
|
|
});
|