From c4cc11b3989fd52de2912871d25202001ca3839c Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Sun, 26 Feb 2023 14:21:16 +0200
Subject: [PATCH] Fix reflow with js

---
 javascript/ui.js | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index 931a2252..ac1a6342 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -459,24 +459,24 @@ onUiUpdate(function(){
 	
 	// livePreview contain - scale
 	function imagePreviewFitMethod(value) {
-       styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}";
-	   updateOpStyles();
+       styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}"; 
 	}	
 	gradioApp().querySelector("#setting_live_preview_image_fit").addEventListener('click', function (e) {
 		if (e.target && e.target.matches("input[type='radio']")) {
-			imagePreviewFitMethod(e.target.value.toLowerCase());			
+			imagePreviewFitMethod(e.target.value.toLowerCase());	
+			updateOpStyles();			
 		}
 	})
 	imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());
 	
 	// viewports order left - right
 	function viewportOrder(value) {
-       styleobj.ui_views_order = "[id$=_prompt_image] + div {flex-direction:" + value + ";}";
-	   updateOpStyles();
+       styleobj.ui_views_order = "[id$=_prompt_image] + div {flex-direction:" + value + ";}";	   
 	}
 	gradioApp().querySelector("#setting_ui_views_order").addEventListener('click', function (e) {
 		if (e.target && e.target.matches("input[type='radio']")) {
-			viewportOrder(e.target.value.toLowerCase());			
+			viewportOrder(e.target.value.toLowerCase());
+			updateOpStyles();			
 		}
 	})
 	viewportOrder(opts.ui_views_order.toLowerCase());
@@ -511,23 +511,23 @@ onUiUpdate(function(){
 	extra_networks_visibility(opts.extra_networks_default_visibility);
 	
 	function extra_networks_card_size(value) {
-       styleobj.extra_networks_card_size = ":host{--extra-networks-card-size:" + value + ";}";
-	   updateOpStyles();
+       styleobj.extra_networks_card_size = ":host{--extra-networks-card-size:" + value + ";}";  
 	}
 	gradioApp().querySelectorAll("#setting_extra_networks_cards_size input").forEach(function (elem){
 		elem.addEventListener('input', function (e) {		
 			extra_networks_card_size(e.target.value);
+			updateOpStyles();
 		})	
 	})
 	extra_networks_card_size(opts.extra_networks_cards_size);
 	
 	function extra_networks_cards_visible_rows(value) {		
        styleobj.extra_networks_cards_visible_rows = ":host{--extra-networks-visible-rows:" + value + ";}";
-	   updateOpStyles();
 	}
 	gradioApp().querySelectorAll("#setting_extra_networks_cards_visible_rows input").forEach(function (elem){
 		elem.addEventListener('input', function (e) {		
 			extra_networks_cards_visible_rows(e.target.value);
+			updateOpStyles();
 		})		
 	})
 	extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows);
@@ -556,7 +556,7 @@ onUiUpdate(function(){
 		Object.defineProperty(iEvent, "target", {value: setting_ui_hidden_tabs})		
 		setting_ui_hidden_tabs.dispatchEvent(iEvent);
 		
-		updateOpStyles();
+		//updateOpStyles();
 	}
 	
 	gradioApp().querySelectorAll('#tabs > div > button').forEach(function (elem) {
@@ -585,7 +585,8 @@ onUiUpdate(function(){
 			}else{				
 				styletabs[tabvalue] = false;
 			}
-			tabsHiddenNthMarkup();	
+			tabsHiddenNthMarkup();
+			updateOpStyles();
 		}
 	})
 	
@@ -611,8 +612,6 @@ onUiUpdate(function(){
 		Object.defineProperty(cEvent, "target", {value: settings_submit})		
 		settings_submit.dispatchEvent(cEvent);
 		//settings_submit.click();
-
-		
 		//console.log(id + " - " + checked);
 			
 	}
@@ -624,6 +623,8 @@ onUiUpdate(function(){
 		})
 	})
 	
+	updateOpStyles();
+	
 
 	/* anapnoe ui end */