silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix copy code button position (#1348) 

Fix issue #1303 by adding a code wrapper outside the code block. 
Ref:
https://stackoverflow.com/questions/60771472/position-a-button-such-that-it-wont-scroll-with-contents
This commit is contained in:
Yifan Jiang 2023-04-25 15:37:09 +01:00 committed by GitHub
parent 9ef19fa52a
commit 6e38b1b8aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_sass/_base.scss
View File

@ -826,31 +826,23 @@ progress::-moz-progress-bar {
height: inherit; height: inherit;
} }
pre { /* Copy button */
padding: 8px 12px; .code-display-wrapper {
position: relative; position: relative;
/* Copy code to clipboard button */
.copy { .copy {
background: var(--global-card-bg-color); background: var(--global-card-bg-color);
border-color: var(--global-bg-color); border-color: var(--global-bg-color);
border-radius: .3rem; border-radius: .3rem;
border-style: solid; border-style: none;
color: var(--global-text-color); color: var(--global-text-color);
font-size: medium; font-size: medium;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: .25rem; right: .15rem;
top: .25rem; top: .15rem;
&:active,
&:focus,
&:hover {
color: var(--global-hover-color);
opacity: 1;
}
} }
&:active .copy, &:active .copy,
&:focus .copy, &:focus .copy,
&:hover .copy { &:hover .copy {

12
assets/js/copy_code.js
View File

@ -2,13 +2,13 @@
var codeBlocks = document.querySelectorAll('pre'); var codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach(function (codeBlock) { codeBlocks.forEach(function (codeBlock) {
if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) { if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
// create copy button
var copyButton = document.createElement('button'); var copyButton = document.createElement('button');
copyButton.className = 'copy'; copyButton.className = 'copy';
copyButton.type = 'button'; copyButton.type = 'button';
copyButton.ariaLabel = 'Copy code to clipboard'; copyButton.ariaLabel = 'Copy code to clipboard';
copyButton.innerText = 'Copy'; copyButton.innerText = 'Copy';
copyButton.innerHTML = '<i class="fas fa-clipboard"></i>'; copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
codeBlock.append(copyButton);
// get code from code block and copy to clipboard // get code from code block and copy to clipboard
copyButton.addEventListener('click', function () { copyButton.addEventListener('click', function () {
@ -32,5 +32,15 @@ codeBlocks.forEach(function (codeBlock) {
copyButton.innerHTML = '<i class="fas fa-clipboard"></i>'; copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
}, waitFor); }, waitFor);
}); });
// create wrapper div
var wrapper = document.createElement('div');
wrapper.className = 'code-display-wrapper';
// add copy button and code block to wrapper div
const parent = codeBlock.parentElement;
parent.insertBefore(wrapper, codeBlock);
wrapper.append(codeBlock);
wrapper.append(copyButton);
} }
}); });