Skip to content

Commit 9946a68

Browse files
GuillaumeGomezGuillaumeGomez
committed
Add copy code button
1 parent 52f3c71 commit 9946a68

File tree

2 files changed

+132
-40
lines changed

2 files changed

+132
-40
lines changed

‎src/librustdoc/html/static/css/rustdoc.css‎

Lines changed: 63 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,28 @@
1616
--src-sidebar-width: 300px;
1717
--desktop-sidebar-z-index: 100;
1818
--sidebar-elems-left-padding: 24px;
19+
/* clipboard <https://github.com/rust-lang/crates.io/commits/main/public/assets/copy.svg> */
20+
--clipboard-image: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 24 25" \
21+
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
22+
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
23+
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
24+
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
25+
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
26+
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
27+
</svg>');
28+
--clipboard-image-big: url('data:image/svg+xml,<svg width="22" height="23" viewBox="0 0 24 25" \
29+
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
30+
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
31+
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
32+
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
33+
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
34+
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
35+
</svg>');
36+
/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
37+
--checkmark-image: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" \
38+
xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
39+
<g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"></path>\
40+
</g></svg>');
1941
}
2042

2143
/* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -1423,25 +1445,59 @@ documentation. */
14231445
top: 20px;
14241446
}
14251447

1426-
a.test-arrow {
1448+
.example-wrap > a.test-arrow, .example-wrap .button-holder {
14271449
visibility: hidden;
14281450
position: absolute;
1429-
padding: 5px 10px 5px 10px;
1430-
border-radius: 5px;
1431-
font-size: 1.375rem;
14321451
top: 5px;
14331452
right: 5px;
14341453
z-index: 1;
1454+
}
1455+
a.test-arrow {
1456+
padding: 5px 10px 5px 10px;
1457+
border-radius: 5px;
1458+
font-size: 1.375rem;
14351459
color: var(--test-arrow-color);
14361460
background-color: var(--test-arrow-background-color);
14371461
}
14381462
a.test-arrow:hover {
14391463
color: var(--test-arrow-hover-color);
14401464
background-color: var(--test-arrow-hover-background-color);
14411465
}
1442-
.example-wrap:hover .test-arrow {
1466+
.example-wrap .button-holder {
1467+
display: flex;
1468+
}
1469+
.example-wrap:hover > .test-arrow {
1470+
padding: 3px 10px;
1471+
}
1472+
.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder {
14431473
visibility: visible;
14441474
}
1475+
.example-wrap .button-holder .copy-button {
1476+
color: var(--copy-path-button-color);
1477+
background: var(--main-background-color);
1478+
height: 43px;
1479+
width: 40px;
1480+
margin-left: 5px;
1481+
padding: 2px 0 0 4px;
1482+
border: 0;
1483+
cursor: pointer;
1484+
border-radius: 5px;
1485+
}
1486+
.example-wrap .button-holder .copy-button.clicked {
1487+
padding-top: 4px;
1488+
}
1489+
.example-wrap .button-holder .copy-button::before {
1490+
filter: var(--copy-path-img-filter);
1491+
content: var(--clipboard-image-big);
1492+
width: 23px;
1493+
height: 22px;
1494+
}
1495+
.example-wrap .button-holder .copy-button:hover::before {
1496+
filter: var(--copy-path-img-hover-filter);
1497+
}
1498+
.example-wrap .button-holder .copy-button.clicked::before {
1499+
content: var(--checkmark-image);
1500+
}
14451501

14461502
.code-attribute {
14471503
font-weight: 300;
@@ -1699,27 +1755,15 @@ a.tooltip:hover::after {
16991755
}
17001756
#copy-path::before {
17011757
filter: var(--copy-path-img-filter);
1702-
/* clipboard <https://github.com/rust-lang/crates.io/commits/main/public/assets/copy.svg> */
1703-
content: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 24 25" \
1704-
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
1705-
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
1706-
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
1707-
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
1708-
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
1709-
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
1710-
</svg>');
1758+
content: var(--clipboard-image);
17111759
width: 19px;
17121760
height: 18px;
17131761
}
17141762
#copy-path:hover::before {
17151763
filter: var(--copy-path-img-hover-filter);
17161764
}
17171765
#copy-path.clicked::before {
1718-
/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
1719-
content: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" xmlns="http://www.w3.org/2000/svg" \
1720-
fill="black" height="18px">\
1721-
<g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"></path>\
1722-
</g></svg>');
1766+
content: var(--checkmark-image);
17231767
}
17241768

