jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-15 08:02:56 -05:00
Code Issues Activity

shave off some JS bytes by using more modern clipboard logic

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-02 09:00:50 -04:00
parent 2f56906cb8
commit 991f3db820
3 changed files with 78 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
assets/js/src/clipboard.js
View File

@@ -1,42 +1,35 @@
import ClipboardJS from "clipboard";
import copy from "clipboard-copy";
import trimNewlines from "trim-newlines";
// the default text of the copy button:
const defaultTerm = "Copy";
const successTerm = "Copied!";
const defaultText = "Copy";
const successText = "Copied!";
// immediately give up if not supported or if there are no code blocks
if (ClipboardJS.isSupported() && document.querySelector("div.highlight")) {
// loop through each code fence on page (if any)
document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
const wrapperDiv = document.createElement("div");
wrapperDiv.className = "highlight-clipboard-enabled";
// loop through each code fence on page (if any)
document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
// bind a new button to the copy action
const button = document.createElement("button");
button.className = "copy-button";
button.textContent = defaultText;
button.addEventListener("click", () => {
// prevent unintentional double-clicks by unfocusing button
button.blur();
const button = document.createElement("button");
button.className = "copy-button";
button.textContent = defaultTerm;
// actual code element will have class "language-*", even if plaintext
if (copy(trimNewlines(highlightDiv.querySelector('code[class^="language-"]').textContent))) {
// show a subtle indication of success
button.textContent = successText;
// insert button as a sibling to Hugo's code fence
highlightDiv.before(wrapperDiv);
wrapperDiv.prepend(button);
wrapperDiv.append(highlightDiv);
// reset button to original text after 2 seconds
setTimeout(() => {
button.textContent = defaultText;
}, 2000);
}
});
// now that all the buttons are in place, bind them to the copy action
new ClipboardJS("button.copy-button", {
text: (trigger) =>
// actual code element will have class "language-*", even if plaintext
trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').textContent),
}).on("success", (e) => {
// show a subtle indication of success
e.trigger.textContent = successTerm;
// reset button to original text after 2 seconds
setTimeout(() => {
e.trigger.textContent = defaultTerm;
}, 2000);
// text needed to be auto-selected to copy, unselect immediately
e.clearSelection();
});
}
// add Hugo's code block to a new wrapper element, and insert the copy button as a sibling to it
const wrapperDiv = document.createElement("div");
wrapperDiv.className = "highlight-clipboard-enabled";
highlightDiv.before(wrapperDiv);
wrapperDiv.append(highlightDiv, button);
});