add a custom UI element that combines accordion and checkbox

rework hires fix UI to use accordion
prevent bogus progress output in console when calculating hires fix dimensions

1 files changed, 37 insertions, 0 deletions

diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
new file mode 100644
index 00000000..a5eef229
--- /dev/null
+++ b/javascript/inputAccordion.js
@@ -0,0 +1,37 @@
+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);
+
+        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();
+    }
+}
+
+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)
+        }
+    }
+});