Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
S
Stable Diffusion Webui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
novelai-storage
Stable Diffusion Webui
Commits
6b8c661c
Commit
6b8c661c
authored
Nov 05, 2023
by
AUTOMATIC1111
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add a visible checkbox to input accordion
parent
452ab8fe
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
59 additions
and
25 deletions
+59
-25
javascript/inputAccordion.js
javascript/inputAccordion.js
+54
-25
style.css
style.css
+5
-0
No files found.
javascript/inputAccordion.js
View file @
6b8c661c
var
observerAccordionOpen
=
new
MutationObserver
(
function
(
mutations
)
{
mutations
.
forEach
(
function
(
mutationRecord
)
{
var
elem
=
mutationRecord
.
target
;
var
open
=
elem
.
classList
.
contains
(
'
open
'
);
function
inputAccordionChecked
(
id
,
checked
)
{
var
accordion
=
gradioApp
().
getElementById
(
id
);
accordion
.
visibleCheckbox
.
checked
=
checked
;
accordion
.
onVisibleCheckboxChange
();
}
var
accordion
=
elem
.
parentNode
;
accordion
.
classList
.
toggle
(
'
input-accordion-open
'
,
open
);
function
setupAccordion
(
accordion
){
var
labelWrap
=
accordion
.
querySelector
(
'
.label-wrap
'
);
var
gradioCheckbox
=
gradioApp
().
querySelector
(
'
#
'
+
accordion
.
id
+
"
-checkbox input
"
);
var
extra
=
gradioApp
().
querySelector
(
'
#
'
+
accordion
.
id
+
"
-extra
"
);
var
span
=
labelWrap
.
querySelector
(
'
span
'
);
var
linked
=
true
;
var
checkbox
=
gradioApp
().
querySelector
(
'
#
'
+
accordion
.
id
+
"
-checkbox input
"
);
checkbox
.
checked
=
open
;
updateInput
(
checkbox
);
var
isOpen
=
function
(){
return
labelWrap
.
classList
.
contains
(
'
open
'
);
}
var
extra
=
gradioApp
().
querySelector
(
'
#
'
+
accordion
.
id
+
"
-extra
"
);
if
(
extra
)
{
extra
.
style
.
display
=
open
?
""
:
"
none
"
;
}
var
observerAccordionOpen
=
new
MutationObserver
(
function
(
mutations
)
{
mutations
.
forEach
(
function
(
mutationRecord
)
{
accordion
.
classList
.
toggle
(
'
input-accordion-open
'
,
isOpen
());
if
(
linked
){
accordion
.
visibleCheckbox
.
checked
=
isOpen
();
accordion
.
onVisibleCheckboxChange
();
}
});
});
});
observerAccordionOpen
.
observe
(
labelWrap
,
{
attributes
:
true
,
attributeFilter
:
[
'
class
'
]
});
function
inputAccordionChecked
(
id
,
checked
)
{
var
label
=
gradioApp
().
querySelector
(
'
#
'
+
id
+
"
.label-wrap
"
);
if
(
label
.
classList
.
contains
(
'
open
'
)
!=
checked
)
{
label
.
click
();
if
(
extra
)
{
labelWrap
.
insertBefore
(
extra
,
labelWrap
.
lastElementChild
);
}
accordion
.
onChecked
=
function
(
checked
){
if
(
isOpen
()
!=
checked
)
{
labelWrap
.
click
();
}
}
var
visibleCheckbox
=
document
.
createElement
(
'
INPUT
'
);
visibleCheckbox
.
type
=
'
checkbox
'
;
visibleCheckbox
.
checked
=
isOpen
();
visibleCheckbox
.
id
=
accordion
.
id
+
"
-visible-checkbox
"
;
visibleCheckbox
.
className
=
gradioCheckbox
.
className
+
"
input-accordion-checkbox
"
;
span
.
insertBefore
(
visibleCheckbox
,
span
.
firstChild
);
accordion
.
visibleCheckbox
=
visibleCheckbox
;
accordion
.
onVisibleCheckboxChange
=
function
(){
if
(
linked
&&
isOpen
()
!=
visibleCheckbox
.
checked
)
{
labelWrap
.
click
();
}
gradioCheckbox
.
checked
=
visibleCheckbox
.
checked
;
updateInput
(
gradioCheckbox
);
};
visibleCheckbox
.
addEventListener
(
'
click
'
,
function
(
event
){
linked
=
false
;
event
.
stopPropagation
();
});
visibleCheckbox
.
addEventListener
(
'
input
'
,
accordion
.
onVisibleCheckboxChange
);
}
onUiLoaded
(
function
()
{
for
(
var
accordion
of
gradioApp
().
querySelectorAll
(
'
.input-accordion
'
))
{
var
labelWrap
=
accordion
.
querySelector
(
'
.label-wrap
'
);
observerAccordionOpen
.
observe
(
labelWrap
,
{
attributes
:
true
,
attributeFilter
:
[
'
class
'
]});
var
extra
=
gradioApp
().
querySelector
(
'
#
'
+
accordion
.
id
+
"
-extra
"
);
if
(
extra
)
{
labelWrap
.
insertBefore
(
extra
,
labelWrap
.
lastElementChild
);
}
setupAccordion
(
accordion
);
}
});
style.css
View file @
6b8c661c
...
...
@@ -204,6 +204,11 @@ div.block.gradio-accordion {
padding
:
8px
8px
;
}
input
[
type
=
"checkbox"
]
.input-accordion-checkbox
{
vertical-align
:
sub
;
margin-right
:
0.5em
;
}
/* txt2img/img2img specific */
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment