Add side bar skeleton.

tools/config.json

@@ -76,6 +76,7 @@
 		"website/o3dv/cookiedialog.js",
 		"website/o3dv/modeldata.js",
 		"website/o3dv/navigator.js",
+		"website/o3dv/sidebar.js",
 		"website/o3dv/hashhandler.js",
 		"website/o3dv/website.css",
 		"website/o3dv/loader.js",

website/embed.html

@@ -90,6 +90,7 @@
 	<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/sidebar.js"></script>
 	<script type="text/javascript" src="o3dv/hashhandler.js"></script>
 	<link rel="stylesheet" type="text/css" href="o3dv/website.css">
 	<script type="text/javascript" src="o3dv/loader.js"></script>

website/index.html

@@ -90,6 +90,7 @@
 	<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/sidebar.js"></script>
 	<script type="text/javascript" src="o3dv/hashhandler.js"></script>
 	<link rel="stylesheet" type="text/css" href="o3dv/website.css">
 	<script type="text/javascript" src="o3dv/loader.js"></script>
@@ -111,6 +112,7 @@
 				mainDiv : $('#main'),
 				introDiv : $('#intro'),
 				navigatorDiv : $('#main_navigator'),
+				sidebarDiv : $('#main_sidebar'),
 				viewerDiv : $('#main_viewer'),
 				fileInput : $('#open_file')
 			});
@@ -144,6 +146,8 @@
 		</div>
 		<div class="main_viewer" id="main_viewer">
 		</div>
+		<div class="main_sidebar only_full_width" id="main_sidebar">
+		</div>
 	</div>
 	<div class="intro ov_thin_scrollbar" id="intro">
 		<div class="intro_section only_full_width only_full_height"><img src="assets/images/3dviewer_net_logo.svg" class="intro_logo"></img></div>

website/o3dv/sidebar.js

@@ -0,0 +1,9 @@
+OV.Sidebar = class
+{
+    constructor (parentDiv)
+    {
+        this.parentDiv = parentDiv;
+        this.titleDiv = $('<div>').addClass ('ov_sidebar_title').addClass ('ov_thin_scrollbar').appendTo (parentDiv);
+        this.titleDiv.html ('Details');
+    }
+};

website/o3dv/website.css

@@ -129,6 +129,14 @@ div.main_viewer
 	float: left;
 }
 
+div.main_sidebar
+{
+	width: 240px;
+	margin: 10px 10px 10px 0px;
+	overflow: none;
+	float: right;
+}
+
 div.main_viewer canvas
 {
 	margin: 10px;
@@ -240,6 +248,17 @@ div.ov_navigator_info_panel img.ov_navigator_info_button_icon
 	float: right;
 }
 
+div.ov_sidebar_title
+{
+	font-weight: bold;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-bottom: 10px;
+	margin-bottom: 10px;
+	border-bottom: 1px solid #dddddd;
+}
+
 div.ov_tree_view
 {
 	user-select: none;

website/o3dv/website.js

@@ -8,6 +8,7 @@ OV.Website = class
         this.cookieHandler = new OV.CookieHandler ();
         this.toolbar = new OV.Toolbar (this.parameters.toolbarDiv);
         this.navigator = new OV.Navigator (this.parameters.navigatorDiv);
+        this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
         this.importSettings = new OV.ImportSettings ();
         this.modelLoader = new OV.ThreeModelLoader ();
         this.highlightMaterial = new THREE.MeshPhongMaterial ({
@@ -49,13 +50,15 @@ OV.Website = class
         let headerHeight = parseInt (this.parameters.headerDiv.outerHeight (true), 10);
 
         let navigatorWidth = 0;
+        let sidebarWidth = 0;
         let safetyMargin = 0;
         if (!OV.IsSmallWidth ()) {
             navigatorWidth = parseInt (this.parameters.navigatorDiv.outerWidth (true), 10);
+            sidebarWidth = parseInt (this.parameters.sidebarDiv.outerWidth (true), 10);
             safetyMargin = 1;
         }
         
-        let contentWidth = windowWidth - navigatorWidth - safetyMargin;
+        let contentWidth = windowWidth - navigatorWidth - sidebarWidth - safetyMargin;
         let contentHeight = windowHeight - headerHeight - safetyMargin;
         this.parameters.navigatorDiv.outerHeight (contentHeight, true);
         this.parameters.introDiv.outerHeight (contentHeight, true);