1 files changed, 39 insertions, 66 deletions

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 28e748b7..32066ab8 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -32,13 +32,7 @@ function negmod(n, m) {
 function updateOnBackgroundChange() {
     const modalImage = gradioApp().getElementById("modalImage")
     if (modalImage && modalImage.offsetParent) {
-        let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
-        let currentButton = null
-        allcurrentButtons.forEach(function(elem) {
-            if (elem.parentElement.offsetParent) {
-                currentButton = elem;
-            }
-        })
+        let currentButton = selected_gallery_button();
 
         if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
             modalImage.src = currentButton.children[0].src;
@@ -50,22 +44,10 @@ function updateOnBackgroundChange() {
 }
 
 function modalImageSwitch(offset) {
-    var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
-    var galleryButtons = []
-    allgalleryButtons.forEach(function(elem) {
-        if (elem.parentElement.offsetParent) {
-            galleryButtons.push(elem);
-        }
-    })
+    var galleryButtons = all_gallery_buttons();
 
     if (galleryButtons.length > 1) {
-        var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
-        var currentButton = null
-        allcurrentButtons.forEach(function(elem) {
-            if (elem.parentElement.offsetParent) {
-                currentButton = elem;
-            }
-        })
+        var currentButton = selected_gallery_button();
 
         var result = -1
         galleryButtons.forEach(function(v, i) {
@@ -75,7 +57,7 @@ function modalImageSwitch(offset) {
         })
 
         if (result != -1) {
-            nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
+            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
             nextButton.click()
             const modalImage = gradioApp().getElementById("modalImage");
             const modal = gradioApp().getElementById("lightboxModal");
@@ -136,49 +118,37 @@ function modalKeyHandler(event) {
     }
 }
 
-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.dataset.modded)
-                    return;
-                e.dataset.modded = true;
-                if(e && e.parentElement.tagName == 'DIV'){
-                    e.style.cursor='pointer'
-                    e.style.userSelect='none'
-
-                    var isFirefox = isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-
-                    // For Firefox, listening on click first switched to next image then shows the lightbox.
-                    // If you know how to fix this without switching to mousedown event, please.
-                    // For other browsers the event is click to make it possiblr to drag picture.
-                    var event = isFirefox ? 'mousedown' : 'click'
-
-                    e.addEventListener(event, function (evt) {
-                        if(!opts.js_modal_lightbox || evt.button != 0) return;
-                        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
-                        evt.preventDefault()
-                        showModal(evt)
-                    }, true);
-                }
-            });
-        }
+function setupImageForLightbox(e) {
+	if (e.dataset.modded)
+		return;
+
+	e.dataset.modded = true;
+	e.style.cursor='pointer'
+	e.style.userSelect='none'
+
+	var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+	// For Firefox, listening on click first switched to next image then shows the lightbox.
+	// If you know how to fix this without switching to mousedown event, please.
+	// For other browsers the event is click to make it possiblr to drag picture.
+	var event = isFirefox ? 'mousedown' : 'click'
+
+	e.addEventListener(event, function (evt) {
+		if(!opts.js_modal_lightbox || evt.button != 0) return;
+
+		modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
+		evt.preventDefault()
+		showModal(evt)
+	}, true);
 
-    }, 100);
 }
 
 function modalZoomSet(modalImage, enable) {
-    if (enable) {
-        modalImage.classList.add('modalImageFullscreen');
-    } else {
-        modalImage.classList.remove('modalImageFullscreen');
-    }
+    if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
 }
 
 function modalZoomToggle(event) {
-    modalImage = gradioApp().getElementById("modalImage");
+    var modalImage = gradioApp().getElementById("modalImage");
     modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
     event.stopPropagation()
 }
@@ -199,21 +169,21 @@ function modalTileImageToggle(event) {
 }
 
 function galleryImageHandler(e) {
-    if (e && e.parentElement.tagName == 'BUTTON') {
+    //if (e && e.parentElement.tagName == 'BUTTON') {
         e.onclick = showGalleryImage;
-    }
+    //}
 }
 
 onUiUpdate(function() {
-    fullImg_preview = gradioApp().querySelectorAll('img.w-full')
+    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
     if (fullImg_preview != null) {
-        fullImg_preview.forEach(galleryImageHandler);
+        fullImg_preview.forEach(setupImageForLightbox);
     }
     updateOnBackgroundChange();
 })
 
 document.addEventListener("DOMContentLoaded", function() {
-    const modalFragment = document.createDocumentFragment();
+    //const modalFragment = document.createDocumentFragment();
     const modal = document.createElement('div')
     modal.onclick = closeModal;
     modal.id = "lightboxModal";
@@ -277,9 +247,12 @@ document.addEventListener("DOMContentLoaded", function() {
 
     modal.appendChild(modalNext)
 
+    try {
+		gradioApp().appendChild(modal);
+	} catch (e) {
+		gradioApp().body.appendChild(modal);
+	}
 
-    gradioApp().getRootNode().appendChild(modal)
-
-    document.body.appendChild(modalFragment);
+    document.body.appendChild(modal);
 
 });