Public
Edited
Mar 23, 2024
Importers
5 stars
Insert cell
Insert cell
installHere = {
intro,
[...document.querySelectorAll("pre")].map((el) =>
installCopyCode(el, { invalidation })
);
}
Insert cell
installCopyCode = (htmlElement, { invalidation } = {}) => {
if (!document.getElementById("_509d6b5d1aebf2a1")) {
document.head.append(style());
}

const createButton = () => {
const div = document.createElement("div");
div.style = "position: relative; width: 0; height: 0";
const copyButton = document.createElement("button");
copyButton.style = "position: relative;";
copyButton.type = "button";
copyButton.ariaLabel = "Copy code to clipboard";
copyButton.innerText = "copy";
copyButton.onclick = (evt) => {
console.log(evt);
var code = htmlElement.querySelector("code").innerText.trim();
window.navigator.clipboard.writeText(code);
copyButton.innerText = "copied";
setTimeout(() => {
copyButton.innerText = "copy";
}, 2000);
};

div.append(copyButton);
return div;
};

const ui = createButton();

console.log("create button", ui.firstChild.onclick);
htmlElement.prepend(ui);
if (invalidation) invalidation.then(() => ui.remove());
}
Insert cell
style = () => html`<style id="_509d6b5d1aebf2a1">
pre button {
opacity: 0;
}
pre:hover button {
opacity: 1;
}
pre button:active,
pre button:focus {
opacity: 1;
}
</style>`
Insert cell
import { footer } from "@tomlarkworthy/footer"
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more