Add dummy settings sidebar panel.

tools/config.json

@@ -73,12 +73,12 @@
 		"website/o3dv/openurldialog.js",
 		"website/o3dv/exportdialog.js",
 		"website/o3dv/sharingdialog.js",
-		"website/o3dv/settingsdialog.js",
 		"website/o3dv/cookiedialog.js",
 		"website/o3dv/modeldata.js",
 		"website/o3dv/navigator.js",
 		"website/o3dv/sidebarpanel.js",
 		"website/o3dv/detailssidebarpanel.js",
+		"website/o3dv/settingssidebarpanel.js",
 		"website/o3dv/sidebar.js",
 		"website/o3dv/hashhandler.js",
 		"website/o3dv/website.css",

website/embed.html

@@ -87,12 +87,12 @@
 	<script type="text/javascript" src="o3dv/openurldialog.js"></script>
 	<script type="text/javascript" src="o3dv/exportdialog.js"></script>
 	<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
-	<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
 	<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
 	<script type="text/javascript" src="o3dv/modeldata.js"></script>
 	<script type="text/javascript" src="o3dv/navigator.js"></script>
 	<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
 	<script type="text/javascript" src="o3dv/detailssidebarpanel.js"></script>
+	<script type="text/javascript" src="o3dv/settingssidebarpanel.js"></script>
 	<script type="text/javascript" src="o3dv/sidebar.js"></script>
 	<script type="text/javascript" src="o3dv/hashhandler.js"></script>
 	<link rel="stylesheet" type="text/css" href="o3dv/website.css">

website/index.html

@@ -87,12 +87,12 @@
 	<script type="text/javascript" src="o3dv/openurldialog.js"></script>
 	<script type="text/javascript" src="o3dv/exportdialog.js"></script>
 	<script type="text/javascript" src="o3dv/sharingdialog.js"></script>
-	<script type="text/javascript" src="o3dv/settingsdialog.js"></script>
 	<script type="text/javascript" src="o3dv/cookiedialog.js"></script>
 	<script type="text/javascript" src="o3dv/modeldata.js"></script>
 	<script type="text/javascript" src="o3dv/navigator.js"></script>
 	<script type="text/javascript" src="o3dv/sidebarpanel.js"></script>
 	<script type="text/javascript" src="o3dv/detailssidebarpanel.js"></script>
+	<script type="text/javascript" src="o3dv/settingssidebarpanel.js"></script>
 	<script type="text/javascript" src="o3dv/sidebar.js"></script>
 	<script type="text/javascript" src="o3dv/hashhandler.js"></script>
 	<link rel="stylesheet" type="text/css" href="o3dv/website.css">

website/o3dv/detailssidebarpanel.js

@@ -3,8 +3,11 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
     constructor (parentDiv)
     {
         super (parentDiv);
-        this.titleDiv = null;
+    }
-        this.contentDiv = null;
+
+    GetTitle ()
+    {
+        return 'Details';
     }
 
     AddPropertyGroup (table, propertyGroup)
@@ -140,17 +143,5 @@ OV.DetailsSidebarPanel = class extends OV.SidebarPanel
         AddTextureMap (this, table, 'Normal Map', material.normalMap);
         AddTextureMap (this, table, 'Emissive Map', material.emissiveMap);      
         this.Resize ();
-    }    
-
-    Resize ()
-    {
-        let titleHeight = this.titleDiv.outerHeight (true);
-        let height = this.parentDiv.height ();
-        this.contentDiv.outerHeight (height - titleHeight, true);
     }
-
-    Clear ()
-    {
-        this.contentDiv.empty ();
-    }    
 };

website/o3dv/settingsdialog.js

@@ -1,50 +0,0 @@
-OV.ShowSettingsDialog = function (viewerSettings, importSettings, onOk)
-{
-    function AddColorRow (contentDiv, defaultColor, paramName, paramDesc)
-    {
-        let colorRow = $('<div>').addClass ('ov_dialog_table_row').appendTo (contentDiv);
-        $('<div>').html (paramName).addClass ('ov_dialog_table_row_name').appendTo (colorRow);
-        let valueColumn = $('<div>').addClass ('ov_dialog_table_row_value').appendTo (colorRow);
-        let colorInput = $('<input>').attr ('type', 'color').addClass ('ov_dialog_color').appendTo (valueColumn);
-        $('<span>').addClass ('ov_dialog_table_row_comment').html (paramDesc).appendTo (valueColumn);
-        colorInput.val ('#' + OV.ColorToHexString (defaultColor));
-        return colorInput;
-    }
-
-    let dialogSettings = {
-        backgroundColor: viewerSettings.backgroundColor,
-        defaultColor : importSettings.defaultColor
-    };
-    let dialog = new OV.ButtonDialog ();
-    let contentDiv = dialog.Init ('Settings', [
-        {
-            name : 'Cancel',
-            subClass : 'outline',
-            onClick () {
-                dialog.Hide ();
-            }
-        },
-        {
-            name : 'OK',
-            onClick () {
-                dialog.Hide ();                
-                onOk (dialogSettings);
-            }
-        }
-    ]);
-    
-    let backgroundColorInput = AddColorRow (contentDiv, dialogSettings.backgroundColor, 'Background Color', '(Visualization only)');
-    backgroundColorInput.change (function () {
-        let colorStr = backgroundColorInput.val ().substr (1);
-        dialogSettings.backgroundColor = OV.HexStringToColor (colorStr);
-    });
-
-    let colorInput = AddColorRow (contentDiv, dialogSettings.defaultColor, 'Default Color', '(When no material defined)');
-    colorInput.change (function () {
-        let colorStr = colorInput.val ().substr (1);
-        dialogSettings.defaultColor = OV.HexStringToColor (colorStr);
-    });
-
-    dialog.Show ();
-    return dialog;
-};

