docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add code copy feature (#15910) 

Signed-off-by: David Karlsson <david.karlsson@docker.com>
This commit is contained in:
David Karlsson 2022-10-19 14:29:26 +02:00 committed by GitHub
parent 75ea0f0bd4
commit 24158cc3c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/head.html
View File

@ -68,6 +68,7 @@
<script defer src="/assets/jquery/jquery.js"></script>
<script defer src="/assets/bootstrap/js/bootstrap.min.js"></script>
<script defer src="/assets/js/docs.js"></script>
<script defer src="/assets/js/copy.js"></script>
{%- endif -%}
{%- if site.local_search -%}
<script defer src="/assets/js/search.js"></script>

9
_scss/_content.scss
View File

@ -46,6 +46,15 @@ code {
.highlighter-rouge {
margin: 15px 0;
position: relative;
button.copy {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
}
}
/*

29
assets/js/copy.js Normal file
View File

@ -0,0 +1,29 @@
// copy code icon markup
const copyIcon = `<svg aria-hidden="true" data-testid="geist-icon" fill="none" height="18" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="18" style="color: currentcolor;"><path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"></path></svg>`
// insert copy buttons for code blocks
const codeBlocks = document.querySelectorAll("div.highlighter-rouge")
codeBlocks.forEach((codeBlock) => {
codeBlock.insertAdjacentHTML(
"afterbegin",
`<button class="copy" aria-label="Copy code to clipboard">${copyIcon}</button>`
)
})
// handler that saves the code block innerText to clipboard
function copyCodeBlock(event) {
const copyButton = event.currentTarget
const codeBlock = copyButton.parentElement.querySelector("pre.highlight code")
const code = codeBlock.innerText.trim()
window.navigator.clipboard.writeText(code)
// change the button text temporarily
copyButton.textContent = "Copied!"
setTimeout(() => copyButton.innerHTML = copyIcon, 3000)
}
// register event listeners for copy buttons
const copyButtons = document.querySelectorAll("button.copy")
copyButtons.forEach((btn) => {
btn.addEventListener("click", copyCodeBlock)
})