script.js split work

modules/ui.py

@@ -908,12 +908,17 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo):
 
 
 with open(os.path.join(script_path, "script.js"), "r", encoding="utf8") as jsfile:
-    javascript = jsfile.read()
+    javascript = f'<script>{jsfile.read()}</script>'
+
+jsdir = os.path.join(script_path, "javascript")
+for filename in os.listdir(jsdir):
+    with open(os.path.join(jsdir, filename), "r", encoding="utf8") as jsfile:
+        javascript += f"\n<script>{jsfile.read()}</script>"
 
 
 def template_response(*args, **kwargs):
     res = gradio_routes_templates_response(*args, **kwargs)
-    res.body = res.body.replace(b'</head>', f'<script>{javascript}</script></head>'.encode("utf8"))
+    res.body = res.body.replace(b'</head>', f'{javascript}</head>'.encode("utf8"))
     res.init_headers()
     return res
 

script.js

@@ -76,91 +76,12 @@ function gradioApp(){
 
 global_progressbar = null
 
-function closeModal() {
-  gradioApp().getElementById("lightboxModal").style.display = "none";
+uiUpdateCallbacks = []
+function onUiUpdate(callback){
+    uiUpdateCallbacks.push(callback)
 }
 
-function showModal(event) {
-  var source = event.target || event.srcElement;
-  gradioApp().getElementById("modalImage").src = source.src
-  var lb = gradioApp().getElementById("lightboxModal")
-  lb.style.display = "block";
-  lb.focus()
-  event.stopPropagation()
-}
-
-function negmod(n, m) {
-  return ((n % m) + m) % m;
-}
-
-function modalImageSwitch(offset){
-  var galleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
-
-  if(galleryButtons.length>1){
-      var currentButton  = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2")
-
-      var result = -1
-      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
-
-      if(result != -1){
-        nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
-        nextButton.click()
-        gradioApp().getElementById("modalImage").src = nextButton.children[0].src
-        setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10)
-      }
-  }
-
-}
-
-function modalNextImage(event){
-  modalImageSwitch(1)
-  event.stopPropagation()
-}
-
-function modalPrevImage(event){
-  modalImageSwitch(-1)  
-  event.stopPropagation()
-}
-
-function modalKeyHandler(event){
-    switch (event.key) {
-        case "ArrowLeft":
-            modalPrevImage(event)
-            break;
-        case "ArrowRight":
-            modalNextImage(event)
-            break;
-    }
-}
-
-function showGalleryImage(){
-    setTimeout(function() {
-        fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
-        
-        if(fullImg_preview != null){
-            fullImg_preview.forEach(function function_name(e) {
-                if(e && e.parentElement.tagName == 'DIV'){
-
-                    e.style.cursor='pointer'
-
-                    e.addEventListener('click', function (evt) {
-                      showModal(evt)
-
-                    },true);
-                }
-            });
-        }
-
-    }, 100);
-}
-
-function galleryImageHandler(e){
-    if(e && e.parentElement.tagName == 'BUTTON'){
-        e.onclick = showGalleryImage;
-    }
-}
-
-function addTitles(root){
+function uiUpdate(root){
 	root.querySelectorAll('span, button, select').forEach(function(span){
 		tooltip = titles[span.textContent];
 
@@ -206,63 +127,18 @@ function addTitles(root){
         });
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
 	}
-	
-	fullImg_preview = gradioApp().querySelectorAll('img.w-full')
 
-	    if(fullImg_preview != null){
-		fullImg_preview.forEach(galleryImageHandler);
-	}
-	
+
+	uiUpdateCallbacks.forEach(function(x){
+	    x()
+	})
 }
 
 document.addEventListener("DOMContentLoaded", function() {
     var mutationObserver = new MutationObserver(function(m){
-        addTitles(gradioApp());
+        uiUpdate(gradioApp());
     });
     mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
-	
-    const modalFragment = document.createDocumentFragment();
-    const modal = document.createElement('div')
-    modal.onclick = closeModal;
-    
-    const modalClose = document.createElement('span')
-    modalClose.className = 'modalClose cursor';
-    modalClose.innerHTML = '×'
-    modalClose.onclick = closeModal;
-    modal.id = "lightboxModal";
-    modal.tabIndex=0
-    modal.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalClose)
-
-    const modalImage = document.createElement('img')
-    modalImage.id = 'modalImage';
-    modalImage.onclick = closeModal;
-    modalImage.tabIndex=0
-    modalImage.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalImage)
-
-    const modalPrev = document.createElement('a')
-    modalPrev.className = 'modalPrev';
-    modalPrev.innerHTML = '❮'
-    modalPrev.tabIndex=0
-    modalPrev.addEventListener('click',modalPrevImage,true);
-    modalPrev.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalPrev)
-
-    const modalNext = document.createElement('a')
-    modalNext.className = 'modalNext';
-    modalNext.innerHTML = '❯'
-    modalNext.tabIndex=0
-    modalNext.addEventListener('click',modalNextImage,true);
-    modalNext.addEventListener('keydown', modalKeyHandler, true)
-
-    modal.appendChild(modalNext)
-
-
-    gradioApp().getRootNode().appendChild(modal)
-    
-    document.body.appendChild(modalFragment);
-	
 });
 
 function selected_gallery_index(){