From 549f9ff7619f099a9d0bcabd2b8e2c8446aa39b1 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Mon, 17 Jun 2024 20:37:40 -0400
Subject: [PATCH] update inputaccordion

---
 extensions-builtin/sdnext-modernui |  2 +-
 javascript/base.css                |  1 +
 javascript/inputAccordion.js       | 31 ++++++++++--------------------
 javascript/sdnext.css              |  2 +-
 javascript/startup.js              |  1 +
 5 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/extensions-builtin/sdnext-modernui b/extensions-builtin/sdnext-modernui
index 8eaf18c49..dae2c67d8 160000
--- a/extensions-builtin/sdnext-modernui
+++ b/extensions-builtin/sdnext-modernui
@@ -1 +1 @@
-Subproject commit 8eaf18c491ae2a54bb4963cf332fab5303fe1a24
+Subproject commit dae2c67d826b631dcc343c028c60f478b0437877
diff --git a/javascript/base.css b/javascript/base.css
index 799f06613..7daa8b2bd 100644
--- a/javascript/base.css
+++ b/javascript/base.css
@@ -17,6 +17,7 @@
 .tooltip-show { opacity: 0.9; }
 .tooltip-left { right: unset; left: 1em; }
 .toolbutton-selected { background: var(--background-fill-primary) !important; }
+.input-accordion-checkbox { display: none; }
 
 /* live preview */
 .progressDiv { position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; }
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
index d4c577505..f5f49bef1 100644
--- a/javascript/inputAccordion.js
+++ b/javascript/inputAccordion.js
@@ -10,13 +10,10 @@ function setupAccordion(accordion) {
   const extra = gradioApp().querySelector(`#${accordion.id}-extra`);
   const span = labelWrap.querySelector('span');
   let linked = true;
-
   const isOpen = () => labelWrap.classList.contains('open');
-
   const observerAccordionOpen = new MutationObserver((mutations) => {
     mutations.forEach((mutationRecord) => {
       accordion.classList.toggle('input-accordion-open', isOpen());
-
       if (linked) {
         accordion.visibleCheckbox.checked = isOpen();
         accordion.onVisibleCheckboxChange();
@@ -24,15 +21,9 @@ function setupAccordion(accordion) {
     });
   });
   observerAccordionOpen.observe(labelWrap, { attributes: true, attributeFilter: ['class'] });
-
-  if (extra) {
-    labelWrap.insertBefore(extra, labelWrap.lastElementChild);
-  }
-
+  if (extra) labelWrap.insertBefore(extra, labelWrap.lastElementChild);
   accordion.onChecked = (checked) => {
-    if (isOpen() !== checked) {
-      labelWrap.click();
-    }
+    if (isOpen() !== checked) labelWrap.click();
   };
 
   const visibleCheckbox = document.createElement('INPUT');
@@ -41,13 +32,9 @@ function setupAccordion(accordion) {
   visibleCheckbox.id = `${accordion.id}-visible-checkbox`;
   visibleCheckbox.className = `${gradioCheckbox.className} input-accordion-checkbox`;
   span.insertBefore(visibleCheckbox, span.firstChild);
-
   accordion.visibleCheckbox = visibleCheckbox;
   accordion.onVisibleCheckboxChange = () => {
-    if (linked && isOpen() !== visibleCheckbox.checked) {
-      labelWrap.click();
-    }
-
+    if (linked && isOpen() !== visibleCheckbox.checked) labelWrap.click();
     gradioCheckbox.checked = visibleCheckbox.checked;
     updateInput(gradioCheckbox);
   };
@@ -59,8 +46,10 @@ function setupAccordion(accordion) {
   visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
 }
 
-onUiLoaded(() => {
-  for (const accordion of gradioApp().querySelectorAll('.input-accordion')) {
-    setupAccordion(accordion);
-  }
-});
+// onUiLoaded(() => {
+//  for (const accordion of gradioApp().querySelectorAll('.input-accordion')) setupAccordion(accordion);
+// });
+
+function initAccordions() {
+  for (const accordion of gradioApp().querySelectorAll('.input-accordion')) setupAccordion(accordion);
+}
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index 73b4b34e8..f2d553106 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -240,7 +240,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
 .extra-details > div { overflow-y: auto; min-height: 40vh; max-height: 80vh; align-self: flex-start; }
 .extra-details td:first-child { font-weight: bold; vertical-align: top; }
 .extra-details .gradio-image { max-height: 50vh; }
-
+.input-accordion-checkbox { display: none !important; }
 
 /* specific elements */
 #modelmerger_interp_description { margin-top: 1em; margin-bottom: 1em; }
diff --git a/javascript/startup.js b/javascript/startup.js
index ab930645f..f1a44faf5 100644
--- a/javascript/startup.js
+++ b/javascript/startup.js
@@ -12,6 +12,7 @@ async function initStartup() {
   initLogMonitor();
   initContextMenu();
   initDragDrop();
+  initAccordions();
   initSettings();
   initImageViewer();
   initGallery();