mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 13:24:05 -06:00
feat(clipboard): initial code copy to clipboard implemented
- Issue persists with tables that have linenos in table format.
This commit is contained in:
Geoffrey Garrett
parent
4514b00d81
commit
c6c03d55d2
46
assets/js/clipboard.js
Normal file
46
assets/js/clipboard.js
Normal file
@ -0,0 +1,46 @@
|
||||
const svgCopy =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
|
||||
const svgCheck =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
|
||||
|
||||
|
||||
const addCopyButtons = (clipboard) => {
|
||||
// 1. Look for pre > code elements in the DOM
|
||||
document.querySelectorAll("pre > code").forEach((codeBlock) => {
|
||||
// if buttom exists, skip
|
||||
if (codeBlock.parentElement.querySelector(".clipboard-button")) return;
|
||||
// 2. Create a button that will trigger a copy operation
|
||||
const button = document.createElement("button");
|
||||
button.className = "clipboard-button";
|
||||
button.type = "button";
|
||||
button.innerHTML = svgCopy;
|
||||
button.addEventListener("click", () => {
|
||||
clipboard.writeText(codeBlock.innerText).then(
|
||||
() => {
|
||||
button.blur();
|
||||
button.innerHTML = svgCheck;
|
||||
setTimeout(() => (button.innerHTML = svgCopy), 2000);
|
||||
},
|
||||
(error) => (button.innerHTML = "Error")
|
||||
);
|
||||
});
|
||||
// 3. Append the button directly before the pre tag
|
||||
const pre = codeBlock.parentNode;
|
||||
pre.parentNode.insertBefore(button, pre);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function initClipboard() {
|
||||
if (navigator && navigator.clipboard) {
|
||||
addCopyButtons(navigator.clipboard);
|
||||
} else {
|
||||
const script = document.createElement("script");
|
||||
script.src =
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js";
|
||||
script.integrity = "sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=";
|
||||
script.crossOrigin = "anonymous";
|
||||
script.onload = () => addCopyButtons(clipboard);
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
40
assets/styles/clipboard.scss
Normal file
40
assets/styles/clipboard.scss
Normal file
@ -0,0 +1,40 @@
|
||||
.clipboard-button {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
float: right;
|
||||
right: 0;
|
||||
padding: 0.7em;
|
||||
margin: 0.5em;
|
||||
color: var(--lightgray);
|
||||
border-color: var(--dark);
|
||||
background-color: var(--lightgray);
|
||||
filter: brightness(1.5);
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.clipboard-button > svg {
|
||||
fill: var(--dark);
|
||||
}
|
||||
.clipboard-button:hover {
|
||||
cursor: pointer;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--dark);
|
||||
}
|
||||
.clipboard-button:hover > svg {
|
||||
fill: var(--primary);
|
||||
}
|
||||
.clipboard-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.highlight {
|
||||
position: relative;
|
||||
}
|
||||
.highlight:hover > .clipboard-button {
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@ openToc: false
|
||||
enableLinkPreview: true
|
||||
enableLatex: true
|
||||
enableCodeBlockTitle: true
|
||||
enableSPA: true
|
||||
enableClipboard: true
|
||||
enableSPA: false
|
||||
enableFooter: true
|
||||
enableContextualBacklinks: true
|
||||
enableRecentNotes: false
|
||||
|
||||
@ -54,6 +54,13 @@
|
||||
<script src="{{$codeTitle.Permalink}}"></script>
|
||||
{{end}}
|
||||
|
||||
{{ if $.Site.Data.config.enableClipboard }}
|
||||
{{ $clipboard := resources.Get "js/clipboard.js" | resources.Fingerprint "md5" | resources.Minify }}
|
||||
{{ if (findRE "<pre" .Content 1) }}
|
||||
<script src="{{$clipboard.Permalink}}"></script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Preload page vars -->
|
||||
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
|
||||
"md5" | resources.Minify | }} {{$contentIndex := resources.Get
|
||||
@ -84,6 +91,9 @@
|
||||
const pathWindow = window.location.pathname;
|
||||
const isHome = pathBase == pathWindow;
|
||||
|
||||
{{if $.Site.Data.config.enableClipboard -}}
|
||||
initClipboard();
|
||||
{{ end }}
|
||||
{{if $.Site.Data.config.enableSPA -}}
|
||||
addTitleToCodeBlocks();
|
||||
{{ end }}
|
||||
@ -117,6 +127,13 @@
|
||||
|
||||
const init = (doc = document) => {
|
||||
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
|
||||
{{if $.Site.Data.config.enableClipboard -}}
|
||||
{{if $.Site.Data.config.enableSPA -}}
|
||||
initClipboard();
|
||||
{{ else }}
|
||||
window.addEventListener("DOMContentLoaded", initClipboard);
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{if $.Site.Data.config.enableCodeBlockTitle -}}
|
||||
{{if $.Site.Data.config.enableSPA -}}
|
||||
addTitleToCodeBlocks();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user