From b98740129c435f04a060369bd071fc4bafe021f5 Mon Sep 17 00:00:00 2001
From: Liam <liamthekerr@gmail.com>
Date: Thu, 10 Nov 2022 13:07:41 -0500
Subject: [PATCH] added event listener for the image gallery modal; moved js to
 separate file

---
 javascript/generationParams.js | 33 +++++++++++++++++++++++++++++++++
 javascript/ui.js               | 10 +---------
 modules/ui.py                  |  2 ++
 3 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 javascript/generationParams.js

diff --git a/javascript/generationParams.js b/javascript/generationParams.js
new file mode 100644
index 00000000..95f05093
--- /dev/null
+++ b/javascript/generationParams.js
@@ -0,0 +1,33 @@
+// attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
+
+let txt2img_gallery, img2img_gallery, modal = undefined;
+onUiUpdate(function(){
+	if (!txt2img_gallery) {
+		txt2img_gallery = attachGalleryListeners("txt2img")
+	}
+	if (!img2img_gallery) {
+		img2img_gallery = attachGalleryListeners("img2img")
+	}
+	if (!modal) {
+		modal = gradioApp().getElementById('lightboxModal')
+		modalObserver.observe(modal,  { attributes : true, attributeFilter : ['style'] });
+	}
+});
+
+let modalObserver = new MutationObserver(function(mutations) {
+	mutations.forEach(function(mutationRecord) {
+		let selectedTab = gradioApp().querySelector('#tabs div button.bg-white')?.innerText
+		if (mutationRecord.target.style.display === 'none' && selectedTab === 'txt2img' || selectedTab === 'img2img')
+			gradioApp().getElementById(selectedTab+"_generation_info_button").click()
+	});
+});
+
+function attachGalleryListeners(tab_name) {
+	gallery = gradioApp().querySelector('#'+tab_name+'_gallery')
+	gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click());
+	gallery?.addEventListener('keydown', (e) => {
+		if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow
+			gradioApp().getElementById(tab_name+"_generation_info_button").click()
+	});
+	return gallery;
+}
diff --git a/javascript/ui.js b/javascript/ui.js
index 443d1642..95cfd106 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -179,17 +179,9 @@ onUiUpdate(function(){
 		img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea");
 		img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button"));
 	}
-	if (!txt2img_gallery) {
-		txt2img_gallery = gradioApp().querySelector('#txt2img_gallery')
-		txt2img_gallery?.addEventListener('click', () => gradioApp().getElementById("txt2img_generation_info_button").click());
-	}
-	if (!img2img_gallery) {
-		img2img_gallery = gradioApp().querySelector('#img2img_gallery')
-		img2img_gallery?.addEventListener('click', () => gradioApp().getElementById("img2img_generation_info_button").click());
-	}
 })
 
-let txt2img_textarea, img2img_textarea, txt2img_gallery, img2img_gallery = undefined;
+let txt2img_textarea, img2img_textarea = undefined;
 let wait_time = 800
 let token_timeout;
 
diff --git a/modules/ui.py b/modules/ui.py
index 756499d1..5dce7f3b 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -570,6 +570,8 @@ def update_generation_info(args):
     generation_info, html_info, img_index = args
     try:
         generation_info = json.loads(generation_info)
+        if img_index < 0 or img_index >= len(generation_info["infotexts"]):
+            return html_info
         return plaintext_to_html(generation_info["infotexts"][img_index])
     except Exception:
         pass