added the click to copy button for code blocks #38
Conversation
There was a problem hiding this comment.
Thanks @tarunsinghofficial. This is a good start, but let's try to reduce the amount of code we're shipping in the script. This template would run on every page, regardless of if there's a code block or not. I think we can avoid a lot of that work by moving the initial setup to happen at build time (that is everything that's outside of the click event listener).
In 11ty this can be done using a Transform: https://www.11ty.dev/docs/transforms/
I am also not against moving the click event listener code into a separate JS file, so that can be cached locally by the client.
If you need a hand with either of these things, please do let me know & I'll set aside some time for it.
|
Hi @fershad, Thank you for your feedback and suggestions regarding the code optimization. I'm keen to implement the changes you've suggested, but I wanted to confirm the next steps with you. Would you prefer if I move the complete event listener into a separate file, or should I focus on integrating 11ty using Transform as you mentioned? Your guidance on this would be greatly appreciated. |
|
It'd be both @tarunsinghofficial. I've left comments in the changed file for you |
| const codeBlocks = document.querySelectorAll('code[class*="language-"]'); | ||
| codeBlocks.forEach(function (block) { | ||
| const pre = block.parentNode; | ||
| const copyButton = document.createElement('button'); | ||
| const svgIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5C10.8954 3.5 10 4.39543 10 5.5H14C14 4.39543 13.1046 3.5 12 3.5ZM8.53513 3.5C9.22675 2.3044 10.5194 1.5 12 1.5C13.4806 1.5 14.7733 2.3044 15.4649 3.5H17.25C18.9069 3.5 20.25 4.84315 20.25 6.5V18.5C20.25 20.1569 19.1569 21.5 17.25 21.5H6.75C5.09315 21.5 3.75 20.1569 3.75 18.5V6.5C3.75 4.84315 5.09315 3.5 6.75 3.5H8.53513ZM8 5.5H6.75C6.19772 5.5 5.75 5.94772 5.75 6.5V18.5C5.75 19.0523 6.19772 19.5 6.75 19.5H17.25C18.0523 19.5 18.25 19.0523 18.25 18.5V6.5C18.25 5.94772 17.8023 5.5 17.25 5.5H16C16 6.60457 15.1046 7.5 14 7.5H10C8.89543 7.5 8 6.60457 8 5.5Z" fill="currentColor"></path> | ||
| </svg>` | ||
| copyButton.innerHTML = svgIcon; | ||
| copyButton.classList.add('copy-button'); | ||
| pre.appendChild(copyButton); | ||
| pre.style.position = 'relative'; | ||
| copyButton.style.position = 'absolute'; | ||
| copyButton.style.right = '0'; | ||
| copyButton.style.top = '0'; | ||
| copyButton.style.zIndex = '1'; | ||
| copyButton.style.border = 'none'; | ||
| copyButton.style.padding = '5px'; | ||
| copyButton.style.cursor = 'pointer'; | ||
| copyButton.style.fontSize = '14px'; |
There was a problem hiding this comment.
This code could be move to an 11ty Transform that's run once when the site builds.
| copyButton.addEventListener('click', function () { | ||
| const contentToCopy = block.innerText; | ||
| const tempTextarea = document.createElement('textarea'); | ||
| tempTextarea.value = contentToCopy; | ||
| document.body.appendChild(tempTextarea); | ||
| tempTextarea.select(); | ||
| document.execCommand('copy'); | ||
| document.body.removeChild(tempTextarea); | ||
| const copiedIcon = `<svg width="24px" height="24px" viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M5.5 12.5L10.167 17L19.5 8" stroke="#B4B4B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> | ||
| fill="#B4B4B8"/> | ||
| </svg>`; | ||
| copyButton.innerHTML = copiedIcon; | ||
| setTimeout(function () { | ||
| copyButton.innerHTML = svgIcon; | ||
| }, 2000); | ||
| }); |
There was a problem hiding this comment.
This code could be moved to a separate JS file and loaded with the defer attribute (or type="module").
Changes Made:
I have added the feature as discussed in the issue tracker. When the user sees any code blocks on the developer documentation site, he/she will now be able to copy the whole code with a single click.
Screenshot:
This resolves issue #36 .