website/o3dv/settingssidebarpanel.js

@@ -0,0 +1,17 @@
+OV.SettingsSidebarPanel = class extends OV.SidebarPanel
+{
+    constructor (parentDiv)
+    {
+        super (parentDiv);
+    }
+
+    GetTitle ()
+    {
+        return 'Settings';
+    }
+
+    InitContent ()
+    {
+        this.contentDiv.html ('Settings Content...');
+    }
+};

website/o3dv/sidebar.js

@@ -1,6 +1,7 @@
 OV.SidebarPanelId =
 {
-    Details : 0
+    Details : 0,
+    Settings : 1
 };
 
 OV.Sidebar = class
@@ -12,7 +13,8 @@ OV.Sidebar = class
         this.titleDiv = null;
         this.contentDiv = null;
         this.panels = [
-            new OV.DetailsSidebarPanel (this.parentDiv)
+            new OV.DetailsSidebarPanel (this.parentDiv),
+            new OV.SettingsSidebarPanel (this.parentDiv)
         ];
     }
 
@@ -24,7 +26,7 @@ OV.Sidebar = class
     Init (callbacks)
     {
         for (let i = 0; i < this.panels.length; i++) {
-            this.panels[i].Init ('Details', callbacks);
+            this.panels[i].Init (callbacks);
         }
     }
 

website/o3dv/sidebarpanel.js

@@ -9,16 +9,27 @@ OV.SidebarPanel = class
         this.visible = false;
     }
 
-    Init (title, callbacks)
+    Init (callbacks)
     {
         this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
         this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
-        let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html (title).appendTo (this.titleDiv);
+        let titleTextDiv = $('<div>').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv);
         let titleImg = $('<img>').addClass ('ov_sidebar_title_img').attr ('src', 'assets/images/sidebar/close.svg').appendTo (this.titleDiv);
         titleImg.click (function () {
             callbacks.onClose ();
         });
-    }    
+        this.InitContent ();
+    }
+
+    GetTitle ()
+    {
+        return '';
+    }
+
+    InitContent ()
+    {
+
+    }
 
     Show (show)
     {
@@ -33,5 +44,17 @@ OV.SidebarPanel = class
     IsVisible ()
     {
         return this.visible;
-    }    
+    }
+
+    Resize ()
+    {
+        let titleHeight = this.titleDiv.outerHeight (true);
+        let height = this.parentDiv.height ();
+        this.contentDiv.outerHeight (height - titleHeight, true);
+    }
+
+    Clear ()
+    {
+        this.contentDiv.empty ();
+    }
 };

website/o3dv/website.js

@@ -337,29 +337,17 @@ OV.Website = class
         AddButton (this.toolbar, 'share', 'Share model', true, function () {
             obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
         });
-        if (OV.FeatureSet.SettingsAvailable) {
-            AddSeparator (this.toolbar, true);
-            AddButton (this.toolbar, 'settings', 'Settings', true, function () {
-                obj.dialog = OV.ShowSettingsDialog (obj.viewerSettings, obj.importSettings, function (dialogSettings) {
-                    obj.viewerSettings.backgroundColor = dialogSettings.backgroundColor;
-                    obj.viewer.SetBackgroundColor (obj.viewerSettings.backgroundColor);
-                    obj.cookieHandler.SetColorVal ('ov_background_color', obj.viewerSettings.backgroundColor);
-
-                    let reload = !OV.ColorIsEqual (obj.importSettings.defaultColor, dialogSettings.defaultColor);
-                    obj.importSettings.defaultColor = dialogSettings.defaultColor;
-                    obj.cookieHandler.SetColorVal ('ov_default_color', obj.importSettings.defaultColor);
-
-                    if (reload) {
-                        obj.ReloadFiles ();
-                    }
-                });
-            });
-        }
         AddRightButton (this.toolbar, 'details', 'Details panel', true, function () {
             obj.ToggleSidebar (OV.SidebarPanelId.Details);
             obj.Resize ();
         });
-        
+        if (OV.FeatureSet.SettingsAvailable) {
+            AddRightButton (this.toolbar, 'settings', 'Settings panel', true, function () {
+                obj.ToggleSidebar (OV.SidebarPanelId.Settings);
+                obj.Resize ();
+            });            
+        }
+
         this.parameters.fileInput.on ('change', function (ev) {
             if (ev.target.files.length > 0) {
                 obj.LoadModelFromFileList (ev.target.files);