Refactoring of HTML elements class toggling

Sankeyfactory · Sep 9, 2024 · 3c90805 · 3c90805
1 parent f102e0e
commit 3c90805
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 161 deletions.
diff --git a/src/ContextMenu/CustomContextMenu.ts b/src/ContextMenu/CustomContextMenu.ts
@@ -1,3 +1,4 @@
+import { HtmlUtils } from "../DomUtils/HtmlUtils";
 import { Point } from "../Geometry/Point";
 
 export abstract class CustomContextMenu extends EventTarget
@@ -119,14 +120,7 @@ export abstract class CustomContextMenu extends EventTarget
 
     protected static setSwitchState(switchNode: HTMLElement, enabled: boolean)
     {
-        if (enabled)
-        {
-            switchNode.classList.add("enabled");
-        }
-        else
-        {
-            switchNode.classList.remove("enabled");
-        }
+        HtmlUtils.toggleClass(switchNode, "enabled", enabled);
     }
 
     private _menuContainer: HTMLDivElement;

diff --git a/src/DataSaves/SavesLoaderMenu.ts b/src/DataSaves/SavesLoaderMenu.ts
@@ -34,14 +34,11 @@ export class SavesLoaderMenu
 
         let updateSelectedState = () =>
         {
-            if (AppData.instance.currentPlanName === "")
-            {
-                this._nonePlanSelector.classList.add("selected");
-            }
-            else
-            {
-                this._nonePlanSelector.classList.remove("selected");
-            }
+            HtmlUtils.toggleClass(
+                this._nonePlanSelector,
+                "selected",
+                AppData.instance.currentPlanName === ""
+            );
         };
 
         updateSelectedState();
@@ -165,15 +162,15 @@ export class SavesLoaderMenu
         {
             let planName = AppData.instance.currentPlanName;
 
+            HtmlUtils.toggleClass(loadedPlanNameElement, "placeholder", planName === "");
+
             if (planName === "")
             {
                 loadedPlanNameElement.innerText = "Load plan";
-                loadedPlanNameElement.classList.add("placeholder");
             }
             else
             {
                 loadedPlanNameElement.innerText = planName;
-                loadedPlanNameElement.classList.remove("placeholder");
             }
         };
 
@@ -221,14 +218,7 @@ export class SavesLoaderMenu
 
         let updateSelectedState = () =>
         {
-            if (name === AppData.instance.currentPlanName)
-            {
-                planSelector.classList.add("selected");
-            }
-            else
-            {
-                planSelector.classList.remove("selected");
-            }
+            HtmlUtils.toggleClass(planSelector, "selected", name === AppData.instance.currentPlanName);
         };
 
         updateSelectedState();

diff --git a/src/DomUtils/HtmlUtils.ts b/src/DomUtils/HtmlUtils.ts
@@ -12,5 +12,17 @@ export class HtmlUtils
         return element;
     }
 
+    public static toggleClass(element: Element, className: string, toggleOn: boolean)
+    {
+        if (toggleOn)
+        {
+            element.classList.add(className);
+        }
+        else
+        {
+            element.classList.remove(className);
+        }
+    }
+
     private constructor() { }
 }
diff --git a/src/RecipeSelectionModal.ts b/src/RecipeSelectionModal.ts
@@ -380,43 +380,34 @@ export class RecipeSelectionModal extends EventTarget
 
         this._selectedRecipePowerText.innerText = `${this._selectedRecipe.madeIn.powerConsumption} MW`;
 
-        if (this._selectedRecipe.madeIn.powerConsumption === 0)
-        {
-            this._selectedRecipePower.classList.add("hidden");
-        }
-        else
-        {
-            this._selectedRecipePower.classList.remove("hidden");
-        }
+        HtmlUtils.toggleClass(
+            this._selectedRecipePower,
+            "hidden",
+            this._selectedRecipe.madeIn.powerConsumption === 0
+        );
+
+        HtmlUtils.toggleClass(
+            this._selectedRecipeProducedPower,
+            "hidden",
+            this._selectedRecipe.recipe.producedPower == undefined
+        );
 
         if (this._selectedRecipe.recipe.producedPower != undefined)
         {
-            this._selectedRecipeProducedPower.classList.remove("hidden");
-
             this._selectedRecipeProducedPowerText.innerText = `${this._selectedRecipe.recipe.producedPower}`;
         }
