From 10203e71c363d01586572221ff83fad2fea5710a Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Sun, 7 Nov 2021 20:04:16 +0100
Subject: [PATCH] Make sidebar resizable.

---
 website/index.html           | 14 +++++------
 website/o3dv/css/website.css |  4 ++--
 website/o3dv/js/sidebar.js   | 45 ++++++++++++++++++++++++++++--------
 website/o3dv/js/website.js   |  7 +++++-
 4 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/website/index.html b/website/index.html
index ef90cbc..b2669e2 100644
--- a/website/index.html
+++ b/website/index.html
@@ -138,6 +138,7 @@
 				navigatorDiv : $('#main_navigator'),
 				navigatorSplitterDiv : $('#main_navigator_splitter'),
 				sidebarDiv : $('#main_sidebar'),
+				sidebarSplitterDiv : $('#main_sidebar_splitter'),
 				viewerDiv : $('#main_viewer'),
 				fileInput : $('#open_file'),
 				eventHandler : window.gtagEventHandler
@@ -166,14 +167,11 @@
 		<div class="toolbar" id="toolbar"></div>
 	</div>
 	<div class="main" id="main">
-		<div class="main_navigator ov_panel_set_container only_full_width" id="main_navigator">
-		</div>
-		<div class="main_navigator_splitter only_full_width" id="main_navigator_splitter">
-		</div>
-		<div class="main_viewer" id="main_viewer">
-		</div>
-		<div class="main_sidebar ov_panel_set_right_container only_full_width" id="main_sidebar">
-		</div>
+		<div class="main_navigator ov_panel_set_container only_full_width" id="main_navigator"></div>
+		<div class="main_splitter only_full_width" id="main_navigator_splitter"></div>
+		<div class="main_viewer" id="main_viewer"></div>
+		<div class="main_splitter only_full_width" id="main_sidebar_splitter"></div>
+		<div class="main_sidebar ov_panel_set_right_container 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">
diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css
index 47ef502..e7a21b2 100644
--- a/website/o3dv/css/website.css
+++ b/website/o3dv/css/website.css
@@ -109,7 +109,7 @@ div.main_navigator
 	float: left;
 }
 
-div.main_navigator_splitter
+div.main_splitter
 {
 	width: 10px;
 	overflow: none;
@@ -125,7 +125,7 @@ div.main_viewer
 div.main_sidebar
 {
 	width: 320px;
-	margin: 10px 0px 10px 10px;
+	margin: 10px 0px 10px 0px;
 	overflow: none;
 	float: right;
 }
diff --git a/website/o3dv/js/sidebar.js b/website/o3dv/js/sidebar.js
index 058969b..3a5f456 100644
--- a/website/o3dv/js/sidebar.js
+++ b/website/o3dv/js/sidebar.js
@@ -1,8 +1,9 @@
 OV.Sidebar = class
 {
-    constructor (mainDiv)
+    constructor (mainDiv, splitterDiv)
     {
         this.mainDiv = mainDiv;
+        this.splitterDiv = splitterDiv;
         this.panelSet = new OV.PanelSet (mainDiv);
 
         this.detailsPanel = new OV.DetailsSidebarPanel (this.panelSet.GetContentDiv ());
@@ -30,9 +31,9 @@ OV.Sidebar = class
         this.panelSet.Init ({
             onResize : () => {
                 if (this.panelSet.IsPanelsVisible ()) {
-                    //this.splitterDiv.show ();
+                    this.splitterDiv.show ();
                 } else {
-                    //this.splitterDiv.hide ();
+                    this.splitterDiv.hide ();
                 }
                 this.callbacks.onResize ();
             },
@@ -57,6 +58,25 @@ OV.Sidebar = class
                 }
             }
         );
+
+        let originalWidth = null;
+        OV.CreateVerticalSplitter (this.splitterDiv, {
+            onSplitStart : () => {
+                originalWidth = this.mainDiv.outerWidth (true);
+            },
+            onSplit : (xDiff) => {
+                const minWidth = 260;
+                const maxWidth = 450;
+                let newWidth = originalWidth - xDiff;
+                if (newWidth < minWidth) {
+                    newWidth = minWidth;
+                } else if (newWidth > maxWidth)  {
+                    newWidth = maxWidth;
+                }
+                this.mainDiv.outerWidth (newWidth, true);
+                this.callbacks.onResize ();
+            }
+        });
     }
 
     Update (model)
@@ -67,19 +87,24 @@ OV.Sidebar = class
     Resize (height)
     {
         this.mainDiv.outerHeight (height, true);
-        //this.splitterDiv.outerHeight (height, true);
+        this.splitterDiv.outerHeight (height, true);
         this.panelSet.Resize ();
     }
 
     GetWidth ()
     {
         let sidebarWidth = parseInt (this.mainDiv.outerWidth (true), 10);
-        // let splitterWidth = 0;
-        // if (this.panelSet.IsPanelsVisible ()) {
-        //     splitterWidth = parseInt (this.splitterDiv.outerWidth (true), 10);
-        // }
-        //return sidebarWidth + splitterWidth;
-        return sidebarWidth;
+        let splitterWidth = 0;
+        if (this.panelSet.IsPanelsVisible ()) {
+             splitterWidth = parseInt (this.splitterDiv.outerWidth (true), 10);
+        }
+        return sidebarWidth + splitterWidth;
+    }
+
+    DecreaseWidth (diff)
+    {
+        let oldWidth = this.mainDiv.outerWidth (true);
+        this.mainDiv.outerWidth (oldWidth - diff, true);
     }
 
     Clear ()
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index 39f2585..ea86e0f 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -15,7 +15,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.parameters.navigatorSplitterDiv);
-        this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv);
+        this.sidebar = new OV.Sidebar (this.parameters.sidebarDiv, this.parameters.sidebarSplitterDiv);
         this.eventHandler = new OV.EventHandler (this.parameters.eventHandler);
         this.settings = new OV.Settings ();
         this.modelLoader = new OV.ThreeModelLoader ();
@@ -65,7 +65,12 @@ OV.Website = class
             sidebarWidth = this.sidebar.GetWidth ();
         }
 
+        const minContentWidth = 50;
         let contentWidth = windowWidth - navigatorWidth - sidebarWidth;
+        if (contentWidth < minContentWidth) {
+            this.sidebar.DecreaseWidth (minContentWidth - contentWidth);
+            contentWidth = minContentWidth;
+        }
         let contentHeight = windowHeight - headerHeight;
 
         this.parameters.sidebarDiv.outerHeight (contentHeight, true);