From 9946a68275dc37ef1c7d1727a7876d65646bee44 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Wed, 29 May 2024 23:40:58 +0200 Subject: [PATCH] Add copy code button --- src/librustdoc/html/static/css/rustdoc.css | 82 +++++++++++++++----- src/librustdoc/html/static/js/main.js | 90 +++++++++++++++++----- 2 files changed, 132 insertions(+), 40 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index cb8b82e8bde0a..aabbd21d70261 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -16,6 +16,28 @@ --src-sidebar-width: 300px; --desktop-sidebar-z-index: 100; --sidebar-elems-left-padding: 24px; + /* clipboard */ + --clipboard-image: url('data:image/svg+xml,\ +\ +\ +'); + --clipboard-image-big: url('data:image/svg+xml,\ +\ +\ +'); + /* Checkmark */ + --checkmark-image: url('data:image/svg+xml,\ +\ +'); } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -1423,15 +1445,17 @@ documentation. */ top: 20px; } -a.test-arrow { +.example-wrap > a.test-arrow, .example-wrap .button-holder { visibility: hidden; position: absolute; - padding: 5px 10px 5px 10px; - border-radius: 5px; - font-size: 1.375rem; top: 5px; right: 5px; z-index: 1; +} +a.test-arrow { + padding: 5px 10px 5px 10px; + border-radius: 5px; + font-size: 1.375rem; color: var(--test-arrow-color); background-color: var(--test-arrow-background-color); } @@ -1439,9 +1463,41 @@ a.test-arrow:hover { color: var(--test-arrow-hover-color); background-color: var(--test-arrow-hover-background-color); } -.example-wrap:hover .test-arrow { +.example-wrap .button-holder { + display: flex; +} +.example-wrap:hover > .test-arrow { + padding: 3px 10px; +} +.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder { visibility: visible; } +.example-wrap .button-holder .copy-button { + color: var(--copy-path-button-color); + background: var(--main-background-color); + height: 43px; + width: 40px; + margin-left: 5px; + padding: 2px 0 0 4px; + border: 0; + cursor: pointer; + border-radius: 5px; +} +.example-wrap .button-holder .copy-button.clicked { + padding-top: 4px; +} +.example-wrap .button-holder .copy-button::before { + filter: var(--copy-path-img-filter); + content: var(--clipboard-image-big); + width: 23px; + height: 22px; +} +.example-wrap .button-holder .copy-button:hover::before { + filter: var(--copy-path-img-hover-filter); +} +.example-wrap .button-holder .copy-button.clicked::before { + content: var(--checkmark-image); +} .code-attribute { font-weight: 300; @@ -1699,15 +1755,7 @@ a.tooltip:hover::after { } #copy-path::before { filter: var(--copy-path-img-filter); - /* clipboard */ - content: url('data:image/svg+xml,\ -\ -\ -'); + content: var(--clipboard-image); width: 19px; height: 18px; } @@ -1715,11 +1763,7 @@ xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\ filter: var(--copy-path-img-hover-filter); } #copy-path.clicked::before { - /* Checkmark */ - content: url('data:image/svg+xml,\ - \ - '); + content: var(--checkmark-image); } @keyframes rotating { diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 64c356607788c..c2c1c5dd8047b 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1769,9 +1769,37 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm }()); // This section handles the copy button that appears next to the path breadcrumbs +// and the copy buttons on the code examples. (function() { - let reset_button_timeout = null; + // Common functions to copy buttons. + function copyContentToClipboard(content) { + const el = document.createElement("textarea"); + el.value = content; + el.setAttribute("readonly", ""); + // To not make it appear on the screen. + el.style.position = "absolute"; + el.style.left = "-9999px"; + document.body.appendChild(el); + el.select(); + document.execCommand("copy"); + document.body.removeChild(el); + } + + function copyButtonAnimation(button) { + button.classList.add("clicked"); + + if (button.reset_button_timeout !== undefined) { + window.clearTimeout(button.reset_button_timeout); + } + + button.reset_button_timeout = window.setTimeout(() => { + button.reset_button_timeout = undefined; + button.classList.remove("clicked"); + }, 1000); + } + + // Copy button that appears next to the path breadcrumbs. const but = document.getElementById("copy-path"); if (!but) { return; @@ -1786,29 +1814,49 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm } }); - const el = document.createElement("textarea"); - el.value = path.join("::"); - el.setAttribute("readonly", ""); - // To not make it appear on the screen. - el.style.position = "absolute"; - el.style.left = "-9999px"; - - document.body.appendChild(el); - el.select(); - document.execCommand("copy"); - document.body.removeChild(el); - - but.classList.add("clicked"); + copyContentToClipboard(path.join("::")); + copyButtonAnimation(but); + }; - if (reset_button_timeout !== null) { - window.clearTimeout(reset_button_timeout); + // Copy buttons on code examples. + function copyCode(codeElem) { + if (!codeElem) { + // Should never happen, but the world is a dark and dangerous place. + return; } + copyContentToClipboard(codeElem.textContent); + } - function reset_button() { - reset_button_timeout = null; - but.classList.remove("clicked"); + function addCopyButton(event) { + let elem = event.target; + while (!hasClass(elem, "example-wrap")) { + elem = elem.parentElement; + if (elem.tagName === "body" || hasClass(elem, "docblock")) { + return; + } + } + // Since the button will be added, no need to keep this listener around. + elem.removeEventListener("mouseover", addCopyButton); + + const parent = document.createElement("div"); + parent.className = "button-holder"; + const runButton = elem.querySelector(".test-arrow"); + if (runButton !== null) { + // If there is a run button, we move it into the same div. + parent.appendChild(runButton); } + elem.appendChild(parent); + const copyButton = document.createElement("button"); + copyButton.className = "copy-button"; + copyButton.title = "Copy code to clipboard"; + copyButton.addEventListener("click", () => { + copyCode(elem.querySelector("pre > code")); + copyButtonAnimation(copyButton); + }); + parent.appendChild(copyButton); + } - reset_button_timeout = window.setTimeout(reset_button, 1000); - }; + onEachLazy(document.querySelectorAll(".docblock .example-wrap"), elem => { + elem.addEventListener("mouseover", addCopyButton); + }); }());