Init sidebar panels from the website code.

source/core/core.js

@@ -10,3 +10,12 @@ OV.ValueOrDefault = function (val, def)
     }
     return val;
 };
+
+OV.EnumerateKeyValuePairs = function (arr, proc)
+{
+    for (let key in arr) {
+        if (arr.hasOwnProperty (key)) {
+            proc (key, arr[key]);
+        }
+    }
+};

website/o3dv/navigator.js

@@ -108,10 +108,9 @@ OV.NavigatorInfoPanel = class
 
 OV.Navigator = class
 {
-    constructor (parentDiv, propertiesPanel)
+    constructor (parentDiv)
     {
         this.parentDiv = parentDiv;
-        this.propertiesPanel = propertiesPanel;
         this.callbacks = null;
         this.titleDiv = $('<div>').addClass ('ov_navigator_tree_title').appendTo (parentDiv);
         this.treeDiv = $('<div>').addClass ('ov_navigator_tree_panel').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
@@ -316,8 +315,7 @@ OV.Navigator = class
                     obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
                 }
             });
-            let model = this.callbacks.getModel ();
+            this.callbacks.onModelSelected ();
-            this.propertiesPanel.AddElementProperties (model);
         } else {
             if (this.selection.type === OV.SelectionType.Material) {
                 let usedByMeshes = this.callbacks.getMeshesForMaterial (this.selection.index);
@@ -329,9 +327,7 @@ OV.Navigator = class
                         obj.SetSelection (new OV.Selection (OV.SelectionType.Mesh, meshIndex));
                     }
                 });
-                let model = this.callbacks.getModel ();
+                this.callbacks.onMaterialSelected (this.selection.index);
-                let material = model.GetMaterial (this.selection.index);
-                this.propertiesPanel.AddMaterialProperties (material);
             } else if (this.selection.type === OV.SelectionType.Mesh) {
                 let usedMaterials = this.callbacks.getMaterialsForMesh (this.selection.index);
                 this.infoPanel.FillWithModelInfo (usedMaterials, {
@@ -339,9 +335,7 @@ OV.Navigator = class
                         obj.SetSelection (new OV.Selection (OV.SelectionType.Material, materialIndex));
                     }
                 });
-                let model = this.callbacks.getModel ();
+                this.callbacks.onMeshSelected (this.selection.index);
-                let mesh = model.GetMesh (this.selection.index);
-                this.propertiesPanel.AddElementProperties (mesh);
             }
         }
         this.Resize ();

website/o3dv/sidebar.js

@@ -1,9 +1,3 @@
-OV.SidebarPanelId =
-{
-    Details : 0,
-    Settings : 1
-};
-
 OV.Sidebar = class
 {
     constructor (parentDiv)
@@ -12,10 +6,13 @@ OV.Sidebar = class
         this.visible = true;
         this.titleDiv = null;
         this.contentDiv = null;
-        this.panels = [
+        this.panels = [];
-            new OV.DetailsSidebarPanel (this.parentDiv),
+    }
-            new OV.SettingsSidebarPanel (this.parentDiv)
+
-        ];
+    AddPanel (panel)
+    {
+        this.panels.push (panel);
+        return this.panels.length - 1;
     }
 
     GetPanel (id)
@@ -25,8 +22,8 @@ OV.Sidebar = class
 
     Init (callbacks)
     {
-        for (let i = 0; i < this.panels.length; i++) {
+        for (let id = 0; id < this.panels.length; id++) {
-            this.panels[i].Init (callbacks);
+            this.panels[id].Init (callbacks);
         }
     }
 
@@ -35,9 +32,9 @@ OV.Sidebar = class
         if (panelId !== null) {
             this.visible = true;
             this.parentDiv.show ();
-            for (let i = 0; i < this.panels.length; i++) {
+            for (let id = 0; id < this.panels.length; id++) {
-                const panel = this.panels[i];
+                let panel = this.panels[id];
-                if (i === panelId) {
+                if (id === panelId) {
                     panel.Show (true);
                 } else {
                     panel.Show (false);
@@ -59,9 +56,9 @@ OV.Sidebar = class
         if (!this.visible) {
             return null;
         }
-        for (let i = 0; i < this.panels.length; i++) {
+        for (let id = 0; id < this.panels.length; id++) {
-            if (this.panels[i].IsVisible ()) {
+            if (this.panels[id].IsVisible ()) {
-                return i;
+                return id;
             }
         }
         return null;
@@ -69,8 +66,8 @@ OV.Sidebar = class
 
     Resize ()
     {
-        for (let i = 0; i < this.panels.length; i++) {
+        for (let id = 0; id < this.panels.length; id++) {
-            this.panels[i].Resize ();
+            this.panels[id].Resize ();
-        }        
+        }
     }
 };

website/o3dv/toolbar.js

@@ -20,7 +20,6 @@ OV.ToolbarButton = class
         }
         this.buttonDiv.attr ('alt', this.imageTitle);
         OV.InstallTooltip (this.buttonDiv, this.imageTitle);
-        this.Update ();
     }
 
     AddClass (className)
@@ -28,13 +27,14 @@ OV.ToolbarButton = class
         this.buttonDiv.addClass (className);
     }
 
-    Update ()
+    SetSelected (selected)
     {
+        this.selected = selected;
         if (!this.selected) {
             this.buttonDiv.removeClass ('selected');
         } else {
             this.buttonDiv.addClass ('selected');
-        }
+        }        
     }
 };
 
@@ -61,17 +61,15 @@ OV.Toolbar = class
                 for (let i = 0; i < buttons.length; i++) {
                     let currentButton = buttons[i];
                     if (i === buttonIndex) {
-                        currentButton.selected = true;
+                        currentButton.SetSelected (true);
                     } else {
-                        currentButton.selected = false;
+                        currentButton.SetSelected (false);
                     }
-                    currentButton.Update ();
                 }
                 onClick (buttonIndex);
             });
             if (selectedIndex === buttonIndex) {
-                button.selected = true;
+                button.SetSelected (true);
-                button.Update ();
             }
             buttons.push (button);
         }

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.Details));
+        this.navigator = new OV.Navigator (this.parameters.navigatorDiv);
         this.viewerSettings = new OV.ViewerSettings ();
         this.importSettings = new OV.ImportSettings ();
         this.modelLoader = new OV.ThreeModelLoader ();
