Add logic for zoom toggle

1 files changed, 21 insertions, 4 deletions

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 880f1183..c04cde34 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -80,6 +80,17 @@ function showGalleryImage(){
     }, 100);
 }
 
+function modalZoomToggle(event){
+    modalImage = gradioApp().getElementById("modalImage");
+    console.log(modalImage)
+    if( !modalImage.classList.contains('modalImageFullscreen') ){
+        modalImage.classList.add('modalImageFullscreen');
+    }else{
+        modalImage.classList.remove('modalImageFullscreen');
+    }
+    event.stopPropagation()
+}
+
 function galleryImageHandler(e){
     if(e && e.parentElement.tagName == 'BUTTON'){
         e.onclick = showGalleryImage;
@@ -97,16 +108,22 @@ document.addEventListener("DOMContentLoaded", function() {
     const modalFragment = document.createDocumentFragment();
     const modal = document.createElement('div')
     modal.onclick = closeModal;
-    
+    modal.id = "lightboxModal";
+    modal.tabIndex=0
+    modal.addEventListener('keydown', modalKeyHandler, true)
+
     const modalClose = document.createElement('span')
     modalClose.className = 'modalClose cursor';
     modalClose.innerHTML = '×'
     modalClose.onclick = closeModal;
-    modal.id = "lightboxModal";
-    modal.tabIndex=0
-    modal.addEventListener('keydown', modalKeyHandler, true)
     modal.appendChild(modalClose)
 
+    const modalZoom = document.createElement('span')
+    modalZoom.className = 'modalZoom cursor';
+    modalZoom.innerHTML = '⤡'
+    modalZoom.addEventListener('click', modalZoomToggle, true)
+    modal.appendChild(modalZoom)
+
     const modalImage = document.createElement('img')
     modalImage.id = 'modalImage';
     modalImage.onclick = closeModal;