Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitdd1317a

Browse files
committed
Add a copy button to all code samples
1 parentb8b2d49 commitdd1317a

File tree

3 files changed

+66
-67
lines changed

3 files changed

+66
-67
lines changed

‎python_docs_theme/static/copybutton.js

Lines changed: 39 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,47 @@
1-
// ``function*`` denotes a generator in JavaScript, see
2-
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
3-
function*getHideableCopyButtonElements(rootElement){
4-
// yield all elements with the "go" (Generic.Output),
5-
// "gp" (Generic.Prompt), or "gt" (Generic.Traceback) CSS class
6-
for(constelofrootElement.querySelectorAll('.go, .gp, .gt')){
7-
yieldel
8-
}
9-
// tracebacks (.gt) contain bare text elements that need to be
10-
// wrapped in a span to hide or show the element
11-
for(letelofrootElement.querySelectorAll('.gt')){
12-
while((el=el.nextSibling)&&el.nodeType!==Node.DOCUMENT_NODE){
13-
// stop wrapping text nodes when we hit the next output or
14-
// prompt element
15-
if(el.nodeType===Node.ELEMENT_NODE&&el.matches(".gp, .go")){
16-
break
17-
}
18-
// if the node is a text node with content, wrap it in a
19-
// span element so that we can control visibility
20-
if(el.nodeType===Node.TEXT_NODE&&el.textContent.trim()){
21-
constwrapper=document.createElement("span")
22-
el.after(wrapper)
23-
wrapper.appendChild(el)
24-
el=wrapper
25-
}
26-
yieldel
1+
// Extract copyable text from the code block ignoring the
2+
// prompts and output.
3+
functiongetCopyableText(rootElement){
4+
rootElement=rootElement.cloneNode(true)
5+
// tracebacks (.gt) contain bare text elements that
6+
// need to be removed
7+
consttracebacks=rootElement.querySelectorAll(".gt")
8+
for(consteloftracebacks){
9+
while(
10+
el.nextSibling&&
11+
(el.nextSibling.nodeType!==Node.DOCUMENT_NODE||
12+
!el.nextSibling.matches(".gp, .go"))
13+
){
14+
el.nextSibling.remove()
2715
}
2816
}
17+
// Remove all elements with the "go" (Generic.Output),
18+
// "gp" (Generic.Prompt), or "gt" (Generic.Traceback) CSS class
19+
constelements=rootElement.querySelectorAll(".gp, .go, .gt")
20+
for(constelofelements){
21+
el.remove()
22+
}
23+
returnrootElement.innerText.trim()
2924
}
3025

31-
3226
constloadCopyButton=()=>{
33-
/* Add a [>>>] button in the top-right corner of code samples to hide
34-
* the >>> and ... prompts and the output and thus make the code
35-
* copyable. */
36-
consthide_text=_("Hide the prompts and output")
37-
constshow_text=_("Show the prompts and output")
38-
39-
constbutton=document.createElement("span")
27+
constbutton=document.createElement("button")
4028
button.classList.add("copybutton")
41-
button.innerText=">>>"
42-
button.title=hide_text
43-
button.dataset.hidden="false"
44-
constbuttonClick=event=>{
29+
button.type="button"
30+
button.innerText=_("Copy")
31+
button.title=_("Copy to clipboard")
32+
33+
constmakeOnButtonClick=()=>{
34+
lettimeout=null
4535
// define the behavior of the button when it's clicked
46-
event.preventDefault()
47-
constbuttonEl=event.currentTarget
48-
constcodeEl=buttonEl.nextElementSibling
49-
if(buttonEl.dataset.hidden==="false"){
50-
// hide the code output
51-
for(constelofgetHideableCopyButtonElements(codeEl)){
52-
el.hidden=true
53-
}
54-
buttonEl.title=show_text
55-
buttonEl.dataset.hidden="true"
56-
}else{
57-
// show the code output
58-
for(constelofgetHideableCopyButtonElements(codeEl)){
59-
el.hidden=false
60-
}
61-
buttonEl.title=hide_text
62-
buttonEl.dataset.hidden="false"
36+
returnevent=>{
37+
clearTimeout(timeout)
38+
constbuttonEl=event.currentTarget
39+
constcodeEl=buttonEl.nextElementSibling
40+
navigator.clipboard.writeText(getCopyableText(codeEl))
41+
buttonEl.innerText=_("Copied!")
42+
timeout=setTimeout(()=>{
43+
buttonEl.innerText=_("Copy")
44+
},1500)
6345
}
6446
}
6547

@@ -78,10 +60,8 @@ const loadCopyButton = () => {
7860
// if we find a console prompt (.gp), prepend the (deeply cloned) button
7961
constclonedButton=button.cloneNode(true)
8062
// the onclick attribute is not cloned, set it on the new element
81-
clonedButton.onclick=buttonClick
82-
if(el.querySelector(".gp")!==null){
83-
el.prepend(clonedButton)
84-
}
63+
clonedButton.onclick=makeOnButtonClick()
64+
el.prepend(clonedButton)
8565
})
8666
}
8767

‎python_docs_theme/static/pydoctheme.css

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -442,17 +442,23 @@ div.genindex-jumpbox a {
442442
top:0;
443443
right:0;
444444
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
445-
padding-left:0.2em;
446-
padding-right:0.2em;
445+
font-size:80%;
446+
padding-left:.5em;
447+
padding-right:.5em;
448+
height:100%;
449+
max-height:min(100%,2.4em);
447450
border-radius:03px00;
448-
color:#ac9;/* follows div.body pre */
449-
border-color:#ac9;/* follows div.body pre */
450-
border-style: solid;/* follows div.body pre */
451-
border-width:1px;/* follows div.body pre */
451+
color:#000;
452+
background-color:#fff;
453+
border:1px solid#ac9;/* follows div.body pre */
454+
}
455+
456+
.copybutton:hover {
457+
background-color:#eee;
452458
}
453459

454-
.copybutton[data-hidden='true'] {
455-
text-decoration: line-through;
460+
.copybutton:active {
461+
background-color:#ddd;
456462
}
457463

458464
@media (max-width:1023px) {

‎python_docs_theme/static/pydoctheme_dark.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,3 +176,16 @@ img.invert-in-dark-mode {
176176
--versionchanged:var(--middle-color);
177177
--deprecated:var(--bad-color);
178178
}
179+
180+
.copybutton {
181+
color:#ac9;/* follows div.body pre */
182+
background-color:#222222;/* follows body */
183+
}
184+
185+
.copybutton:hover {
186+
background-color:#434343;
187+
}
188+
189+
.copybutton:active {
190+
background-color:#656565;
191+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp