Changes the way the custom property and default value information is …

…stored in the global config, simplifying the way data is access in the ThemeConfig class. This should also be more robust as we no longer rely on indices.
anvil-vtt · Jul 16, 2021 · 6ecdb06 · 6ecdb06
1 parent 819d9c2
commit 6ecdb06
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -42,10 +42,11 @@ export interface FatexConfig {
 
     global: {
         useMarkdown: boolean;
-        defaultStyles: {
-            [key: string]: string;
-        };
-        customProperties: string[]
+        styles: {
+            name: string;
+            customProperty: string;
+            defaultValue: string;
+        }[];
     };
 }
 
@@ -77,19 +78,32 @@ export const FateX: FatexConfig = {
     },
     global: {
         useMarkdown: false,
-        defaultStyles: {
-            headerBackgroundColor: "#2f3542",
-            headerTextColor: "#ffffff",
-            primarySheetColor: "#2f3542",
-            scrollbarColor: "#2f3542",
-            sheetBackgroundColor: "#f1f2f6"
-        },
-        customProperties: [
-            "--fatex-header-color",
-            "--fatex-header-text-color",
-            "--fatex-primary-color",
-            "--fatex-scrollbar-color",
-            "--fatex-sheet-background-color"
+        styles: [
+            {
+                name: "headerBackgroundColor",
+                customProperty: "--fatex-header-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "headerTextColor",
+                customProperty: "--fatex-header-text-color",
+                defaultValue: "#ffffff"
+            },
+            {
+                name: "primarySheetColor",
+                customProperty: "--fatex-primary-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "scrollbarColor",
+                customProperty: "--fatex-scrollbar-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "sheetBackgroundColor",
+                customProperty: "--fatex-sheet-background-color",
+                defaultValue: "#f1f2f6"
+            }
         ]
     }
 };
