add a visible checkbox to input accordion

1 files changed, 54 insertions, 25 deletions

diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index f2839852..8fc01230 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');
+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);
     }
 });