add button to toggle tiling images in the imageviewer modal

2 files changed, 71 insertions, 20 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';
diff --git a/style.css b/style.css
index 2cd6eb26..e235f7f3 100644
--- a/style.css
+++ b/style.css
@@ -246,22 +246,39 @@ input[type="range"]{
   background-color: rgba(20, 20, 20, 0.95);

 }

 

+.modalControls {

+    display: grid;

+    grid-template-columns: 32px auto 1fr 32px;

+    grid-template-areas: "zoom tile space close";

+    position: absolute;

+    top: 0;

+    left: 0;

+    right: 0;

+    padding: 16px;

+    gap: 16px;

+    background-color: rgba(0,0,0,0.2);

+}

+

+.modalClose {

+    grid-area: close;

+}

+

+.modalZoom {

+    grid-area: zoom;

+}

+

+.modalTileImage {

+    grid-area: tile;

+}

+

 .modalClose, 

 .modalZoom {

   color: white;

-  position: absolute;

-  top: 10px;

-  right: 25px;

   font-size: 35px;

   font-weight: bold;

   cursor: pointer;

 }

 

-.modalZoom {

-  left: 10px;

-  right: auto;

-}

-

 .modalClose:hover,

 .modalClose:focus,

 .modalZoom:hover,