Moved default colors to opts.js

Signed-off-by: Philipp <p.koenig@blockbyte.de>
Kiuryy · Jul 4, 2019 · 355397b · 355397b
1 parent 6ab26c8
commit 355397b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 62 deletions.
diff --git a/src/js/background/icon.js b/src/js/background/icon.js
@@ -95,7 +95,7 @@
                     }
                 }).then((svg) => {
                     if (color === "auto") {
-                        color = $.opts.defaults[window.matchMedia("(prefers-color-scheme: dark)").matches ? "iconColorForDark" : "iconColorForLight"];
+                        color = $.opts.defaultColors.icon[window.matchMedia("(prefers-color-scheme: dark)").matches ? "forDark" : "forLight"];
                     }
 
                     color = color.replace(/#/g, "%23");

diff --git a/src/js/helper/model.js b/src/js/helper/model.js
@@ -7,29 +7,6 @@
      */
     $.ModelHelper = function (ext) {
 
-        const defaultColors = {
-            textColor: {
-                light: "#646464",
-                dark: "#c8c8c8"
-            },
-            sidebarMaskColor: {
-                light: "rgba(255,255,255,0.8)",
-                dark: "rgba(0,0,0,0.6)"
-            },
-            hoverColor: {
-                light: "#f5f5f5",
-                dark: "#555555"
-            },
-            colorScheme: {
-                light: "#1b82f1",
-                dark: "#1f4d80"
-            },
-            foregroundColor: {
-                light: "#ffffff",
-                dark: "#333333"
-            }
-        };
-
         const defaults = {
             u: { // utility -> saved locally
                 openStates: {},
@@ -98,23 +75,23 @@
                 showDirectoryIcons: true,
                 devModeIconBadge: true,
                 styles: {
-                    colorScheme: defaultColors.colorScheme.light,
-                    foregroundColor: defaultColors.foregroundColor.light,
-                    textColor: defaultColors.textColor.light,
-                    hoverColor: defaultColors.hoverColor.light,
+                    colorScheme: $.opts.defaultColors.colorScheme.light,
+                    foregroundColor: $.opts.defaultColors.foregroundColor.light,
+                    textColor: $.opts.defaultColors.textColor.light,
+                    hoverColor: $.opts.defaultColors.hoverColor.light,
                     indicatorWidth: "40px",
                     indicatorIconSize: "32px",
                     indicatorIconColor: "#ffffff",
                     indicatorColor: "rgba(0,0,0,0.5)",
                     sidebarWidth: "350px",
                     sidebarHeaderHeight: "50px",
-                    sidebarMaskColor: defaultColors.sidebarMaskColor.light,
+                    sidebarMaskColor: $.opts.defaultColors.sidebarMaskColor.light,
                     bookmarksFontSize: "14px",
                     directoriesIconSize: "16px",
                     bookmarksIconSize: "16px",
                     bookmarksLineHeight: "38px",
                     bookmarksDirIcon: "dir-1",
-                    bookmarksDirColor: defaultColors.textColor.light,
+                    bookmarksDirColor: $.opts.defaultColors.textColor.light,
                     bookmarksDirIndentation: "25px",
                     bookmarksHorizontalPadding: "16px",
                     scrollBarWidth: "11px",
@@ -423,25 +400,6 @@
                 port.postMessage(opts);
             });
         };
-
-        /**
-         * Returns the default text color for the given appearance (light or dark)
-         *
-         * @param {string} name
-         * @param {string} appearance
-         * @returns {string|null}
-         */
-        this.getDefaultColor = (name, appearance) => {
-            if (defaultColors[name]) {
-                if (appearance && defaultColors[name][appearance]) {
-                    return defaultColors[name][appearance];
-                } else {
-                    return defaultColors[name].light;
-                }
-            }
-
-            return null;
-        };
     };
 
 })(jsu);
diff --git a/src/js/onboarding.js b/src/js/onboarding.js
@@ -154,11 +154,11 @@
 
                 if (e.type === "click") {
                     const styles = this.helper.model.getData("a/styles");
-                    styles.colorScheme = this.helper.model.getDefaultColor("colorScheme", value);
-                    styles.textColor = this.helper.model.getDefaultColor("textColor", value);
-                    styles.bookmarksDirColor = this.helper.model.getDefaultColor("textColor", value);
-                    styles.sidebarMaskColor = this.helper.model.getDefaultColor("sidebarMaskColor", value);
-                    styles.hoverColor = this.helper.model.getDefaultColor("hoverColor", value);
+                    styles.colorScheme = $.opts.defaultColors.colorScheme[value];
+                    styles.textColor = $.opts.defaultColors.textColor[value];
+                    styles.bookmarksDirColor = $.opts.defaultColors.textColor[value];
+                    styles.sidebarMaskColor = $.opts.defaultColors.sidebarMaskColor[value];
+                    styles.hoverColor = $.opts.defaultColors.hoverColor[value];
 
                     Object.values(this.elm.sidebar).forEach((sidebar) => {
                         sidebar.removeClass($.cl.visible);

diff --git a/src/js/opts.js b/src/js/opts.js
@@ -293,9 +293,31 @@
                 evaluate: "https://api.blockbyte.de/v3/evaluate/extension/bs",
             }
         },
-        defaults: {
-            iconColorForLight: "#555555",
-            iconColorForDark: "#ffffff"
+        defaultColors: {
+            textColor: {
+                light: "#646464",
+                dark: "#c8c8c8"
+            },
+            sidebarMaskColor: {
+                light: "rgba(255,255,255,0.8)",
+                dark: "rgba(0,0,0,0.6)"
+            },
+            hoverColor: {
+                light: "#f5f5f5",
+                dark: "#555555"
+            },
+            colorScheme: {
+                light: "#1b82f1",
+                dark: "#1f4d80"
+            },
+            foregroundColor: {
+                light: "#ffffff",
+                dark: "#333333"
+            },
+            icon:{
+                forLight: "#555555",
+                forDark: "#ffffff"
+            }
         },
         leftsideBackSelector: "div#blockbyte-lsb-indicator.blockbyte-lsb-visible",
         manifest: chrome.runtime.getManifest(),

diff --git a/src/js/settings/appearance.js b/src/js/settings/appearance.js
@@ -63,7 +63,7 @@
                             s.elm.range[key].trigger("change");
                         } else if (s.elm.color[key]) {
                             if (key === "iconColor" && value === "auto") { // since 'auto' isn't a valid color for the picker, we choose the default icon color for the light OS preference as predefined color
-                                value = $.opts.defaults.iconColorForLight;
+                                value = $.opts.defaultColors.icon.forLight;
                                 s.elm.select.iconColorType[0].value = "auto";
                             }
 
@@ -334,7 +334,7 @@
 
                     if (key === "colorScheme") {
                         const lum = colorValue.luminance ? colorValue.luminance : 0;
-                        ret.appearance.styles.foregroundColor = s.helper.model.getDefaultColor("foregroundColor", lum > 170 ? "dark" : "light");
+                        ret.appearance.styles.foregroundColor = $.opts.defaultColors.foregroundColor[lum > 170 ? "dark" : "light"];
 
                         if (lum > 215) {
                             ret.appearance.highContrast = true;
@@ -497,13 +497,13 @@
                                 "old": val ? "light" : "dark"
                             };
 
-                            const textColor = s.helper.model.getDefaultColor("textColor", scheme["new"]);
+                            const textColor = $.opts.defaultColors.textColor[scheme["new"]];
                             changeColorValue(s.elm.color.textColor, textColor);
                             changeColorValue(s.elm.color.bookmarksDirColor, textColor);
 
                             ["sidebarMaskColor", "colorScheme", "hoverColor"].forEach((colorName) => {
-                                if (colorName === "hoverColor" || s.elm.color[colorName][0].value === s.helper.model.getDefaultColor(colorName, scheme.old)) { // only change, if it was the default color before
-                                    const color = s.helper.model.getDefaultColor(colorName, scheme["new"]);
+                                if (colorName === "hoverColor" || s.elm.color[colorName][0].value === $.opts.defaultColors[colorName][scheme.old]) { // only change, if it was the default color before
+                                    const color = $.opts.defaultColors[colorName][scheme["new"]];
                                     changeColorValue(s.elm.color[colorName], color);
                                 }
                             });