Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make sidebar resizable.

Browse Source
This commit is contained in:
kovacsv 2021-11-07 20:04:16 +01:00
parent b09011d39f
commit 10203e71c3
4 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/index.html
View File

@ -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">

4
website/o3dv/css/website.css
View File

@ -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;
}

45
website/o3dv/js/sidebar.js
View File

@ -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 ()

7
website/o3dv/js/website.js
View File

@ -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);