update inputaccordion

extensions-builtin/sdnext-modernui

@@ -1 +1 @@
-Subproject commit 8eaf18c491ae2a54bb4963cf332fab5303fe1a24
+Subproject commit dae2c67d826b631dcc343c028c60f478b0437877

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; }

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);
+}

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; }

javascript/startup.js

@@ -12,6 +12,7 @@ async function initStartup() {
   initLogMonitor();
   initContextMenu();
   initDragDrop();
+  initAccordions();
   initSettings();
   initImageViewer();
   initGallery();