add button to toggle tiling images in the imageviewer modal

1 files changed, 46 insertions, 12 deletions

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index be2424c1..d2129053 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -5,9 +5,13 @@ function closeModal() {
 }
 
 function showModal(event) {
-  var source = event.target || event.srcElement;
-  gradioApp().getElementById("modalImage").src = source.src
-  var lb = gradioApp().getElementById("lightboxModal")
+  const source = event.target || event.srcElement;
+  const modalImage = gradioApp().getElementById("modalImage")
+  const lb = gradioApp().getElementById("lightboxModal")
+  modalImage.src = source.src
+  if (modalImage.style.display === 'none') {
+    lb.style.setProperty('background-image', 'url(' + source.src + ')');
+  }
   lb.style.display = "block";
   lb.focus()
   event.stopPropagation()
@@ -29,8 +33,13 @@ function modalImageSwitch(offset){
       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)
+        const modalImage = gradioApp().getElementById("modalImage");
+        const modal = gradioApp().getElementById("lightboxModal");
+        modalImage.src = nextButton.children[0].src;
+        if (modalImage.style.display === 'none') {
+            modal.style.setProperty('background-image', `url(${modalImage.src})`)
+        }
+        setTimeout( function(){modal.focus()},10)
       }
   }
 }
@@ -95,6 +104,21 @@ function modalZoomToggle(event){
     event.stopPropagation()
 }
 
+function modalTileImageToggle(event){
+    const modalImage = gradioApp().getElementById("modalImage");
+    const modal = gradioApp().getElementById("lightboxModal");
+    const isTiling = modalImage.style.display === 'none';
+    if (isTiling) {
+        modalImage.style.display = 'block';
+        modal.style.setProperty('background-image', 'none')
+    } else {
+        modalImage.style.display = 'none';
+        modal.style.setProperty('background-image', `url(${modalImage.src})`)
+    }
+
+    event.stopPropagation()
+}
+
 function galleryImageHandler(e){
     if(e && e.parentElement.tagName == 'BUTTON'){
         e.onclick = showGalleryImage;
@@ -116,17 +140,27 @@ document.addEventListener("DOMContentLoaded", function() {
     modal.tabIndex=0
     modal.addEventListener('keydown', modalKeyHandler, true)
 
-    const modalClose = document.createElement('span')
-    modalClose.className = 'modalClose cursor';
-    modalClose.innerHTML = '×'
-    modalClose.onclick = closeModal;
-    modal.appendChild(modalClose)
-
+    const modalControls = document.createElement('div')
+    modalControls.className = 'modalControls gradio-container';
+    modal.append(modalControls);
+    
     const modalZoom = document.createElement('span')
     modalZoom.className = 'modalZoom cursor';
     modalZoom.innerHTML = '⤡'
     modalZoom.addEventListener('click', modalZoomToggle, true)
-    modal.appendChild(modalZoom)
+    modalControls.appendChild(modalZoom)
+
+    const modalTileImage = document.createElement('button')
+    modalTileImage.className = 'modalTileImage gr-button gr-button-lg gr-button-secondary';
+    modalTileImage.innerHTML = 'Preview Image Tiling'
+    modalTileImage.addEventListener('click', modalTileImageToggle, true)
+    modalControls.appendChild(modalTileImage)
+
+    const modalClose = document.createElement('span')
+    modalClose.className = 'modalClose cursor';
+    modalClose.innerHTML = '×'
+    modalClose.onclick = closeModal;
+    modalControls.appendChild(modalClose)
 
     const modalImage = document.createElement('img')
     modalImage.id = 'modalImage';