Merge branch 'dev' into text-drag-fix

1 files changed, 111 insertions, 115 deletions

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 32066ab8..78e24eb9 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -5,24 +5,24 @@ function closeModal() {
 
 function showModal(event) {
     const source = event.target || event.srcElement;
-    const modalImage = gradioApp().getElementById("modalImage")
-    const lb = gradioApp().getElementById("lightboxModal")
-    modalImage.src = source.src
+    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 = "flex";
-    lb.focus()
+    lb.focus();
 
-    const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
-    const tabImg2Img = gradioApp().getElementById("tab_img2img")
+    const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
+    const tabImg2Img = gradioApp().getElementById("tab_img2img");
     // show the save button in modal only on txt2img or img2img tabs
     if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
-        gradioApp().getElementById("modal_save").style.display = "inline"
+        gradioApp().getElementById("modal_save").style.display = "inline";
     } else {
-        gradioApp().getElementById("modal_save").style.display = "none"
+        gradioApp().getElementById("modal_save").style.display = "none";
     }
-    event.stopPropagation()
+    event.stopPropagation();
 }
 
 function negmod(n, m) {
@@ -30,14 +30,15 @@ function negmod(n, m) {
 }
 
 function updateOnBackgroundChange() {
-    const modalImage = gradioApp().getElementById("modalImage")
+    const modalImage = gradioApp().getElementById("modalImage");
     if (modalImage && modalImage.offsetParent) {
         let currentButton = selected_gallery_button();
 
         if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
             modalImage.src = currentButton.children[0].src;
             if (modalImage.style.display === 'none') {
-                modal.style.setProperty('background-image', `url(${modalImage.src})`)
+                const modal = gradioApp().getElementById("lightboxModal");
+                modal.style.setProperty('background-image', `url(${modalImage.src})`);
             }
         }
     }
@@ -49,108 +50,109 @@ function modalImageSwitch(offset) {
     if (galleryButtons.length > 1) {
         var currentButton = selected_gallery_button();
 
-        var result = -1
+        var result = -1;
         galleryButtons.forEach(function(v, i) {
             if (v == currentButton) {
-                result = i
+                result = i;
             }
-        })
+        });
 
         if (result != -1) {
-            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
-            nextButton.click()
+            var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
+            nextButton.click();
             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})`)
+                modal.style.setProperty('background-image', `url(${modalImage.src})`);
             }
             setTimeout(function() {
-                modal.focus()
-            }, 10)
+                modal.focus();
+            }, 10);
         }
     }
 }
 
-function saveImage(){
-    const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
-    const tabImg2Img = gradioApp().getElementById("tab_img2img")
-    const saveTxt2Img = "save_txt2img"
-    const saveImg2Img = "save_img2img"
+function saveImage() {
+    const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
+    const tabImg2Img = gradioApp().getElementById("tab_img2img");
+    const saveTxt2Img = "save_txt2img";
+    const saveImg2Img = "save_img2img";
     if (tabTxt2Img.style.display != "none") {
-        gradioApp().getElementById(saveTxt2Img).click()
+        gradioApp().getElementById(saveTxt2Img).click();
     } else if (tabImg2Img.style.display != "none") {
-        gradioApp().getElementById(saveImg2Img).click()
+        gradioApp().getElementById(saveImg2Img).click();
     } else {
-        console.error("missing implementation for saving modal of this type")
+        console.error("missing implementation for saving modal of this type");
     }
 }
 
 function modalSaveImage(event) {
-    saveImage()
-    event.stopPropagation()
+    saveImage();
+    event.stopPropagation();
 }
 
 function modalNextImage(event) {
-    modalImageSwitch(1)
-    event.stopPropagation()
+    modalImageSwitch(1);
+    event.stopPropagation();
 }
 
 function modalPrevImage(event) {
-    modalImageSwitch(-1)
-    event.stopPropagation()
+    modalImageSwitch(-1);
+    event.stopPropagation();
 }
 
 function modalKeyHandler(event) {
     switch (event.key) {
-        case "s":
-            saveImage()
-            break;
-        case "ArrowLeft":
-            modalPrevImage(event)
-            break;
-        case "ArrowRight":
-            modalNextImage(event)
-            break;
-        case "Escape":
-            closeModal();
-            break;
+    case "s":
+        saveImage();
+        break;
+    case "ArrowLeft":
+        modalPrevImage(event);
+        break;
+    case "ArrowRight":
+        modalNextImage(event);
+        break;
+    case "Escape":
+        closeModal();
+        break;
     }
 }
 
 function setupImageForLightbox(e) {
-	if (e.dataset.modded)
-		return;
+    if (e.dataset.modded) {
+        return;
+    }
 
-	e.dataset.modded = true;
-	e.style.cursor='pointer'
-	e.style.userSelect='none'
+    e.dataset.modded = true;
+    e.style.cursor = 'pointer';
+    e.style.userSelect = 'none';
 
-	var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+    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'
+    // 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;
+    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);
+        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
+        evt.preventDefault();
+        showModal(evt);
+    }, true);
 
 }
 
 function modalZoomSet(modalImage, enable) {
-    if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
+    if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
 }
 
 function modalZoomToggle(event) {
     var modalImage = gradioApp().getElementById("modalImage");
-    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
-    event.stopPropagation()
+    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
+    event.stopPropagation();
 }
 
 function modalTileImageToggle(event) {
@@ -159,99 +161,93 @@ function modalTileImageToggle(event) {
     const isTiling = modalImage.style.display === 'none';
     if (isTiling) {
         modalImage.style.display = 'block';
-        modal.style.setProperty('background-image', 'none')
+        modal.style.setProperty('background-image', 'none');
     } else {
         modalImage.style.display = 'none';
-        modal.style.setProperty('background-image', `url(${modalImage.src})`)
+        modal.style.setProperty('background-image', `url(${modalImage.src})`);
     }
 
-    event.stopPropagation()
-}
-
-function galleryImageHandler(e) {
-    //if (e && e.parentElement.tagName == 'BUTTON') {
-        e.onclick = showGalleryImage;
-    //}
+    event.stopPropagation();
 }
 
 onUiUpdate(function() {
-    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
+    var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
     if (fullImg_preview != null) {
         fullImg_preview.forEach(setupImageForLightbox);
     }
     updateOnBackgroundChange();
-})
+});
 
 document.addEventListener("DOMContentLoaded", function() {
     //const modalFragment = document.createDocumentFragment();
-    const modal = document.createElement('div')
+    const modal = document.createElement('div');
     modal.onclick = closeModal;
     modal.id = "lightboxModal";
-    modal.tabIndex = 0
-    modal.addEventListener('keydown', modalKeyHandler, true)
+    modal.tabIndex = 0;
+    modal.addEventListener('keydown', modalKeyHandler, true);
 
-    const modalControls = document.createElement('div')
+    const modalControls = document.createElement('div');
     modalControls.className = 'modalControls gradio-container';
     modal.append(modalControls);
 
-    const modalZoom = document.createElement('span')
+    const modalZoom = document.createElement('span');
     modalZoom.className = 'modalZoom cursor';
-    modalZoom.innerHTML = '⤡'
-    modalZoom.addEventListener('click', modalZoomToggle, true)
+    modalZoom.innerHTML = '⤡';
+    modalZoom.addEventListener('click', modalZoomToggle, true);
     modalZoom.title = "Toggle zoomed view";
-    modalControls.appendChild(modalZoom)
+    modalControls.appendChild(modalZoom);
 
-    const modalTileImage = document.createElement('span')
+    const modalTileImage = document.createElement('span');
     modalTileImage.className = 'modalTileImage cursor';
-    modalTileImage.innerHTML = '⊞'
-    modalTileImage.addEventListener('click', modalTileImageToggle, true)
+    modalTileImage.innerHTML = '⊞';
+    modalTileImage.addEventListener('click', modalTileImageToggle, true);
     modalTileImage.title = "Preview tiling";
-    modalControls.appendChild(modalTileImage)
+    modalControls.appendChild(modalTileImage);
 
-    const modalSave = document.createElement("span")
-    modalSave.className = "modalSave cursor"
-    modalSave.id = "modal_save"
-    modalSave.innerHTML = "🖫"
-    modalSave.addEventListener("click", modalSaveImage, true)
-    modalSave.title = "Save Image(s)"
-    modalControls.appendChild(modalSave)
+    const modalSave = document.createElement("span");
+    modalSave.className = "modalSave cursor";
+    modalSave.id = "modal_save";
+    modalSave.innerHTML = "🖫";
+    modalSave.addEventListener("click", modalSaveImage, true);
+    modalSave.title = "Save Image(s)";
+    modalControls.appendChild(modalSave);
 
-    const modalClose = document.createElement('span')
+    const modalClose = document.createElement('span');
     modalClose.className = 'modalClose cursor';
-    modalClose.innerHTML = '×'
+    modalClose.innerHTML = '×';
     modalClose.onclick = closeModal;
     modalClose.title = "Close image viewer";
-    modalControls.appendChild(modalClose)
+    modalControls.appendChild(modalClose);
 
-    const modalImage = document.createElement('img')
+    const modalImage = document.createElement('img');
     modalImage.id = 'modalImage';
     modalImage.onclick = closeModal;
-    modalImage.tabIndex = 0
-    modalImage.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalImage)
+    modalImage.tabIndex = 0;
+    modalImage.addEventListener('keydown', modalKeyHandler, true);
+    modal.appendChild(modalImage);
 
-    const modalPrev = document.createElement('a')
+    const modalPrev = document.createElement('a');
     modalPrev.className = 'modalPrev';
-    modalPrev.innerHTML = '❮'
-    modalPrev.tabIndex = 0
+    modalPrev.innerHTML = '❮';
+    modalPrev.tabIndex = 0;
     modalPrev.addEventListener('click', modalPrevImage, true);
-    modalPrev.addEventListener('keydown', modalKeyHandler, true)
-    modal.appendChild(modalPrev)
+    modalPrev.addEventListener('keydown', modalKeyHandler, true);
+    modal.appendChild(modalPrev);
 
-    const modalNext = document.createElement('a')
+    const modalNext = document.createElement('a');
     modalNext.className = 'modalNext';
-    modalNext.innerHTML = '❯'
-    modalNext.tabIndex = 0
+    modalNext.innerHTML = '❯';
+    modalNext.tabIndex = 0;
     modalNext.addEventListener('click', modalNextImage, true);
-    modalNext.addEventListener('keydown', modalKeyHandler, true)
+    modalNext.addEventListener('keydown', modalKeyHandler, true);
 
-    modal.appendChild(modalNext)
+    modal.appendChild(modalNext);
 
     try {
-		gradioApp().appendChild(modal);
-	} catch (e) {
-		gradioApp().body.appendChild(modal);
-	}
+        gradioApp().appendChild(modal);
+    } catch (e) {
+        gradioApp().body.appendChild(modal);
+    }
 
     document.body.appendChild(modal);