From 80a2acb0230dd77489b0eb466f2efe827a053f6d Mon Sep 17 00:00:00 2001
From: Gerschel <Gerschel_Payne@hotmail.com>
Date: Wed, 8 Feb 2023 10:49:47 -0800
Subject: [PATCH] badge indicator toggles visibility by selection

---
 javascript/aspectRatioSliders.js | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/javascript/aspectRatioSliders.js b/javascript/aspectRatioSliders.js
index 31ad268f150..f8906798dc0 100644
--- a/javascript/aspectRatioSliders.js
+++ b/javascript/aspectRatioSliders.js
@@ -5,12 +5,17 @@ class AspectRatioSliderController {
         this.heightSlider = new SliderComponentController(heightSlider);
         this.ratioSource = new DropdownComponentController(ratioSource);
         this.roundingSource = new CheckboxComponentController(roundingSource);
-        this.roundingMethod = new RadioComponentController(roundingMethod)
+        this.roundingMethod = new RadioComponentController(roundingMethod);
         // Badge implementation
         this.roundingIndicatorBadge = document.createElement("div");
         this.roundingIndicatorBadge.innerText = "📐";
         this.roundingIndicatorBadge.classList.add("rounding-badge");
         this.ratioSource.element.appendChild(this.roundingIndicatorBadge);
+        // Check initial value of ratioSource
+        let initialRatio = this.ratioSource.getVal();
+        if (!initialRatio.includes(":")) {
+            this.roundingIndicatorBadge.style.display = "none";
+        }
         if (this.roundingSource.getVal()) {
             this.roundingIndicatorBadge.classList.add("active");
             this.roundingIndicatorBadge.innerText = "⚠️";
@@ -34,7 +39,16 @@ class AspectRatioSliderController {
         this.widthSlider.childNumField.addEventListener("change", (e) => { e.preventDefault(); this.resize("width"); });
         this.heightSlider.childRangeField.addEventListener("change", (e) => { e.preventDefault(); this.resize("height"); });
         this.heightSlider.childNumField.addEventListener("change", (e) => { e.preventDefault(); this.resize("height"); });
-        this.ratioSource.childSelector.addEventListener("change", (e) => { e.preventDefault(); this.adjustStepSize(); });
+        this.ratioSource.childSelector.addEventListener("change", (e) => {
+            e.preventDefault();
+            if (!this.ratioSource.getVal().includes(":")) {
+                this.roundingIndicatorBadge.style.display = 'none';
+            }
+            else {
+                this.roundingIndicatorBadge.style.display = 'block';
+            }
+            this.adjustStepSize();
+        });
     }
     resize(dimension) {
         //For moving slider or number field
@@ -47,7 +61,7 @@ class AspectRatioSliderController {
         if (dimension == 'width') {
             let newHeight = parseInt(this.widthSlider.getVal()) / ratio;
             if (this.roundingSource.getVal()) {
-                switch (this.roundingMethod.getVal()){
+                switch (this.roundingMethod.getVal()) {
                     case 'Round':
                         newHeight = Math.round(newHeight / 8) * 8;
                         break;
@@ -64,7 +78,7 @@ class AspectRatioSliderController {
         else if (dimension == "height") {
             let newWidth = parseInt(this.heightSlider.getVal()) * ratio;
             if (this.roundingSource.getVal()) {
-                switch (this.roundingMethod.getVal()){
+                switch (this.roundingMethod.getVal()) {
                     case 'Round':
                         newWidth = Math.round(newWidth / 8) * 8;
                         break;
@@ -148,7 +162,7 @@ class AspectRatioSliderController {
             let ratioSource = document.querySelector("gradio-app").shadowRoot.getElementById(ratioSourceId);
             let roundingSource = document.querySelector("gradio-app").shadowRoot.getElementById(roundingSourceId);
             let roundingMethod = document.querySelector("gradio-app").shadowRoot.getElementById(roundingMethodId);
-            if (widthSlider && heightSlider && ratioSource && roundingSource) {
+            if (widthSlider && heightSlider && ratioSource && roundingSource && roundingMethod) {
                 observer.disconnect();
                 new AspectRatioSliderController(widthSlider, heightSlider, ratioSource, roundingSource, roundingMethod);
             }