Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace theme string with theme id.

Browse Source
This commit is contained in:
kovacsv 2021-09-02 19:32:00 +02:00
parent bd3c585e54
commit e956c40ffe
8 changed files with 109 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/config.json
View File

@ -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",

1
website/embed.html
View File

@ -92,6 +92,7 @@
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
<script type="text/javascript" src="o3dv/js/utils.js"></script>
<script type="text/javascript" src="o3dv/js/cookies.js"></script>
<script type="text/javascript" src="o3dv/js/settings.js"></script>
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
<script type="text/javascript" src="o3dv/js/modal.js"></script>

1
website/index.html
View File

@ -92,6 +92,7 @@
<script type="text/javascript" src="o3dv/js/eventhandler.js"></script>
<script type="text/javascript" src="o3dv/js/utils.js"></script>
<script type="text/javascript" src="o3dv/js/cookies.js"></script>
<script type="text/javascript" src="o3dv/js/settings.js"></script>
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
<script type="text/javascript" src="o3dv/js/modal.js"></script>

14
website/o3dv/js/cookies.js
View File

@ -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)

42
website/o3dv/js/settings.js Normal file
View File

@ -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;
}
}
};

6
website/o3dv/js/settingssidebarpanel.js
View File

@ -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);

13
website/o3dv/js/themehandler.js
View File

@ -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);
}

68
website/o3dv/js/website.js
View File

@ -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,