From 1a513370774ccb4cd9562f1b40048adc2ab7c896 Mon Sep 17 00:00:00 2001
From: DepFA <35278260+dfaker@users.noreply.github.com>
Date: Sat, 17 Sep 2022 01:03:03 +0100
Subject: [PATCH] Add modal creation and functions

---
 script.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/script.js b/script.js
index e63e0695..7c27da74 100644
--- a/script.js
+++ b/script.js
@@ -76,6 +76,35 @@ function gradioApp(){
 
 global_progressbar = null
 
+function closeModal() {
+  gradioApp().getElementById("lightboxModal").style.display = "none";
+}
+
+function showModal(elem) {
+  gradioApp().getElementById("modalImage").src = elem.src
+  gradioApp().getElementById("lightboxModal").style.display = "block";
+}
+
+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'
+
+                    elemfunc = function(elem){
+                        elem.onclick = function(){showModal(elem)};
+                    }
+                    elemfunc(e)
+                }
+            });
+        }
+
+    }, 100);
+}
+
 function addTitles(root){
 	root.querySelectorAll('span, button, select').forEach(function(span){
 		tooltip = titles[span.textContent];
@@ -117,8 +146,18 @@ function addTitles(root){
                 img2img_preview.style.width = img2img_gallery.clientWidth + "px"
                 img2img_preview.style.height = img2img_gallery.clientHeight + "px"
             }
+		
+            fullImg_preview = gradioApp().querySelectorAll('img.w-full')
 
+            if(fullImg_preview != null){
 
+                fullImg_preview.forEach(function function_name(e) {
+                    if(e && e.parentElement.tagName == 'BUTTON'){
+                        e.onclick = showGalleryImage;
+                    }
+                });
+            }
+		
             window.setTimeout(requestProgress, 500)
         });
         mutationObserver.observe( progressbar, { childList:true, subtree:true })
@@ -131,6 +170,27 @@ document.addEventListener("DOMContentLoaded", function() {
         addTitles(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 = '&times;'
+    modalClose.onclick = closeModal;
+    modal.id = "lightboxModal";
+    modal.appendChild(modalClose)
+
+    const modalImage = document.createElement('img')
+    modalImage.id = 'modalImage';
+    modalImage.onclick = closeModal;
+    modal.appendChild(modalImage)
+
+    gradioApp().getRootNode().appendChild(modal)
+    
+    document.body.appendChild(modalFragment);
+	
 });
 
 function selected_gallery_index(){