Add a copy button to all code samples

Author: tomasr8

python_docs_theme/static/copybutton.js

@@ -1,74 +1,54 @@
-// ``function*`` denotes a generator in JavaScript, see
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
-function* getHideableCopyButtonElements(rootElement) {
-    // yield all elements with the "go" (Generic.Output),
-    // "gp" (Generic.Prompt), or "gt" (Generic.Traceback) CSS class
-    for (const el of rootElement.querySelectorAll('.go, .gp, .gt')) {
-        yield el
-    }
-    // tracebacks (.gt) contain bare text elements that need to be
-    // wrapped in a span to hide or show the element
-    for (let el of rootElement.querySelectorAll('.gt')) {
-        while ((el = el.nextSibling) && el.nodeType !== Node.DOCUMENT_NODE) {
-            // stop wrapping text nodes when we hit the next output or
-            // prompt element
-            if (el.nodeType === Node.ELEMENT_NODE && el.matches(".gp, .go")) {
-                break
-            }
-            // if the node is a text node with content, wrap it in a
-            // span element so that we can control visibility
-            if (el.nodeType === Node.TEXT_NODE && el.textContent.trim()) {
-                const wrapper = document.createElement("span")
-                el.after(wrapper)
-                wrapper.appendChild(el)
-                el = wrapper
-            }
-            yield el
+// Extract copyable text from the code block ignoring the
+// prompts and output.
+function getCopyableText(rootElement) {
+    rootElement = rootElement.cloneNode(true)
+    // tracebacks (.gt) contain bare text elements that
+    // need to be removed
+    const tracebacks = rootElement.querySelectorAll(".gt")
+    for (const el of tracebacks) {
+        while (
+            el.nextSibling &&
+            (el.nextSibling.nodeType !== Node.DOCUMENT_NODE ||
+                !el.nextSibling.matches(".gp, .go"))
+        ) {
+            el.nextSibling.remove()
         }
     }
+    // Remove all elements with the "go" (Generic.Output),
+    // "gp" (Generic.Prompt), or "gt" (Generic.Traceback) CSS class
+    const elements = rootElement.querySelectorAll(".gp, .go, .gt")
+    for (const el of elements) {
+        el.remove()
+    }
+    return rootElement.innerText.trim()
 }
 
-
 const loadCopyButton = () => {
-    /* Add a [>>>] button in the top-right corner of code samples to hide
-     * the >>> and ... prompts and the output and thus make the code
-     * copyable. */
-    const hide_text = _("Hide the prompts and output")
-    const show_text = _("Show the prompts and output")
-
-    const button = document.createElement("span")
+    const button = document.createElement("button")
     button.classList.add("copybutton")
-    button.innerText = ">>>"
-    button.title = hide_text
-    button.dataset.hidden = "false"
+    button.type = "button"
+    button.innerText = _("Copy")
+    button.title = _("Copy to clipboard")
+
+    let timeout
     const buttonClick = event => {
         // define the behavior of the button when it's clicked
-        event.preventDefault()
+        clearTimeout(timeout)
         const buttonEl = event.currentTarget
         const codeEl = buttonEl.nextElementSibling
-        if (buttonEl.dataset.hidden === "false") {
-            // hide the code output
-            for (const el of getHideableCopyButtonElements(codeEl)) {
-                el.hidden = true
-            }
-            buttonEl.title = show_text
-            buttonEl.dataset.hidden = "true"
-        } else {
-            // show the code output
-            for (const el of getHideableCopyButtonElements(codeEl)) {
-                el.hidden = false
-            }
-            buttonEl.title = hide_text
-            buttonEl.dataset.hidden = "false"
-        }
+        navigator.clipboard.writeText(getCopyableText(codeEl))
+        buttonEl.innerText = _("Copied!")
+        timeout = setTimeout(() => {
+            buttonEl.innerText = _("Copy")
+        }, 1500)
     }
 
     const highlightedElements = document.querySelectorAll(
-        ".highlight-python .highlight,"
-        + ".highlight-python3 .highlight,"
-        + ".highlight-pycon .highlight,"
-        + ".highlight-pycon3 .highlight,"
-        + ".highlight-default .highlight"
+        ".highlight-python .highlight," +
+            ".highlight-python3 .highlight," +
+            ".highlight-pycon .highlight," +
+            ".highlight-pycon3 .highlight," +
+            ".highlight-default .highlight"
     )
 
     // create and add the button to all the code blocks that contain >>>
@@ -79,9 +59,7 @@ const loadCopyButton = () => {
         const clonedButton = button.cloneNode(true)
         // the onclick attribute is not cloned, set it on the new element
         clonedButton.onclick = buttonClick
-        if (el.querySelector(".gp") !== null) {
-            el.prepend(clonedButton)
-        }
+        el.prepend(clonedButton)
     })
 }
 

python_docs_theme/static/pydoctheme.css

@@ -442,17 +442,24 @@ div.genindex-jumpbox a {
     top: 0;
     right: 0;
     font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-    padding-left: 0.2em;
-    padding-right: 0.2em;
+    padding-left: 7px;
+    padding-right: 7px;
+    height: 100%;
+    max-height: min(100%, 32px);
     border-radius: 0 3px 0 0;
-    color: #ac9; /* follows div.body pre */
+    color: #000;
+    background-color: #fff;
     border-color: #ac9; /* follows div.body pre */
     border-style: solid; /* follows div.body pre */
     border-width: 1px; /* follows div.body pre */
 }
 
-.copybutton[data-hidden='true'] {
-    text-decoration: line-through;
+.copybutton:hover {
+    background-color: #eee;
+}
+
+.copybutton:active {
+    background-color: #ddd;
 }
 
 @media (max-width: 1023px) {

python_docs_theme/static/pydoctheme_dark.css

@@ -176,3 +176,16 @@ img.invert-in-dark-mode {
     --versionchanged: var(--middle-color);
     --deprecated: var(--bad-color);
 }
+
+.copybutton {
+    color: #ac9; /* follows div.body pre */
+    background-color: #222222;
+}
+
+.copybutton:hover {
+    background-color: #434343;
+}
+
+.copybutton:active {
+    background-color: #656565;
+}