Preparation for multiple side bar panels.

tools/config.json

@@ -78,7 +78,7 @@
 		"website/o3dv/modeldata.js",
 		"website/o3dv/navigator.js",
 		"website/o3dv/sidebarpanel.js",
-		"website/o3dv/propertysidebarpanel.js",
+		"website/o3dv/detailssidebarpanel.js",
 		"website/o3dv/sidebar.js",
 		"website/o3dv/hashhandler.js",
 		"website/o3dv/website.css",

website/embed.html

@@ -92,7 +92,7 @@
 	<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/propertysidebarpanel.js"></script>
+	<script type="text/javascript" src="o3dv/detailssidebarpanel.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

@@ -92,7 +92,7 @@
 	<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/propertysidebarpanel.js"></script>
+	<script type="text/javascript" src="o3dv/detailssidebarpanel.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

@@ -1,4 +1,4 @@
-OV.PropertySidebarPanel = class extends OV.SidebarPanel
+OV.DetailsSidebarPanel = class extends OV.SidebarPanel
 {
     constructor (parentDiv)
     {

website/o3dv/sidebar.js

@@ -1,6 +1,6 @@
 OV.SidebarPanelId =
 {
-    Properties : 0
+    Details : 0
 };
 
 OV.Sidebar = class
@@ -12,7 +12,7 @@ OV.Sidebar = class
         this.titleDiv = null;
         this.contentDiv = null;
         this.panels = [
-            new OV.PropertySidebarPanel (this.parentDiv)
+            new OV.DetailsSidebarPanel (this.parentDiv)
         ];
     }
 
@@ -28,12 +28,21 @@ OV.Sidebar = class
         }
     }
 
-    Show (show)
+    Show (panelId)
     {
-        this.visible = show;
+        if (panelId !== null) {
-        if (this.visible) {
+            this.visible = true;
             this.parentDiv.show ();
+            for (let i = 0; i < this.panels.length; i++) {
+                const panel = this.panels[i];
+                if (i === panelId) {
+                    panel.Show (true);
+                } else {
+                    panel.Show (false);
+                }
+            }
         } else {
+            this.visible = false;
             this.parentDiv.hide ();
         }
     }
@@ -43,6 +52,19 @@ OV.Sidebar = class
         return this.visible;
     }
 
+    GetVisiblePanelId ()
+    {
+        if (!this.visible) {
+            return null;
+        }
+        for (let i = 0; i < this.panels.length; i++) {
+            if (this.panels[i].IsVisible ()) {
+                return i;
+            }
+        }
+        return null;
+    }
+
     Resize ()
     {
         for (let i = 0; i < this.panels.length; i++) {

website/o3dv/sidebarpanel.js

@@ -3,10 +3,10 @@ OV.SidebarPanel = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.panelDiv = $('<div>').appendTo (this.parentDiv);
+        this.panelDiv = $('<div>').appendTo (this.parentDiv).hide ();
         this.titleDiv = null;
         this.contentDiv = null;
-        this.visible = true;
+        this.visible = false;
     }
 
     Init (title, callbacks)

website/o3dv/website.js

@@ -8,7 +8,7 @@ OV.Website = class
         this.cookieHandler = new OV.CookieHandler ();
         this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
         this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
-        this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar.GetPanel (OV.SidebarPanelId.Properties));
+        this.navigator = new OV.Navigator (this.parameters.navigatorDiv, this.sidebar.GetPanel (OV.SidebarPanelId.Details));
         this.viewerSettings = new OV.ViewerSettings ();
         this.importSettings = new OV.ImportSettings ();
         this.modelLoader = new OV.ThreeModelLoader ();
@@ -81,10 +81,19 @@ OV.Website = class
         }
     }
 
-    ShowSidebar (show)
+    ShowSidebar (panelId)
     {
-        this.sidebar.Show (show);
+        this.sidebar.Show (panelId);
-        this.cookieHandler.SetBoolVal ('ov_show_sidebar', show);
+        this.cookieHandler.SetBoolVal ('ov_show_sidebar', this.sidebar.IsVisible ());
+    }
+
+    ToggleSidebar (panelId)
+    {
+        if (this.sidebar.GetVisiblePanelId () !== panelId) {
+            this.ShowSidebar (panelId);
+        } else {
+            this.ShowSidebar (null);
+        }        
     }
 
     ClearModel ()
@@ -347,7 +356,7 @@ OV.Website = class
             });
         }
         AddRightButton (this.toolbar, 'details', 'Details panel', true, function () {
-            obj.ShowSidebar (!obj.sidebar.IsVisible ());
+            obj.ToggleSidebar (OV.SidebarPanelId.Details);
             obj.Resize ();
         });
         
@@ -404,12 +413,12 @@ OV.Website = class
         let obj = this;
         this.sidebar.Init ({
             onClose : function () {
-                obj.ShowSidebar (false);
+                obj.ShowSidebar (null);
                 obj.Resize ();
             }
         });
         let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true);
-        this.ShowSidebar (show);
+        this.ShowSidebar (show ? OV.SidebarPanelId.Details : null);
     }
 
     InitNavigator ()