From 6b8c661c49796bba093ca8a8301e81d28afb9832 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sun, 5 Nov 2023 08:55:54 +0300
Subject: [PATCH] add a visible checkbox to input accordion

---
 javascript/inputAccordion.js | 87 ++++++++++++++++++++++++------------
 style.css                    |  5 +++
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index f2839852e..8fc01230a 100644
--- a/javascript/inputAccordion.js
+++ b/javascript/inputAccordion.js
@@ -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) {
-    var label = gradioApp().querySelector('#' + id + " .label-wrap");
-    if (label.classList.contains('open') != checked) {
-        label.click();
+    var accordion = gradioApp().getElementById(id);
+    accordion.visibleCheckbox.checked = checked;
+    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() {
     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);
     }
 });
diff --git a/style.css b/style.css
index 115626cd9..9a1181e8b 100644
--- a/style.css
+++ b/style.css
@@ -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 */