Update ``python-docs-theme`` to work with Sphinx 5 & 6 by AA-Turner · Pull Request #99 · python/python-docs-theme
@@ -1,64 +1,92 @@
$(document).ready(function() {
/* Add a [>>>] button on the top-right corner of code samples to hide
// ``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
}
}
}
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. */ 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 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" } }
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">>>></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) }
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. */ 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 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" } }
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">>>></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) }