bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2026-09-22 08:44:55 -05:00
Code Issues Projects Releases Wiki Activity

js: Define function for copy to clipboard and provide it in onClick

Browse Source 
Instead of looping through all the code blocks at onload, just put an
onClick tag in the HTML template, which calls a global function.

This also improves the semantics since we aren't abusing href to be
javascript.

Also improves the writeText function call, since that method actually
returns a Promise which we should be waiting on. It technically worked
before because Promise starts executing instantly in JS, without being
awaited.
This commit is contained in:
bbaovanc
2026-09-18 14:21:47 -05:00
parent a2a8e2c205
commit b67e3f4671
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/bobatheme.js
+18 -21
View File
@@ -1,25 +1,22 @@
// code block copy to clipboard
window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button");
async function copy_to_clipboard(button) {
const codeBlock = button.parentElement.parentElement;
// lang will not be unset because we default it to text
// clone it so it doesn't change the actual DOM element
const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
// bashsession: remove command output lines
codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
// bashsession: remove prompt symbol
codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
const rawCode = codeElem.innerText;
// lang will not be unset because we default it to textoriginalCopyText
// clone it so it doesn't change the actual DOM element
const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
// bashsession: remove command output lines
codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
// bashsession: remove prompt symbol
codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
const rawCode = codeElem.innerText;
const originalCopyText = button.innerHTML;
button.onclick = event => {
navigator.clipboard.writeText(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!";
setTimeout(() => {
event.target.innerHTML = originalCopyText;
}, 3000);
}
});
await navigator.clipboard.writeText(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something
const originalCopyText = button.innerHTML;
button.innerHTML = "Copied!";
setTimeout(() => {
button.innerHTML = originalCopyText;
}, 3000);
}