new extra networks

javascript/extraNetworks.js

@@ -1,15 +1,20 @@
+let globalPopup = null;
+let globalPopupInner = null;
+const activePromptTextarea = {};
+
 function setupExtraNetworksForTab(tabname) {
   gradioApp().querySelector(`#${tabname}_extra_tabs`).classList.add('extra-networks');
   const tabs = gradioApp().querySelector(`#${tabname}_extra_tabs > div`);
   const search = gradioApp().querySelector(`#${tabname}_extra_search textarea`);
   const refresh = gradioApp().getElementById(`${tabname}_extra_refresh`);
-  const descriptInput = gradioApp().getElementById(`${tabname}_description_input`);
+  const description = gradioApp().getElementById(`${tabname}_description`);
   const close = gradioApp().getElementById(`${tabname}_extra_close`);
   search.classList.add('search');
-  tabs.appendChild(search);
+  description.classList.add('description');
   tabs.appendChild(refresh);
   tabs.appendChild(close);
-  tabs.appendChild(descriptInput);
+  tabs.appendChild(search);
+  tabs.appendChild(description);
   search.addEventListener('input', (evt) => {
     searchTerm = search.value.toLowerCase();
     gradioApp().querySelectorAll(`#${tabname}_extra_tabs div.card`).forEach((elem) => {
@@ -17,13 +22,47 @@ function setupExtraNetworksForTab(tabname) {
       elem.style.display = text.indexOf(searchTerm) == -1 ? 'none' : '';
     });
   });
+  intersectionObserver = new IntersectionObserver((entries) => {
+    // if (entries[0].intersectionRatio <= 0) onHidden();
+    if (entries[0].intersectionRatio > 0) {
+      for (el of Array.from(gradioApp().querySelectorAll('.extra-network-cards'))) {
+        const rect = el.getBoundingClientRect();
+        if (rect.top > 0) {
+          const en = gradioApp().getElementById(`${tabname}_extra_networks`);
+          if (!en) return
+          if (window.opts.extra_networks_card_cover == 'cover') {
+            en.style.zIndex = 0;
+            en.style.position = 'absolute';
+            en.style.right = 'unset';
+            en.style.width = 'unset';
+            el.style.height = document.body.offsetHeight - el.getBoundingClientRect().top + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
+          } if (window.opts.extra_networks_card_cover == 'sidebar') {
+            en.style.zIndex = 9999;
+            en.style.position = 'absolute';
+            en.style.right = '0';
+            en.style.width = '38vw';
+            el.style.height = gradioApp().getElementById(`${tabname}_settings`).offsetHeight - 90 + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = '60vw'
+          } else {
+            en.style.zIndex = 0;
+            en.style.position = 'relative';
+            en.style.right = 'unset';
+            en.style.width = 'unset';
+            el.style.height = window.innerHeight - el.getBoundingClientRect().top + 'px'; 
+            gradioApp().getElementById(`${tabname}_settings`).parentNode.style.width = 'unset'
+          }
+        }
+      }
+    }
+  });
+  intersectionObserver.observe(search); // monitor visibility of 
 }
 
-const activePromptTextarea = {};
-
 function setupExtraNetworks() {
   setupExtraNetworksForTab('txt2img');
   setupExtraNetworksForTab('img2img');
+  
   function registerPrompt(tabname, id) {
     const textarea = gradioApp().querySelector(`#${id} > label > textarea`);
     if (!activePromptTextarea[tabname]) activePromptTextarea[tabname] = textarea;
@@ -31,6 +70,7 @@ function setupExtraNetworks() {
       activePromptTextarea[tabname] = textarea;
     });
   }
+
   registerPrompt('txt2img', 'txt2img_prompt');
   registerPrompt('txt2img', 'txt2img_neg_prompt');
   registerPrompt('img2img', 'img2img_prompt');
@@ -93,9 +133,10 @@ function saveCardPreview(event, tabname, filename) {
 }
 
 function saveCardDescription(event, tabname, filename, descript) {
+  console.log('saveCardDescription', event, tabname, filename, descript);
   const textarea = gradioApp().querySelector(`#${tabname}_description_filename  > label > textarea`);
   const button = gradioApp().getElementById(`${tabname}_save_description`);
-  const description = gradioApp().getElementById(`${tabname}_description_input`);
+  const description = gradioApp().getElementById(`${tabname}_description`);
   textarea.value = filename;
   description.value = descript;
   updateInput(textarea);
@@ -105,13 +146,15 @@ function saveCardDescription(event, tabname, filename, descript) {
 }
 
 function readCardDescription(event, tabname, filename, descript, extraPage, cardName) {
+  console.log('readCardDescription', event, tabname, filename, descript, extraPage, cardName);
   const textarea = gradioApp().querySelector(`#${tabname}_description_filename  > label > textarea`);
-  const description_textarea = gradioApp().querySelector(`#${tabname}_description_input > label > textarea`);
+  const description = gradioApp().querySelector(`#${tabname}_description > label > textarea`);
   const button = gradioApp().getElementById(`${tabname}_read_description`);
   textarea.value = filename;
-  description_textarea.value = descript;
+  description.value = descript;
+  console.log(textarea.value, description.value);
   updateInput(textarea);
-  updateInput(description_textarea);
+  updateInput(description);
   button.click();
   event.stopPropagation();
   event.preventDefault();
@@ -125,8 +168,6 @@ function extraNetworksSearchButton(tabs_id, event) {
   updateInput(searchTextarea);
 }
 
-let globalPopup = null;
-let globalPopupInner = null;
 function popup(contents) {
   if (!globalPopup) {
     globalPopup = document.createElement('div');
@@ -150,7 +191,7 @@ function popup(contents) {
 
 function readCardMetadata(event, extraPage, cardName) {
   requestGet('./sd_extra_networks/metadata', { page: extraPage, item: cardName }, (data) => {
-    if (data && data.metadata) {
+    if (data?.metadata && (typeof(data?.metadata) === 'string')) {
       elem = document.createElement('pre');
       elem.classList.add('popup-metadata');
       elem.textContent = data.metadata;
@@ -161,6 +202,19 @@ function readCardMetadata(event, extraPage, cardName) {
   event.preventDefault();
 }
 
+function readCardInformation(event, extraPage, cardName) {
+  requestGet('./sd_extra_networks/info', { page: extraPage, item: cardName }, (data) => {
+    if (data?.info && (typeof(data?.info) === 'string')) {
+      elem = document.createElement('pre');
+      elem.classList.add('popup-metadata');
+      elem.textContent = data.info;
+      popup(elem);
+    }
+  }, () => {});
+  event.stopPropagation();
+  event.preventDefault();
+}
+
 function requestGet(url, data, handler, errorHandler) {
   const xhr = new XMLHttpRequest();
   const args = Object.keys(data).map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`).join('&');