From d5ecf56f8ee723511e301f436a4ffc73459a9281 Mon Sep 17 00:00:00 2001
From: Connum <connum@gmail.com>
Date: Sat, 24 Sep 2022 01:12:13 +0200
Subject: [PATCH] make callback queue handling reusable and implement
 onUiTabChange()

---
 script.js | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/script.js b/script.js
index a1b93ae9..7f26e23b 100644
--- a/script.js
+++ b/script.js
@@ -2,24 +2,40 @@ function gradioApp(){
     return document.getElementsByTagName('gradio-app')[0].shadowRoot;
 }
 
+function get_uiCurrentTab() {
+    return gradioApp().querySelector('.tabs button:not(.border-transparent)')
+}
+
 uiUpdateCallbacks = []
+uiTabChangeCallbacks = []
+let uiCurrentTab = null
+
 function onUiUpdate(callback){
     uiUpdateCallbacks.push(callback)
 }
+function onUiTabChange(callback){
+    uiTabChangeCallbacks.push(callback)
+}
 
-function uiUpdate(root){
-	uiUpdateCallbacks.forEach(function(x){
-        try {
-            x()
-        } catch (e) {
-            (console.error || console.log).call(console, e.message, e);
-        }
-	})
+function runCallback(x){
+    try {
+        x()
+    } catch (e) {
+        (console.error || console.log).call(console, e.message, e);
+    }
+}
+function executeCallbacks(queue) {
+    queue.forEach(runCallback)
 }
 
 document.addEventListener("DOMContentLoaded", function() {
     var mutationObserver = new MutationObserver(function(m){
-        uiUpdate(gradioApp());
+        executeCallbacks(uiUpdateCallbacks);
+        const newTab = get_uiCurrentTab();
+        if ( newTab && ( newTab !== uiCurrentTab ) ) {
+            uiCurrentTab = newTab;
+            executeCallbacks(uiTabChangeCallbacks);
+        }
     });
     mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
 });