bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2025-06-12 09:47:29 -05:00
Code Issues Projects Releases Wiki Activity

Add copy to clipboard to code blocks

Browse Source
This commit is contained in:
BBaoVanC
2023-01-20 17:14:18 -06:00
parent a26ea62b60
commit 47d6d02186
7 changed files with 58 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/bobastyle.css
View File

@ -689,12 +689,23 @@ table.markdown {
background-color: var(--background-1);
border-radius: 8px;
}
.code-block > .code-type {
.code-block > .code-header {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: var(--background-2);
padding: 4px 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.code-block > .code-header > .code-type {
border-top-left-radius: 8px;
font-family: monospace;
margin: auto 0;
}
/* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button:hover {
cursor: pointer;
}
.code-block > .highlight {
margin: 8px 4px;

8
assets/js/back-to-top.js
View File

@ -1,8 +0,0 @@
const backToTop = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
}

30
assets/js/bobatheme.js Normal file
View File

@ -0,0 +1,30 @@
// back to top
const backToTop = document.getElementById("back-to-top");
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
}
// code block copy to clipboard
window.onload = () => {
document.querySelectorAll(".code-block").forEach(codeBlock => {
const button = codeBlock.querySelector(".code-header > .code-copy-button");
// TODO: maybe get this from HTMLElement.innerText on the actual code block content element
// but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
const originalCopyText = button.innerHTML;
button.onclick = event => {
navigator.clipboard.writeText(rawCode);
console.log(rawCode);
// TODO: maybe we could add a fancier indicator, like a flash or something
event.target.innerHTML = "Copied!";
setTimeout(() => {
event.target.innerHTML = originalCopyText;
}, 3000);
}
});
}