diff --git a/src/fatex.ts b/src/fatex.ts
@@ -115,13 +115,11 @@ Hooks.once("init", async () => {
 
 Hooks.once("ready", () => {
     // Set user defined CSS custom properties
-    Object.keys(CONFIG.FateX.global.defaultStyles).forEach((component, i) => {
+    CONFIG.FateX.global.styles.forEach(({ name, customProperty }) => {
         // Retrieve the value stored in a user flag is there is one.
-        const value = game?.user?.getFlag("fatex", component) as string | undefined;
+        const value = game?.user?.getFlag("fatex", name) as string | undefined;
 
-        // Look up the name of the custom property using its index and set its value
-        // if there is one. Set the value to "unset" otherwise.
-        $(":root").css(CONFIG.FateX.global.customProperties[i], value ?? "unset");
+        $(":root").css(customProperty, value ?? "unset");
     })
 })
 

diff --git a/src/module/components/Configuration/ThemeConfiguration.ts b/src/module/components/Configuration/ThemeConfiguration.ts
@@ -6,7 +6,7 @@ export class ThemeConfig extends FormApplication {
 
     constructor() {
         super();
-        this.currentStyles = $(":root").css(CONFIG.FateX.global.customProperties);
+        this.currentStyles = $(":root").css(CONFIG.FateX.global.styles.map(x => x.customProperty));
         this.changesSaved = false;
     }
 
@@ -22,15 +22,9 @@ export class ThemeConfig extends FormApplication {
     }
 
     async _updateObject(): Promise<unknown> {
-        const customProperties = CONFIG.FateX.global.customProperties;
-        const componentNames = Object.keys(CONFIG.FateX.global.defaultStyles)
-        const defaultStyleValues = Object.values(CONFIG.FateX.global.defaultStyles);
-
-        customProperties.forEach(async (customProperty, i) => {
+        CONFIG.FateX.global.styles.forEach(async ({ name, customProperty, defaultValue }) => {
             await game.user.setFlag(
-                "fatex",
-                componentNames[i],
-                $(":root").css(customProperty) ?? defaultStyleValues[i]
+                "fatex", name, $(":root").css(customProperty) ?? defaultValue
             );
         })
     }
@@ -45,42 +39,44 @@ export class ThemeConfig extends FormApplication {
     }
 
     getData(options?: Application.RenderOptions): FormApplication.Data<Record<string, unknown>, FormApplication.Options> {
-        const customPropertyValues = Object.values($(":root").css(CONFIG.FateX.global.customProperties));
-        const componentNames = Object.keys(CONFIG.FateX.global.defaultStyles);
+        const customPropertyValues = $(":root").css(CONFIG.FateX.global.styles.map(x => x.customProperty));
 
         // Create a new object where the custom property values are assigned to keys
         // matching the component names used in the templates and default styles config.
-        const customProperties = Object.assign(
-            ...componentNames.map(
-                (componentName, i) => ({ [componentName]: customPropertyValues[i] })
-            )
-        );
+        const customProperties = Object.assign(...CONFIG.FateX.global.styles.map(
+            ({ name, customProperty }) => ({ [name]: customPropertyValues[customProperty] })
+        ));
 
         // Filter out any custom properties which are currently undefined.
         const definedCustomProperties = Object.fromEntries(
             Object.entries(customProperties).filter(([_, value]) => value !== undefined)
         );
 
+        const defaultStyles = Object.assign(...CONFIG.FateX.global.styles.map(
+            ({ name, defaultValue }) => ({ [name]: defaultValue })
+        ));
+
         // Create a new object where the default styles fill in any values not defined
         // by CSS custom properties.
-        const currentValues = {...CONFIG.FateX.global.defaultStyles, ...definedCustomProperties};
+        const currentValues = {...defaultStyles, ...definedCustomProperties};
 
         return mergeObject(super.getData(options), currentValues);
     }
 
     onChange(event: JQuery.Event) {
         const newValue = event.currentTarget.value;
-        const customProperty = $(event.currentTarget).data("property");
+        const componenetName = $(event.currentTarget).data("edit");
+        const customProperty = CONFIG.FateX.global.styles.find(x => x.name === componenetName)?.customProperty;
 
         // Update the custom property associated with the colour selector to the chosen value.
-        $(":root").css(`--${customProperty}`, newValue);
+        $(":root").css(customProperty, newValue);
     }
 
     reset() {
         // Loop over the custom properties in the config file and set each of them
         // to "unset". This will cause the fallback values to take effect, which
         // align with the system defaults.
-        CONFIG.FateX.global.customProperties.forEach(customProperty => {
+        CONFIG.FateX.global.styles.forEach(({ customProperty }) => {
             $(":root").css(customProperty, "unset");
         })
 

diff --git a/system/templates/apps/theme-config.hbs b/system/templates/apps/theme-config.hbs
@@ -17,7 +17,6 @@
                     name="headerBackgroundColorSelector"
                     value="{{headerBackgroundColor}}"
                     data-edit="headerBackgroundColor"
-                    data-property="fatex-header-color"
                 >
             </div>
         </div>
@@ -37,7 +36,6 @@
                     name="headerTextColorSelector"
                     value="{{headerTextColor}}"
                     data-edit="headerTextColor"
-                    data-property="fatex-header-text-color"
                 >
             </div>
         </div>
@@ -61,7 +59,6 @@
                     name="primarySheetColorSelector"
                     value="{{primarySheetColor}}"
                     data-edit="primarySheetColor"
-                    data-property="fatex-primary-color"
                 >
             </div>
         </div>
@@ -81,7 +78,6 @@
                     name="sheetBackgroundColorSelector"
                     value="{{sheetBackgroundColor}}"
                     data-edit="sheetBackgroundColor"
-                    data-property="fatex-sheet-background-color"
                 >
             </div>
         </div>
@@ -101,7 +97,6 @@
                     name="scrollbarColorSelector"
                     value="{{scrollbarColor}}"
                     data-edit="scrollbarColor"
-                    data-property="fatex-scrollbar-color"
                 >
             </div>
         </div>