Repository navigation
Expand file tree
/
Copy pathcopybutton.js
More file actions
84 lines (75 loc) · 2.74 KB
/
Copy pathcopybutton.js
File metadata and controls
84 lines (75 loc) · 2.74 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// 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.ELEMENT_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, .linenos")
for (const el of elements) {
el.remove()
}
return rootElement.innerText.trim()
}
const loadCopyButton = () => {
const button = document.createElement("button")
button.classList.add("copybutton")
button.type = "button"
button.innerText = _("Copy")
button.title = _("Copy to clipboard")
const makeOnButtonClick = () => {
let timeout = null
// define the behavior of the button when it's clicked
return async event => {
// check if the clipboard is available
if (!navigator.clipboard || !navigator.clipboard.writeText) {
return;
}
clearTimeout(timeout)
const buttonEl = event.currentTarget
const codeEl = buttonEl.nextElementSibling
try {
await navigator.clipboard.writeText(getCopyableText(codeEl))
} catch (e) {
console.error(e.message)
return
}
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"
)
// create and add the button to all the code blocks that contain >>>
highlightedElements.forEach(el => {
el.style.position = "relative"
// 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 = makeOnButtonClick()
el.prepend(clonedButton)
})
}
if (document.readyState !== "loading") {
loadCopyButton()
} else {
document.addEventListener("DOMContentLoaded", loadCopyButton)
}