add button to toggle tiling images in the imageviewer modal

javascript/imageviewer.js

@@ -5,9 +5,13 @@ function closeModal() {
 }
 
 function showModal(event) {
-  var source = event.target || event.srcElement;
+  const source = event.target || event.srcElement;
-  gradioApp().getElementById("modalImage").src = source.src
+  const modalImage = gradioApp().getElementById("modalImage")
-  var lb = gradioApp().getElementById("lightboxModal")
+  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
+        const modalImage = gradioApp().getElementById("modalImage");
-        setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10)
+        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')
+    const modalControls = document.createElement('div')
-    modalClose.className = 'modalClose cursor';
+    modalControls.className = 'modalControls gradio-container';
-    modalClose.innerHTML = '×'
+    modal.append(modalControls);
-    modalClose.onclick = closeModal;
+    
-    modal.appendChild(modalClose)
-
     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';

style.css

@@ -246,20 +246,37 @@ input[type="range"]{
   background-color: rgba(20, 20, 20, 0.95);
 }
 
-.modalClose, 
+.modalControls {
-.modalZoom {
+    display: grid;
-  color: white;
+    grid-template-columns: 32px auto 1fr 32px;
-  position: absolute;
+    grid-template-areas: "zoom tile space close";
-  top: 10px;
+    position: absolute;
-  right: 25px;
+    top: 0;
-  font-size: 35px;
+    left: 0;
-  font-weight: bold;
+    right: 0;
-  cursor: pointer;
+    padding: 16px;
+    gap: 16px;
+    background-color: rgba(0,0,0,0.2);
+}
+
+.modalClose {
+    grid-area: close;
 }
 
 .modalZoom {
-  left: 10px;
+    grid-area: zoom;
-  right: auto;
+}
+
+.modalTileImage {
+    grid-area: tile;
+}
+
+.modalClose, 
+.modalZoom {
+  color: white;
+  font-size: 35px;
+  font-weight: bold;
+  cursor: pointer;
 }
 
 .modalClose:hover,