DiffusionAi/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui synced 2025-01-09 07:47:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

add a visible checkbox to input accordion

Browse Source
This commit is contained in:
AUTOMATIC1111 2023-11-05 08:55:54 +03:00
parent 452ab8fe72
commit 6b8c661c49
2 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
javascript/inputAccordion.js
View File

@ -1,37 +1,66 @@
var observerAccordionOpen = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
var elem = mutationRecord.target;
var open = elem.classList.contains('open');
var accordion = elem.parentNode;
accordion.classList.toggle('input-accordion-open', open);
var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
checkbox.checked = open;
updateInput(checkbox);
var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
if (extra) {
extra.style.display = open ? "" : "none";
}
});
});
function inputAccordionChecked(id, checked) { function inputAccordionChecked(id, checked) {
var label = gradioApp().querySelector('#' + id + " .label-wrap"); var accordion = gradioApp().getElementById(id);
if (label.classList.contains('open') != checked) { accordion.visibleCheckbox.checked = checked;
label.click(); accordion.onVisibleCheckboxChange();
}
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 isOpen = function(){ return labelWrap.classList.contains('open'); }
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']});
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() { onUiLoaded(function() {
for (var accordion of gradioApp().querySelectorAll('.input-accordion')) { for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
var labelWrap = accordion.querySelector('.label-wrap'); setupAccordion(accordion);
observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
if (extra) {
labelWrap.insertBefore(extra, labelWrap.lastElementChild);
}
} }
}); });

5
style.css
View File

@ -204,6 +204,11 @@ div.block.gradio-accordion {
padding: 8px 8px; padding: 8px 8px;
} }
input[type="checkbox"].input-accordion-checkbox{
vertical-align: sub;
margin-right: 0.5em;
}
/* txt2img/img2img specific */ /* txt2img/img2img specific */