ItsDrike/itsdrike.com
1
0
Fork 0
mirror of https://github.com/ItsDrike/itsdrike.com.git synced 2024-09-19 17:59:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use navigator.clipboard instead of deprecated document.execCommand('copy')

Browse source
This commit is contained in:
ItsDrike 2022-07-25 01:06:13 +02:00
parent eb0b427a79
commit a8c8b5bc4f
No known key found for this signature in database
GPG key ID: B014E761034AF742
1 changed files with 19 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
static/src/js/code-copy.js
View file

@ -1,57 +1,35 @@
(() => { (() => {
"use strict"; "use strict";
if (!document.queryCommandSupported("copy")) {
return;
}
function flashCopyMessage(el, msg) { function flashCopyMessage(el, msg) {
el.textContent = msg; el.textContent = msg;
setTimeout(() => { setTimeout(() => { el.textContent = "Copy"; }, 1000);
el.textContent = "Copy";
}, 1000);
} }
function selectText(node) { function handleClick(containerEl, copyBtn) {
let selection = window.getSelection(); // Find the pre element containing the source code.
let range = document.createRange(); // If this is a regular codeblock, there should only be 1 pre element
if (node.childElementCount === 2) { // If this is a hugo highlight block with linenumers, there will be 2 elements,
// Skip the title. // where, the first will contain line numbers, and second will contain the code
range.selectNodeContents(node.children[1]); let preElements = containerEl.getElementsByTagName("pre");
} else { let preEl = preElements[preElements.length - 1]
// ignore linenumbers
let _ln = node.getElementsByClassName("chroma"); let codeEl = preEl.firstElementChild;
let _node = node.getElementsByTagName("pre")[1] let text = codeEl.textContent;
if (_ln.length >= 1) {
range.selectNodeContents(_node); navigator.clipboard.writeText(text)
} else { .then(() => { flashCopyMessage(copyBtn, "Copied!"); })
range.selectNodeContents(node); .catch((error) => {
} console && console.log(error);
} flashCopyMessage(copyBtn, "Failed :'(");
selection.removeAllRanges(); })
selection.addRange(range);
return selection;
} }
function addCopyButton(containerEl) { function addCopyButton(containerEl) {
let copyBtn = document.createElement("button"); let copyBtn = document.createElement("button");
copyBtn.className = "copy-button"; copyBtn.className = "copy-button";
copyBtn.textContent = "Copy"; copyBtn.textContent = "Copy";
copyBtn.addEventListener("click", () => handleClick(containerEl, copyBtn));
let codeEl = containerEl.firstElementChild;
copyBtn.addEventListener("click", () => {
try {
let selection = selectText(codeEl);
document.execCommand("copy");
selection.removeAllRanges();
flashCopyMessage(copyBtn, "Copied!");
} catch (e) {
console && console.log(e);
flashCopyMessage(copyBtn, "Failed :'(");
}
});
containerEl.appendChild(copyBtn); containerEl.appendChild(copyBtn);
} }