FazBrowse GitHub Viewer
|
Trending
|
URL:
|
Home
Tools:
[Download Repo ZIP]
[View Raw Code]
[Original HTTPS Page]
ProdigiousPython/docs/_static/togglebutton.js at develop · ProdigiousPython/ProdigiousPython · GitHub
Uh oh!
There was an error while loading.
Please reload this page
.
ProdigiousPython
/
ProdigiousPython
Public
Notifications
You must be signed in to change notification settings
Fork
6
Star
9
Code
Issues
3
Pull requests
5
Discussions
Actions
Projects
Security and quality
0
Insights
Additional navigation options
Code
Issues
Pull requests
Discussions
Actions
Projects
Security and quality
Insights
Expand file tree
Breadcrumbs
ProdigiousPython
/
docs
/
_static
/
togglebutton.js
Copy path
More file actions
More file actions
Latest commit
History
History
History
187 lines (169 loc) · 7.17 KB
Breadcrumbs
ProdigiousPython
/
docs
/
_static
/
togglebutton.js
Copy path
File metadata and controls
187 lines (169 loc) · 7.17 KB
Raw
Copy raw file
Download raw file
Open symbols panel
Edit and raw actions
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
/**
* Add Toggle Buttons to elements
*/
let
toggleChevron
=
`
<svg xmlns="http://www.w3.org/2000/svg" class="tb-icon toggle-chevron-right" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<polyline points="9 6 15 12 9 18" />
</svg>`
;
var
initToggleItems
=
(
)
=>
{
var
itemsToToggle
=
document
.
querySelectorAll
(
togglebuttonSelector
)
;
console
.
log
(
`[togglebutton]: Adding toggle buttons to
${
itemsToToggle
.
length
}
items`
)
// Add the button to each admonition and hook up a callback to toggle visibility
itemsToToggle
.
forEach
(
(
item
,
index
)
=>
{
if
(
item
.
classList
.
contains
(
"admonition"
)
)
{
// If it's an admonition block, then we'll add a button inside
// Generate unique IDs for this item
var
toggleID
=
`toggle-
${
index
}
`
;
var
buttonID
=
`button-
${
toggleID
}
`
;
item
.
setAttribute
(
'id'
,
toggleID
)
;
if
(
!
item
.
classList
.
contains
(
"toggle"
)
)
{
item
.
classList
.
add
(
"toggle"
)
;
}
// This is the button that will be added to each item to trigger the toggle
var
collapseButton
=
`
<button type="button" id="
${
buttonID
}
" class="toggle-button" data-target="
${
toggleID
}
" data-button="
${
buttonID
}
" data-toggle-hint="
${
toggleHintShow
}
" aria-label="Toggle hidden content">
${
toggleChevron
}
</button>`
;
title
=
item
.
querySelector
(
".admonition-title"
)
title
.
insertAdjacentHTML
(
"beforeend"
,
collapseButton
)
;
thisButton
=
document
.
getElementById
(
buttonID
)
;
// Add click handlers for the button + admonition title (if admonition)
admonitionTitle
=
document
.
querySelector
(
`#
${
toggleID
}
> .admonition-title`
)
if
(
admonitionTitle
)
{
// If an admonition, then make the whole title block clickable
admonitionTitle
.
addEventListener
(
'click'
,
toggleClickHandler
)
;
admonitionTitle
.
dataset
.
target
=
toggleID
admonitionTitle
.
dataset
.
button
=
buttonID
}
else
{
// If not an admonition then we'll listen for the button click
thisButton
.
addEventListener
(
'click'
,
toggleClickHandler
)
;
}
// Now hide the item for this toggle button unless explicitly noted to show
if
(
!
item
.
classList
.
contains
(
"toggle-shown"
)
)
{
toggleHidden
(
thisButton
)
;
}
}
else
{
// If not an admonition, wrap the block in a <details> block
// Define the structure of the details block and insert it as a sibling
var
detailsBlock
=
`
<details class="toggle-details">
<summary class="toggle-details__summary">
${
toggleChevron
}
<span class="toggle-details__summary-text">
${
toggleHintShow
}
</span>
</summary>
</details>`
;
item
.
insertAdjacentHTML
(
"beforebegin"
,
detailsBlock
)
;
// Now move the toggle-able content inside of the details block
details
=
item
.
previousElementSibling
details
.
appendChild
(
item
)
item
.
classList
.
add
(
"toggle-details__container"
)
// Set up a click trigger to change the text as needed
details
.
addEventListener
(
'click'
,
(
click
)
=>
{
let
parent
=
click
.
target
.
parentElement
;
if
(
parent
.
tagName
.
toLowerCase
(
)
==
"details"
)
{
summary
=
parent
.
querySelector
(
"summary"
)
;
details
=
parent
;
}
else
{
summary
=
parent
;
details
=
parent
.
parentElement
;
}
// Update the inner text for the proper hint
if
(
details
.
open
)
{
summary
.
querySelector
(
"span.toggle-details__summary-text"
)
.
innerText
=
toggleHintShow
;
}
else
{
summary
.
querySelector
(
"span.toggle-details__summary-text"
)
.
innerText
=
toggleHintHide
;
}
}
)
;
// If we have a toggle-shown class, open details block should be open
if
(
item
.
classList
.
contains
(
"toggle-shown"
)
)
{
details
.
click
(
)
;
}
}
}
)
}
;
// This should simply add / remove the collapsed class and change the button text
var
toggleHidden
=
(
button
)
=>
{
target
=
button
.
dataset
[
'target'
]
var
itemToToggle
=
document
.
getElementById
(
target
)
;
if
(
itemToToggle
.
classList
.
contains
(
"toggle-hidden"
)
)
{
itemToToggle
.
classList
.
remove
(
"toggle-hidden"
)
;
button
.
classList
.
remove
(
"toggle-button-hidden"
)
;
}
else
{
itemToToggle
.
classList
.
add
(
"toggle-hidden"
)
;
button
.
classList
.
add
(
"toggle-button-hidden"
)
;
}
}
var
toggleClickHandler
=
(
click
)
=>
{
// Be cause the admonition title is clickable and extends to the whole admonition
// We only look for a click event on this title to trigger the toggle.
if
(
click
.
target
.
classList
.
contains
(
"admonition-title"
)
)
{
button
=
click
.
target
.
querySelector
(
".toggle-button"
)
;
}
else
if
(
click
.
target
.
classList
.
contains
(
"tb-icon"
)
)
{
// We've clicked the icon and need to search up one parent for the button
button
=
click
.
target
.
parentElement
;
}
else
if
(
click
.
target
.
tagName
==
"polyline"
)
{
// We've clicked the SVG elements inside the button, need to up 2 layers
button
=
click
.
target
.
parentElement
.
parentElement
;
}
else
if
(
click
.
target
.
classList
.
contains
(
"toggle-button"
)
)
{
// We've clicked the button itself and so don't need to do anything
button
=
click
.
target
;
}
else
{
console
.
log
(
`[togglebutton]: Couldn't find button for
${
click
.
target
}
`
)
}
target
=
document
.
getElementById
(
button
.
dataset
[
'button'
]
)
;
toggleHidden
(
target
)
;
}
// If we want to blanket-add toggle classes to certain cells
var
addToggleToSelector
=
(
)
=>
{
const
selector
=
""
;
if
(
selector
.
length
>
0
)
{
document
.
querySelectorAll
(
selector
)
.
forEach
(
(
item
)
=>
{
item
.
classList
.
add
(
"toggle"
)
;
}
)
}
}
// Helper function to run when the DOM is finished
const
sphinxToggleRunWhenDOMLoaded
=
cb
=>
{
if
(
document
.
readyState
!=
'loading'
)
{
cb
(
)
}
else
if
(
document
.
addEventListener
)
{
document
.
addEventListener
(
'DOMContentLoaded'
,
cb
)
}
else
{
document
.
attachEvent
(
'onreadystatechange'
,
function
(
)
{
if
(
document
.
readyState
==
'complete'
)
cb
(
)
}
)
}
}
sphinxToggleRunWhenDOMLoaded
(
addToggleToSelector
)
sphinxToggleRunWhenDOMLoaded
(
initToggleItems
)
/** Toggle details blocks to be open when printing */
if
(
toggleOpenOnPrint
==
"true"
)
{
window
.
addEventListener
(
"beforeprint"
,
(
)
=>
{
// Open the details
document
.
querySelectorAll
(
"details.toggle-details"
)
.
forEach
(
(
el
)
=>
{
el
.
dataset
[
"togglestatus"
]
=
el
.
open
;
el
.
open
=
true
;
}
)
;
// Open the admonitions
document
.
querySelectorAll
(
".admonition.toggle.toggle-hidden"
)
.
forEach
(
(
el
)
=>
{
console
.
log
(
el
)
;
el
.
querySelector
(
"button.toggle-button"
)
.
click
(
)
;
el
.
dataset
[
"toggle_after_print"
]
=
"true"
;
}
)
;
}
)
;
window
.
addEventListener
(
"afterprint"
,
(
)
=>
{
// Re-close the details that were closed
document
.
querySelectorAll
(
"details.toggle-details"
)
.
forEach
(
(
el
)
=>
{
el
.
open
=
el
.
dataset
[
"togglestatus"
]
==
"true"
;
delete
el
.
dataset
[
"togglestatus"
]
;
}
)
;
// Re-close the admonition toggle buttons
document
.
querySelectorAll
(
".admonition.toggle"
)
.
forEach
(
(
el
)
=>
{
if
(
el
.
dataset
[
"toggle_after_print"
]
==
"true"
)
{
el
.
querySelector
(
"button.toggle-button"
)
.
click
(
)
;
delete
el
.
dataset
[
"toggle_after_print"
]
;
}
}
)
;
}
)
;
}
Back
|
FazBrowse Home
|
New Git URL