Add details button.

website/o3dv/featureset.js

@@ -1,5 +1,4 @@
 OV.FeatureSet =
 {
-    SetDefaultColor : false,
-    CalculateQuantities : false
+    SetDefaultColor : false
 };

website/o3dv/navigator.js

@@ -310,9 +310,9 @@ OV.Navigator = class
     {
         let obj = this;
         if (this.selection === null) {
-            let usedMaterial = this.callbacks.getMaterialsForModel ();
+            let usedMaterials = this.callbacks.getMaterialsForModel ();
             this.sidebar.AddProperties (null);
-            this.infoPanel.FillWithModelInfo (usedMaterial, {
+            this.infoPanel.FillWithModelInfo (usedMaterials, {
                 onMaterialSelect : function (materialIndex) {
                     obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
                 }
@@ -320,6 +320,7 @@ OV.Navigator = class
         } else {
             if (this.selection.type === OV.SelectionType.Material) {
                 let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index);
+                this.sidebar.AddProperties (null);
                 this.infoPanel.FillWithMaterialInfo (usedByMeshes, {
                     onMeshHover : function (meshIndex) {
                         obj.SetTempSelectedMeshIndex (meshIndex);
@@ -329,8 +330,9 @@ OV.Navigator = class
                     }
                 });
             } else if (this.selection.type === OV.SelectionType.Mesh) {
-                let usedByMeshes = this.callbacks.getMaterialsForMesh (this.selection.index);
-                this.infoPanel.FillWithModelInfo (usedByMeshes, {
+                let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index);
+                this.sidebar.AddProperties (null);
+                this.infoPanel.FillWithModelInfo (usedMaterials, {
                     onMaterialSelect : function (materialIndex) {
                         obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
                     }

website/o3dv/sidebar.js

@@ -8,11 +8,27 @@ OV.Sidebar = class
     constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
+        this.visible = true;
         this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (parentDiv);
         this.titleDiv.html ('Details');
         this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
     }
 
+    Show (show)
+    {
+        this.visible = show;
+        if (show) {
+            this.parentDiv.show ();
+        } else {
+            this.parentDiv.hide ();
+        }
+    }
+
+    IsVisible ()
+    {
+        return this.visible;
+    }
+
     AddProperties (properties)
     {
         function AddProperty (table, name, value)

website/o3dv/toolbar.js

@@ -12,7 +12,7 @@ OV.ToolbarButton = class
 
     CreateDomElement (parentDiv)
     {
-        this.buttonDiv = $('<div>').addClass ('ov_toolbar_button_div').appendTo (parentDiv);
+        this.buttonDiv = $('<div>').addClass ('ov_toolbar_button').appendTo (parentDiv);
         this.buttonImg = $('<img>').addClass ('ov_toolbar_button').appendTo (this.buttonDiv);
         this.buttonImg.attr ('src', this.image);
         if (this.onClick !== null) {

website/o3dv/website.css

@@ -175,14 +175,26 @@ div.ov_toolbar
 	user-select: none;
 }
 
-div.ov_toolbar div.ov_toolbar_button_div
+div.ov_toolbar div.ov_toolbar_button
 {
 	padding: 10px;
 	float: left;
 	cursor: pointer;
 }
 
-div.ov_toolbar div.ov_toolbar_button_div.selected
+div.ov_toolbar div.ov_toolbar_button
+{
+	padding: 10px;
+	float: left;
+	cursor: pointer;
+}
+
+div.ov_toolbar div.ov_toolbar_button.right
+{
+	float: right;
+}
+
+div.ov_toolbar div.ov_toolbar_button.selected
 {
 	background: #e1e1e1;
 }
@@ -675,7 +687,7 @@ a:hover
 	text-decoration: underline;
 }
 
-div.ov_toolbar div.ov_toolbar_button_div:hover
+div.ov_toolbar div.ov_toolbar_button:hover
 {
 	background: #c9e5f8;
 }

website/o3dv/website.js

@@ -54,7 +54,9 @@ OV.Website = class
         let safetyMargin = 0;
         if (!OV.IsSmallWidth ()) {
             navigatorWidth = parseInt (this.parameters.navigatorDiv.outerWidth (true), 10);
-            sidebarWidth = parseInt (this.parameters.sidebarDiv.outerWidth (true), 10);
+            if (this.sidebar.IsVisible ()) {
+                sidebarWidth = parseInt (this.parameters.sidebarDiv.outerWidth (true), 10);
+            }
             safetyMargin = 1;
         }
         
@@ -221,8 +223,16 @@ OV.Website = class
             if (onlyFullWidth) {
                 button.AddClass ('only_full_width');
             }
+            return button;
         }
 
+        function AddRightButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick)
+        {
+            let button = AddButton (toolbar, imageName, imageTitle, onlyFullWidth, onClick);
+            button.AddClass ('right');
+            return button;
+        }        
+
         function AddRadioButton (toolbar, imageNames, imageTitles, selectedIndex, onlyFullWidth, onClick)
         {
             let imageData = [];
@@ -312,6 +322,11 @@ OV.Website = class
                 });
             });
         }
+        AddRightButton (this.toolbar, 'details', 'Details Panel', true, function () {
+            let isVisible = obj.sidebar.IsVisible ();
+            obj.sidebar.Show (!isVisible);
+            obj.Resize ();
+        });
         
         this.parameters.fileInput.on ('change', function (ev) {
             if (ev.target.files.length > 0) {