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

---
 javascript/inputAccordion.js | 79 ++++++++++++++++++++++++++++++--------------
 1 file changed, 54 insertions(+), 25 deletions(-)

(limited to 'javascript/inputAccordion.js')

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);
     }
 });
-- 
cgit v1.2.3


From 16ab17429016a1154b9aa83244cdbfc7ba463d72 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sun, 5 Nov 2023 09:20:05 +0300
Subject: eslint

---
 javascript/inputAccordion.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'javascript/inputAccordion.js')

diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index 8fc01230..7570309a 100644
--- a/javascript/inputAccordion.js
+++ b/javascript/inputAccordion.js
@@ -4,20 +4,22 @@ function inputAccordionChecked(id, checked) {
     accordion.onVisibleCheckboxChange();
 }
 
-function setupAccordion(accordion){
+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 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){
+            if (linked) {
                 accordion.visibleCheckbox.checked = isOpen();
                 accordion.onVisibleCheckboxChange();
             }
@@ -29,22 +31,22 @@ function setupAccordion(accordion){
         labelWrap.insertBefore(extra, labelWrap.lastElementChild);
     }
 
-    accordion.onChecked = function(checked){
+    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.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) {
+    accordion.onVisibleCheckboxChange = function() {
+        if (linked && isOpen() != visibleCheckbox.checked) {
             labelWrap.click();
         }
 
@@ -52,7 +54,7 @@ function setupAccordion(accordion){
         updateInput(gradioCheckbox);
     };
 
-    visibleCheckbox.addEventListener('click', function(event){
+    visibleCheckbox.addEventListener('click', function(event) {
         linked = false;
         event.stopPropagation();
     });
-- 
cgit v1.2.3