@@ -16,6 +16,7 @@ OV.Website = class
             color : 0x8ec9f0,
             side : THREE.DoubleSide
         });
+        this.detailsPanel = null;
         this.model = null;
         this.dialog = null;
     }
@@ -81,21 +82,6 @@ OV.Website = class
         }
     }
 
-    ShowSidebar (panelId)
-    {
-        this.sidebar.Show (panelId);
-        this.cookieHandler.SetBoolVal ('ov_show_sidebar', this.sidebar.IsVisible ());
-    }
-
-    ToggleSidebar (panelId)
-    {
-        if (this.sidebar.GetVisiblePanelId () !== panelId) {
-            this.ShowSidebar (panelId);
-        } else {
-            this.ShowSidebar (null);
-        }        
-    }
-
     ClearModel ()
     {
         if (this.dialog !== null) {
@@ -256,13 +242,6 @@ OV.Website = class
             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 = [];
@@ -337,16 +316,6 @@ OV.Website = class
         AddButton (this.toolbar, 'share', 'Share model', true, function () {
             obj.dialog = OV.ShowSharingDialog (importer, obj.viewerSettings, obj.importSettings, obj.viewer.GetCamera ());
         });
-        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) {
@@ -398,15 +367,57 @@ OV.Website = class
 
     InitSidebar ()
     {
+        function AddSidebarButton (toolbar, imageName, imageTitle, onClick)
+        {
+            let image = 'assets/images/toolbar/' + imageName + '.svg';
+            let button = toolbar.AddImageButton (image, imageTitle, onClick);
+            button.AddClass ('only_full_width');
+            button.AddClass ('right');
+            return button;
+        }
+
+        function ShowSidebar (sidebar, cookieHandler, panelId)
+        {
+            sidebar.Show (panelId);
+            cookieHandler.SetBoolVal ('ov_show_sidebar', sidebar.IsVisible ());
+        }
+    
+        function ToggleSidebar (sidebar, cookieHandler, panelId)
+        {
+            if (sidebar.GetVisiblePanelId () !== panelId) {
+                ShowSidebar (sidebar, cookieHandler, panelId);
+            } else {
+                ShowSidebar (sidebar, cookieHandler, null);
+            }        
+        }
+
+        const detailsPanelId = this.sidebar.AddPanel (new OV.DetailsSidebarPanel (this.parameters.sidebarDiv));
+        const settingsPanelId = this.sidebar.AddPanel (new OV.SettingsSidebarPanel (this.parameters.sidebarDiv));
+
+        this.detailsPanel = this.sidebar.GetPanel (detailsPanelId);
+
         let obj = this;
+        AddSidebarButton (this.toolbar, 'details', 'Details panel', function () {
+            ToggleSidebar (obj.sidebar, obj.cookieHandler, detailsPanelId);
+            obj.Resize ();
+        });
+
+        if (OV.FeatureSet.SettingsAvailable) {
+            AddSidebarButton (this.toolbar, 'settings', 'Settings panel', function () {
+                ToggleSidebar (obj.sidebar, obj.cookieHandler, settingsPanelId);
+                obj.Resize ();
+            });            
+        }
+
         this.sidebar.Init ({
             onClose : function () {
-                obj.ShowSidebar (null);
+                ShowSidebar (obj.sidebar, obj.cookieHandler, null);
                 obj.Resize ();
             }
         });
+
         let show = this.cookieHandler.GetBoolVal ('ov_show_sidebar', true);
-        this.ShowSidebar (show ? OV.SidebarPanelId.Details : null);
+        ShowSidebar (this.sidebar, this.cookieHandler, show ? detailsPanelId : null);
     }
 
     InitNavigator ()
@@ -493,8 +504,14 @@ OV.Website = class
             getMaterialsForModel : function () {
                 return GetMaterialsForModel (obj.model);
             },
-            getModel : function () {
+            onModelSelected : function () {
-                return obj.model;
+                obj.detailsPanel.AddElementProperties (obj.model);
+            },
+            onMeshSelected : function (meshIndex) {
+                obj.detailsPanel.AddElementProperties (obj.model.GetMesh (meshIndex));
+            },
+            onMaterialSelected : function (materialIndex) {
+                obj.detailsPanel.AddMaterialProperties (obj.model.GetMaterial (materialIndex));
             }
         });
     }