-        else
-        {
-            this._selectedRecipeProducedPower.classList.add("hidden");
-        }
 
-        if (this._selectedRecipe.recipe.ingredients.length === 0)
-        {
-            this._selectedRecipeInput.classList.add("hidden");
-        }
-        else
-        {
-            this._selectedRecipeInput.classList.remove("hidden");
-        }
+        HtmlUtils.toggleClass(
+            this._selectedRecipeInput,
+            "hidden",
+            this._selectedRecipe.recipe.ingredients.length === 0
+        );
 
-        if (this._selectedRecipe.recipe.products.length === 0)
-        {
-            this._selectedRecipeOutput.classList.add("hidden");
-        }
-        else
-        {
-            this._selectedRecipeOutput.classList.remove("hidden");
-        }
+        HtmlUtils.toggleClass(
+            this._selectedRecipeOutput,
+            "hidden",
+            this._selectedRecipe.recipe.products.length === 0
+        );
 
         this._selectedRecipeDisplay.classList.remove("hidden");
 
@@ -515,14 +506,7 @@ export class RecipeSelectionModal extends EventTarget
         flagElement: HTMLDivElement
     ): void
     {
-        if (this._searchFlags[flag])
-        {
-            flagElement.classList.add("checked");
-        }
-        else
-        {
-            flagElement.classList.remove("checked");
-        }
+        HtmlUtils.toggleClass(flagElement, "checked", this._searchFlags[flag]);
 
         this.searchRecipes(this._searchInputField.value);
     };

diff --git a/src/ResourcesSummary.ts b/src/ResourcesSummary.ts
@@ -230,14 +230,7 @@ export class ResourcesSummary
 
     private static setCollapsingAnimationEnabled(enabled: boolean)
     {
-        if (enabled)
-        {
-            this._summaryContainer.classList.add("animate-collapsing");
-        }
-        else
-        {
-            this._summaryContainer.classList.remove("animate-collapsing");
-        }
+        HtmlUtils.toggleClass(this._summaryContainer, "animate-collapsing", enabled);
     }
 
     private _isCollapsed = false;

diff --git a/src/Sankey/NodeConfiguration/ConfiguratorBuilder.ts b/src/Sankey/NodeConfiguration/ConfiguratorBuilder.ts
@@ -48,15 +48,13 @@ export class ConfiguratorBuilder
         {
             let value = ConfiguratorBuilder.numberParser(this._inputElement.value);
 
-            if (value != undefined && meetsTheMinimum(value) && meetsTheMaximum(value))
-            {
-                this._inputElement.classList.remove("error");
+            let isInputWrong = value == undefined || !meetsTheMinimum(value) || !meetsTheMaximum(value);
 
-                this._relatedPropertySetter!(toFixed(value));
-            }
-            else
+            HtmlUtils.toggleClass(this._inputElement, "error", isInputWrong);
+
+            if (!isInputWrong)
             {
-                this._inputElement.classList.add("error");
+                this._relatedPropertySetter!(toFixed(value!));
             }
         });
 

diff --git a/src/Sankey/NodeConfiguration/NodeConfiguration.ts b/src/Sankey/NodeConfiguration/NodeConfiguration.ts
@@ -1,3 +1,4 @@
+import { HtmlUtils } from '../../DomUtils/HtmlUtils';
 import { loadSatisfactoryResource, overclockPower, toItemsInMinute } from '../../GameData/GameData';
 import { GameMachine } from "../../GameData/GameMachine";
 import { GameRecipe } from "../../GameData/GameRecipe";
@@ -121,14 +122,11 @@ export class NodeConfiguration extends EventTarget
             this._amountConfigurators.powerConfigurator!
         );
 
-        if (this._amountConfigurators.outputsConfigurators.length === 0)
-        {
-            NodeConfiguration._amountOutputsColumn.classList.add("hidden");
-        }
-        else
-        {
-            NodeConfiguration._amountOutputsColumn.classList.remove("hidden");
-        }
+        HtmlUtils.toggleClass(
+            NodeConfiguration._amountOutputsColumn,
+            "hidden",
+            this._amountConfigurators.outputsConfigurators.length === 0
+        );
 
         /* Overclock group */
 
@@ -147,14 +145,11 @@ export class NodeConfiguration extends EventTarget
             this._overclockConfigurators.powerConfigurator!
         );
 