17251769
@keyframes rotating {

‎src/librustdoc/html/static/js/main.js‎

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1769,9 +1769,37 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
17691769
}());
17701770

17711771
// This section handles the copy button that appears next to the path breadcrumbs
1772+
// and the copy buttons on the code examples.
17721773
(function() {
1773-
let reset_button_timeout = null;
1774+
// Common functions to copy buttons.
1775+
function copyContentToClipboard(content) {
1776+
const el = document.createElement("textarea");
1777+
el.value = content;
1778+
el.setAttribute("readonly", "");
1779+
// To not make it appear on the screen.
1780+
el.style.position = "absolute";
1781+
el.style.left = "-9999px";
17741782

1783+
document.body.appendChild(el);
1784+
el.select();
1785+
document.execCommand("copy");
1786+
document.body.removeChild(el);
1787+
}
1788+
1789+
function copyButtonAnimation(button) {
1790+
button.classList.add("clicked");
1791+
1792+
if (button.reset_button_timeout !== undefined) {
1793+
window.clearTimeout(button.reset_button_timeout);
1794+
}
1795+
1796+
button.reset_button_timeout = window.setTimeout(() => {
1797+
button.reset_button_timeout = undefined;
1798+
button.classList.remove("clicked");
1799+
}, 1000);
1800+
}
1801+
1802+
// Copy button that appears next to the path breadcrumbs.
17751803
const but = document.getElementById("copy-path");
17761804
if (!but) {
17771805
return;
@@ -1786,29 +1814,49 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
17861814
}
17871815
});
17881816

1789-
const el = document.createElement("textarea");
1790-
el.value = path.join("::");
1791-
el.setAttribute("readonly", "");
1792-
// To not make it appear on the screen.
1793-
el.style.position = "absolute";
1794-
el.style.left = "-9999px";
1795-
1796-
document.body.appendChild(el);
1797-
el.select();
1798-
document.execCommand("copy");
1799-
document.body.removeChild(el);
1800-
1801-
but.classList.add("clicked");
1817+
copyContentToClipboard(path.join("::"));
1818+
copyButtonAnimation(but);
1819+
};
18021820

1803-
if (reset_button_timeout !== null) {
1804-
window.clearTimeout(reset_button_timeout);
1821+
// Copy buttons on code examples.
1822+
function copyCode(codeElem) {
1823+
if (!codeElem) {
1824+
// Should never happen, but the world is a dark and dangerous place.
1825+
return;
18051826
}
1827+
copyContentToClipboard(codeElem.textContent);
1828+
}
18061829

1807-
function reset_button() {
1808-
reset_button_timeout = null;
1809-
but.classList.remove("clicked");
1830+
function addCopyButton(event) {
1831+
let elem = event.target;
1832+
while (!hasClass(elem, "example-wrap")) {
1833+
elem = elem.parentElement;
1834+
if (elem.tagName === "body" || hasClass(elem, "docblock")) {
1835+
return;
1836+
}
1837+
}
1838+
// Since the button will be added, no need to keep this listener around.
1839+
elem.removeEventListener("mouseover", addCopyButton);
1840+
1841+
const parent = document.createElement("div");
1842+
parent.className = "button-holder";
1843+
const runButton = elem.querySelector(".test-arrow");
1844+
if (runButton !== null) {
1845+
// If there is a run button, we move it into the same div.
1846+
parent.appendChild(runButton);
18101847
}
1848+
elem.appendChild(parent);
1849+
const copyButton = document.createElement("button");
1850+
copyButton.className = "copy-button";
1851+
copyButton.title = "Copy code to clipboard";
1852+
copyButton.addEventListener("click", () => {
1853+
copyCode(elem.querySelector("pre > code"));
1854+
copyButtonAnimation(copyButton);
1855+
});
1856+
parent.appendChild(copyButton);
1857+
}
18111858

1812-
reset_button_timeout = window.setTimeout(reset_button, 1000);
1813-
};
1859+
onEachLazy(document.querySelectorAll(".docblock .example-wrap"), elem => {
1860+
elem.addEventListener("mouseover", addCopyButton);
1861+
});
18141862
}());

0 commit comments

Comments
 (0)