From 775fa7696b90f0a41852fee604655d4b19de3c4a Mon Sep 17 00:00:00 2001
From: w-e-w <40751091+w-e-w@users.noreply.github.com>
Date: Fri, 21 Jun 2024 20:26:09 +0900
Subject: [PATCH] ToggleLivePriview in image viewer

---
 javascript/imageviewer.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index a3f08ad16..9b23f4700 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -6,6 +6,8 @@ function closeModal() {
 function showModal(event) {
     const source = event.target || event.srcElement;
     const modalImage = gradioApp().getElementById("modalImage");
+    const modalToggleLivePreviewBtn = gradioApp().getElementById("modal_toggle_live_preview");
+    modalToggleLivePreviewBtn.innerHTML = opts.js_live_preview_in_modal_lightbox ? "&#x1F5C7;" : "&#x1F5C6;";
     const lb = gradioApp().getElementById("lightboxModal");
     modalImage.src = source.src;
     if (modalImage.style.display === 'none') {
@@ -152,6 +154,13 @@ function modalZoomToggle(event) {
     event.stopPropagation();
 }
 
+function modalLivePreviewToggle(event) {
+    const modalToggleLivePreview = gradioApp().getElementById("modal_toggle_live_preview");
+    opts.js_live_preview_in_modal_lightbox = !opts.js_live_preview_in_modal_lightbox;
+    modalToggleLivePreview.innerHTML = opts.js_live_preview_in_modal_lightbox ? "&#x1F5C7;" : "&#x1F5C6;";
+    event.stopPropagation();
+}
+
 function modalTileImageToggle(event) {
     const modalImage = gradioApp().getElementById("modalImage");
     const modal = gradioApp().getElementById("lightboxModal");
@@ -209,6 +218,14 @@ document.addEventListener("DOMContentLoaded", function() {
     modalSave.title = "Save Image(s)";
     modalControls.appendChild(modalSave);
 
+    const modalToggleLivePreview = document.createElement('span');
+    modalToggleLivePreview.className = 'modalToggleLivePreview cursor';
+    modalToggleLivePreview.id = "modal_toggle_live_preview";
+    modalToggleLivePreview.innerHTML = "&#x1F5C6;";
+    modalToggleLivePreview.onclick = modalLivePreviewToggle;
+    modalToggleLivePreview.title = "Toggle live preview";
+    modalControls.appendChild(modalToggleLivePreview);
+
     const modalClose = document.createElement('span');
     modalClose.className = 'modalClose cursor';
     modalClose.innerHTML = '&times;';