87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
|
// Copy Button for Code Blocks
|
||
|
|
|
||
|
|
// References
|
||
|
|
// 1. https://tomspencer.dev/blog/2018/09/14/adding-click-to-copy-buttons-to-a-hugo-powered-blog/
|
||
|
|
// 2. https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
|
||
|
|
|
||
|
|
window.addEventListener("DOMContentLoaded", event => {
|
||
|
|
const copyText = '{{ i18n "copy" }}';
|
||
|
|
const copiedText = '{{ i18n "copied" }}';
|
||
|
|
var $cdnCustomized = '{{ .Site.Params.cdnCustomized }}';
|
||
|
|
var $defaultCDN = 'https://cdn.jsdelivr.net';
|
||
|
|
|
||
|
|
|
||
|
|
document.querySelectorAll('.post-body > pre').forEach((e) => {
|
||
|
|
let div = document.createElement('div');
|
||
|
|
e.parentNode.replaceChild(div, e);
|
||
|
|
div.appendChild(e);
|
||
|
|
});
|
||
|
|
|
||
|
|
function addCopyButtons(clipboard) {
|
||
|
|
const divs = document.querySelectorAll('table.lntable, .highlight > pre, .post-body > div > pre');
|
||
|
|
|
||
|
|
divs.forEach((containerEl) => {
|
||
|
|
containerEl.parentNode.style.position = 'relative';
|
||
|
|
|
||
|
|
const button = document.createElement('button');
|
||
|
|
button.className = 'copy-button';
|
||
|
|
button.type = 'button';
|
||
|
|
button.innerText = copyText;
|
||
|
|
|
||
|
|
if (containerEl.classList.contains('lntable')) {
|
||
|
|
var codeBlock = containerEl.querySelectorAll('.lntd')[1];
|
||
|
|
} else {
|
||
|
|
var codeBlock = containerEl.querySelector('code');
|
||
|
|
}
|
||
|
|
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
clipboard.writeText(codeBlock.innerText).then(() => {
|
||
|
|
/* Chrome doesn't seem to blur automatically,
|
||
|
|
leaving the button in a focused state. */
|
||
|
|
button.blur();
|
||
|
|
|
||
|
|
button.innerText = copiedText;
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
button.innerText = copyText;
|
||
|
|
}, 1000);
|
||
|
|
}).catch((error) => {
|
||
|
|
button.innerText = 'Error';
|
||
|
|
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
containerEl.appendChild(button);
|
||
|
|
|
||
|
|
{{ if .Site.Params.enableCopyAutoHide }}
|
||
|
|
containerEl.parentNode.addEventListener('mouseover', () => {
|
||
|
|
button.style = 'visibility: visible; opacity: 1';
|
||
|
|
});
|
||
|
|
|
||
|
|
containerEl.parentNode.addEventListener('mouseout', () => {
|
||
|
|
button.style = 'visibility: hidden; opacity: 0';
|
||
|
|
});
|
||
|
|
{{ end }}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (navigator && navigator.clipboard) {
|
||
|
|
addCopyButtons(navigator.clipboard);
|
||
|
|
} else {
|
||
|
|
const script = document.createElement('script');
|
||
|
|
if($cdnCustomized=null){
|
||
|
|
script.src = $defaultCDN + '/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js';
|
||
|
|
}else {
|
||
|
|
script.src = $cdnCustomized + '/npm/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.min.js';
|
||
|
|
}
|
||
|
|
|
||
|
|
script.defer = true;
|
||
|
|
script.onload = function() {
|
||
|
|
addCopyButtons(clipboard);
|
||
|
|
};
|
||
|
|
|
||
|
|
document.head.appendChild(script);
|
||
|
|
}
|
||
|
|
}, {once: true});
|