From e956c40ffe8cd68c3c965a559709f5597147ca26 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Thu, 2 Sep 2021 19:32:00 +0200 Subject: [PATCH] Replace theme string with theme id. --- tools/config.json | 1 + website/embed.html | 1 + website/index.html | 1 + website/o3dv/js/cookies.js | 14 +++++ website/o3dv/js/settings.js | 42 +++++++++++++++ website/o3dv/js/settingssidebarpanel.js | 6 +++ website/o3dv/js/themehandler.js | 13 ++++- website/o3dv/js/website.js | 68 ++++++++++++------------- 8 files changed, 109 insertions(+), 37 deletions(-) create mode 100644 website/o3dv/js/settings.js diff --git a/tools/config.json b/tools/config.json index 10633d2..baba080 100644 --- a/tools/config.json +++ b/tools/config.json @@ -70,6 +70,7 @@ "website/o3dv/js/eventhandler.js", "website/o3dv/js/utils.js", "website/o3dv/js/cookies.js", + "website/o3dv/js/settings.js", "website/o3dv/js/toolbar.js", "website/o3dv/js/treeview.js", "website/o3dv/js/modal.js", diff --git a/website/embed.html b/website/embed.html index ddfc194..888fc30 100644 --- a/website/embed.html +++ b/website/embed.html @@ -92,6 +92,7 @@ + diff --git a/website/index.html b/website/index.html index b6aca20..c9538de 100644 --- a/website/index.html +++ b/website/index.html @@ -92,6 +92,7 @@ + diff --git a/website/o3dv/js/cookies.js b/website/o3dv/js/cookies.js index 2775bb3..f6dee51 100644 --- a/website/o3dv/js/cookies.js +++ b/website/o3dv/js/cookies.js @@ -42,6 +42,20 @@ OV.CookieHandler = class SetBoolVal (key, value) { this.SetStringVal (key, value ? 'true' : 'false'); + } + + GetIntVal (key, defVal) + { + let stringVal = this.GetStringVal (key, null); + if (stringVal === null) { + return defVal; + } + return parseInt (stringVal, 10); + } + + SetIntVal (key, value) + { + this.SetStringVal (key, value.toString ()); } GetColorVal (key, defVal) diff --git a/website/o3dv/js/settings.js b/website/o3dv/js/settings.js new file mode 100644 index 0000000..53b3fc9 --- /dev/null +++ b/website/o3dv/js/settings.js @@ -0,0 +1,42 @@ +OV.Theme = { + Light : 1, + Dark : 2, + System : 3 +}; + +OV.Settings = class +{ + constructor () + { + this.backgroundColor = new OV.Color (255, 255, 255); + this.defaultColor = new OV.Color (200, 200, 200); + this.themeId = OV.Theme.Light; + } + + LoadFromCookies (cookieHandler) + { + this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255)); + this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); + this.themeId = cookieHandler.GetIntVal ('ov_theme_id', OV.Theme.Light); + } + + SaveToCookies (cookieHandler) + { + cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor); + cookieHandler.SetColorVal ('ov_default_color', this.defaultColor); + cookieHandler.SetStringVal ('ov_theme_id', this.themeId); + } + + GetTheme () + { + if (this.themeId === OV.Theme.System) { + if (window.matchMedia && window.matchMedia ('(prefers-color-scheme: dark)').matches) { + return OV.Theme.Dark; + } else { + return OV.Theme.Light; + } + } else { + return this.themeId; + } + } +}; diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js index 953e181..007cc5d 100644 --- a/website/o3dv/js/settingssidebarpanel.js +++ b/website/o3dv/js/settingssidebarpanel.js @@ -40,6 +40,12 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel this.AddResetToDefaultsButton (defaultSettings, callbacks); } + UpdateSettings (settings) + { + this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (settings.backgroundColor)); + this.defaultColorInput.pickr.setColor ('#' + OV.ColorToHexString (settings.defaultColor)); + } + Update (model) { let hasDefaultMaterial = OV.HasDefaultMaterial (model); diff --git a/website/o3dv/js/themehandler.js b/website/o3dv/js/themehandler.js index 9dd2546..fb9ceb8 100644 --- a/website/o3dv/js/themehandler.js +++ b/website/o3dv/js/themehandler.js @@ -33,12 +33,21 @@ OV.ThemeHandler = class { } } - SwitchTheme (name) + SwitchTheme (themeId) { + let themeName = null; + if (themeId === OV.Theme.Light) { + themeName = 'light'; + } else if (themeId === OV.Theme.Dark) { + themeName = 'dark'; + } else { + return; + } + let root = document.querySelector (':root'); for (let property in this.css) { if (Object.prototype.hasOwnProperty.call (this.css, property)) { - let value = this.css[property][name]; + let value = this.css[property][themeName]; if (value !== undefined) { root.style.setProperty (property, value); } diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js index e60b22b..ac78322 100644 --- a/website/o3dv/js/website.js +++ b/website/o3dv/js/website.js @@ -1,27 +1,3 @@ -OV.WebsiteSettings = class -{ - constructor () - { - this.backgroundColor = new OV.Color (255, 255, 255); - this.defaultColor = new OV.Color (200, 200, 200); - this.themeName = 'light'; - } - - LoadFromCookies (cookieHandler) - { - this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255)); - this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200)); - this.themeName = cookieHandler.GetStringVal ('ov_theme_name', 'light'); - } - - SaveToCookies (cookieHandler) - { - cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor); - cookieHandler.SetColorVal ('ov_default_color', this.defaultColor); - cookieHandler.SetStringVal ('ov_theme_name', this.themeName); - } -}; - OV.Website = class { constructor (parameters) @@ -34,7 +10,7 @@ OV.Website = class this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv); this.navigator = new OV.Navigator (this.parameters.navigatorDiv); this.eventHandler = new OV.EventHandler (this.parameters.eventHandler); - this.settings = new OV.WebsiteSettings (); + this.settings = new OV.Settings (); this.modelLoader = new OV.ThreeModelLoader (); this.highlightMaterial = new THREE.MeshPhongMaterial ({ color : 0x8ec9f0, @@ -50,7 +26,7 @@ OV.Website = class Load () { this.settings.LoadFromCookies (this.cookieHandler); - this.SwitchTheme (this.settings.themeName); + this.SwitchTheme (this.settings.themeId, false); this.InitViewer (); this.InitToolbar (); @@ -300,11 +276,33 @@ OV.Website = class } } - SwitchTheme (newThemeName) + SwitchTheme (newThemeId, resetColors) { - this.settings.themeName = newThemeName; - this.themeHandler.SwitchTheme (newThemeName); + this.settings.themeId = newThemeId; + let calculatedTheme = this.settings.GetTheme (); + + this.themeHandler.SwitchTheme (calculatedTheme); this.settings.SaveToCookies (this.cookieHandler); + if (resetColors) { + if (calculatedTheme === OV.Theme.Light) { + this.settings.backgroundColor = new OV.Color (255, 255, 255); + this.settings.defaultColor = new OV.Color (200, 200, 200); + } else if (calculatedTheme === OV.Theme.Dark) { + this.settings.backgroundColor = new OV.Color (0, 0, 0); + this.settings.defaultColor = new OV.Color (200, 200, 200); + } else { + return; + } + this.settings.SaveToCookies (this.cookieHandler); + this.viewer.SetBackgroundColor (this.settings.backgroundColor); + if (this.modelLoader.defaultMaterial !== null) { + OV.ReplaceDefaultMaterialColor (this.model, this.settings.defaultColor); + this.modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor); + } + if (this.settingsPanel !== null) { + this.settingsPanel.UpdateSettings (this.settings); + } + } } InitViewer () @@ -416,13 +414,13 @@ OV.Website = class // TODO: remove AddButton (this.toolbar, this.eventHandler, 'share', 'Dark Mode', true, () => { - let theme = 'light'; - if (this.settings.themeName === 'dark') { - theme = 'light'; + let themeId = OV.Theme.Light; + if (this.settings.themeId === OV.Theme.Dark) { + themeId = OV.Theme.Light; } else { - theme = 'dark'; + themeId = OV.Theme.Dark; } - this.SwitchTheme (theme); + this.SwitchTheme (themeId, true); }); this.parameters.fileInput.on ('change', (ev) => { @@ -571,7 +569,7 @@ OV.Website = class }); } - let defaultSettings = new OV.WebsiteSettings (); + let defaultSettings = new OV.Settings (); this.settingsPanel.InitSettings ( this.settings, defaultSettings,