docs: add a copy code function (top/right copy icon) on doc examples (#22114)

This commit is contained in:
Martin Skou 2024-08-25 16:35:07 +02:00 committed by GitHub
parent 62c69e8a31
commit caa0c46484
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 0 deletions

View file

@ -623,6 +623,7 @@ code {
pre {
overflow: auto;
margin: 0;
position: relative;
}
.namespace {
opacity: 0.7;
@ -684,6 +685,16 @@ tr:nth-child(even) {
background-color: var(--table-background-color);
}
button.copy {
border: none;
background-color: transparent;
position: absolute;
font-size: 12px;
top: 5px;
right: 5px;
color: var(--ref-symbol-hover-color);
}
/* Medium screen and up */
@media (min-width: 768px) {
*::-webkit-scrollbar {

View file

@ -7,6 +7,7 @@
setupScrollSpy();
setupSearch();
setupCollapse();
setupCodeCopy();
})();
function setupScrollSpy() {
@ -300,3 +301,27 @@ function debounce(func, timeout) {
timer = setTimeout(next, timeout > 0 ? timeout : 300);
};
}
function setupCodeCopy() {
const pres = document.querySelectorAll('pre:not(.signature)');
pres.forEach((pre) => {
const tempDiv = document.createElement('button');
tempDiv.className = 'copy';
tempDiv.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(173,184,194,1)"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"></path></svg>';
tempDiv.addEventListener('click', (e) => {
const parent = e.target;
var code = tempDiv.parentElement.querySelector('code');
let i = Array.from(code.childNodes)
.map((r) => r.textContent)
.join('');
navigator.clipboard.writeText(i);
var tmp = tempDiv.innerHTML;
tempDiv.innerHTML = 'Copied';
window.setTimeout(function () {
tempDiv.innerHTML = tmp;
}, 1000);
});
pre.insertAdjacentElement('afterbegin', tempDiv);
});
}