-        if (this._overclockConfigurators.outputsConfigurators.length === 0)
-        {
-            NodeConfiguration._overclockOutputsColumn.classList.add("hidden");
-        }
-        else
-        {
-            NodeConfiguration._overclockOutputsColumn.classList.remove("hidden");
-        }
+        HtmlUtils.toggleClass(
+            NodeConfiguration._overclockOutputsColumn,
+            "hidden",
+            this._overclockConfigurators.outputsConfigurators.length === 0
+        );
 
         /* Modal window */
 
@@ -320,30 +315,24 @@ export class NodeConfiguration extends EventTarget
     {
         if (this._isOpened)
         {
-            if (this.machinesAmount !== this._openingMachinesAmount
-                || this.overclockRatio !== this._openingOverclockRatio)
-            {
-                NodeConfiguration._restoreButton.classList.remove("disabled");
-            }
-            else
-            {
-                NodeConfiguration._restoreButton.classList.add("disabled");
-            }
+            HtmlUtils.toggleClass(
+                NodeConfiguration._restoreButton,
+                "disabled",
+                this.machinesAmount === this._openingMachinesAmount
+                && this.overclockRatio === this._openingOverclockRatio
+            );
         }
     }
 
     private updateResetButton() 
     {
         if (this._isOpened)
         {
-            if (this.machinesAmount !== 1 || this.overclockRatio !== 1)
-            {
-                NodeConfiguration._resetButton.classList.remove("disabled");
-            }
-            else
-            {
-                NodeConfiguration._resetButton.classList.add("disabled");
-            }
+            HtmlUtils.toggleClass(
+                NodeConfiguration._resetButton,
+                "disabled",
+                this.machinesAmount === 1 && this.overclockRatio === 1
+            );
         }
     }
 

diff --git a/src/Sankey/SankeyLink.ts b/src/Sankey/SankeyLink.ts
@@ -82,18 +82,9 @@ export class SankeyLink
         {
             if (!contextMenu.isMenuOpened)
             {
-                if (select)
-                {
-                    this._svgPath.classList.add("selected");
-                    firstSlot.slotSvgRect.classList.add("selected");
-                    secondSlot.slotSvgRect.classList.add("selected");
-                }
-                else
-                {
-                    this._svgPath.classList.remove("selected");
-                    firstSlot.slotSvgRect.classList.remove("selected");
-                    secondSlot.slotSvgRect.classList.remove("selected");
-                }
+                HtmlUtils.toggleClass(this._svgPath, "selected", select);
+                HtmlUtils.toggleClass(firstSlot.slotSvgRect, "selected", select);
+                HtmlUtils.toggleClass(secondSlot.slotSvgRect, "selected", select);
             }
         };
 

diff --git a/src/Sankey/Slots/SlotResourcesDisplay.ts b/src/Sankey/Slots/SlotResourcesDisplay.ts
@@ -65,16 +65,11 @@ export class SlotResourcesDisplay
 
             if (resource != undefined)
             {
-                if (resource.id === this._relatedSlot.resourceId && resource.type !== this._type)
-                {
-                    this._resourcesDisplay.classList.add("correct");
-                    this._resourcesDisplay.classList.remove("wrong");
-                }
-                else 
-                {
-                    this._resourcesDisplay.classList.add("wrong");
-                    this._resourcesDisplay.classList.remove("correct");
-                }
+                const isThisResourceSuitable =
+                    resource.id === this._relatedSlot.resourceId && resource.type !== this._type;
+
+                HtmlUtils.toggleClass(this._resourcesDisplay, "correct", isThisResourceSuitable);
+                HtmlUtils.toggleClass(this._resourcesDisplay, "wrong", !isThisResourceSuitable);
             }
         });
     }
@@ -83,14 +78,10 @@ export class SlotResourcesDisplay
     {
         let resourcesAmount = +this._relatedSlot.resourcesAmount.toFixed(3);
 
-        if (resourcesAmount === 0)
-        {
-            this._resourcesDisplay.classList.add("hidden");
-        }
-        else
-        {
-            this._resourcesDisplay.classList.remove("hidden");
+        HtmlUtils.toggleClass(this._resourcesDisplay, "hidden", resourcesAmount === 0);
 
+        if (resourcesAmount > 0)
+        {
             let zoomScale = Math.max(
                 SlotResourcesDisplay._minZoomMultiplier,
                 Math.min(SlotResourcesDisplay._maxZoomMultiplier, Settings.instance.zoom)