Drop jQuery in copybutton.js

Author: AA-Turner

python_docs_theme/static/copybutton.js

@@ -1,64 +1,70 @@
-$(document).ready(function() {
+
+const loadCopyButton = () => {
     /* Add a [>>>] button on the top-right corner of code samples to hide
      * the >>> and ... prompts and the output and thus make the code
      * copyable. */
-    var div = $('.highlight-python .highlight,' +
-                '.highlight-python3 .highlight,' +
-                '.highlight-pycon .highlight,' +
-                '.highlight-pycon3 .highlight,' +
-                '.highlight-default .highlight');
-    var pre = div.find('pre');
+    const hide_text = "Hide the prompts and output"
+    const show_text = "Show the prompts and output"
 
-    // get the styles from the current theme
-    pre.parent().parent().css('position', 'relative');
-    var hide_text = 'Hide the prompts and output';
-    var show_text = 'Show the prompts and output';
-    var border_width = pre.css('border-top-width');
-    var border_style = pre.css('border-top-style');
-    var border_color = pre.css('border-top-color');
-    var button_styles = {
-        'cursor':'pointer', 'position': 'absolute', 'top': '0', 'right': '0',
-        'border-color': border_color, 'border-style': border_style,
-        'border-width': border_width, 'color': border_color, 'text-size': '75%',
-        'font-family': 'monospace', 'padding-left': '0.2em', 'padding-right': '0.2em',
-        'border-radius': '0 3px 0 0'
+    const button = document.createElement("span")
+    button.classList.add("copybutton")
+    button.innerText = ">>>"
+    button.title = hide_text
+    button.dataset.hidden = "false"
+    const buttonClick = event => {
+        // define the behavior of the button when it's clicked
+        event.preventDefault()
+        const buttonEl = event.currentTarget
+        const codeEl = buttonEl.nextElementSibling
+        if (buttonEl.dataset.hidden === "false") {
+            // hide the code output
+            codeEl.querySelectorAll('.go, .gp, .gt').forEach(el => el.hidden = true)
+            codeEl.querySelectorAll('.gt').forEach(el => {
+                while ((el = el.nextSibling) && el.nodeType !== Node.DOCUMENT_NODE) {
+                    if (el.nodeType === Node.ELEMENT_NODE && el.matches(".gp, .go")) break;
+                    if (el.nodeType === Node.TEXT_NODE && el.textContent.trim()) {
+                        const wrapper = document.createElement('span');
+                        el.after(wrapper);
+                        wrapper.appendChild(el);
+                        el = wrapper
+                    }
+                    el.hidden = true
+                }
+            })
+            buttonEl.title = show_text
+            buttonEl.dataset.hidden = "true"
+        } else {
+            // show the code output
+            codeEl.childNodes.forEach(el => el.hidden = false)
+            buttonEl.title = hide_text
+            buttonEl.dataset.hidden = "false"
+        }
     }
 
+    const highlightedElements = document.querySelectorAll(
+        ".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 >>>
-    div.each(function(index) {
-        var jthis = $(this);
-        if (jthis.find('.gp').length > 0) {
-            var button = $('<span class="copybutton">&gt;&gt;&gt;</span>');
-            button.css(button_styles)
-            button.attr('title', hide_text);
-            button.data('hidden', 'false');
-            jthis.prepend(button);
-        }
-        // tracebacks (.gt) contain bare text elements that need to be
-        // wrapped in a span to work with .nextUntil() (see later)
-        jthis.find('pre:has(.gt)').contents().filter(function() {
-            return ((this.nodeType == 3) && (this.data.trim().length > 0));
-        }).wrap('<span>');
-    });
+    highlightedElements.forEach(el => {
+        el.style.position = "relative"
 
-    // define the behavior of the button when it's clicked
-    $('.copybutton').click(function(e){
-        e.preventDefault();
-        var button = $(this);
-        if (button.data('hidden') === 'false') {
-            // hide the code output
-            button.parent().find('.go, .gp, .gt').hide();
-            button.next('pre').find('.gt').nextUntil('.gp, .go').css('visibility', 'hidden');
-            button.css('text-decoration', 'line-through');
-            button.attr('title', show_text);
-            button.data('hidden', 'true');
-        } else {
-            // show the code output
-            button.parent().find('.go, .gp, .gt').show();
-            button.next('pre').find('.gt').nextUntil('.gp, .go').css('visibility', 'visible');
-            button.css('text-decoration', 'none');
-            button.attr('title', hide_text);
-            button.data('hidden', 'false');
+        // if we find a console prompt (.gp), prepend the (deeply cloned) button
+        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)
         }
-    });
-});
+    })
+}
+
+if (document.readyState !== "loading") {
+    loadCopyButton()
+} else {
+    document.addEventListener("DOMContentLoaded", loadCopyButton)
+}

python_docs_theme/static/pydoctheme.css

@@ -308,6 +308,26 @@ div.genindex-jumpbox a {
     text-align: center;
 }
 
+.copybutton {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-size: 75%;
+    font-family: monospace;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    border-radius: 0 3px 0 0;
+    color: #ac9; /* follows div.body pre */
+    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;
+}
+
 @media (max-width: 1023px) {
     /* Body layout */
     div.body {