diff --git a/root/index.html b/root/index.html
index 6e4e6d6b..91de83a2 100644
--- a/root/index.html
+++ b/root/index.html
@@ -191,19 +191,26 @@
// -----------------------------------------------------------
// Add the window splitters
// -----------------------------------------------------------
- var sidebarSplitter = Split(['#left-sidebar', '#explorer'], {
+ var gutterWidth = 4;
+ var minWidths = [160, 240]; // pixels
+ var minHeights = [100, 100]; // pixels
+ var horzInitialSizes = [30, 70]; // percents
+ var vertInitialSizes = [70, 30]; // percents
+ var horzSplitPanes = ['#left-sidebar', '#explorer'];
+ var vertSplitPanes = ['#globe', '#info-panel'];
+ var sidebarSplitter = Split(horzSplitPanes, {
direction: 'horizontal',
- minSize: [160, 240], // pixels
- sizes: [30, 70], // percentages
- gutterSize: 3
+ minSize: minWidths, // pixels
+ sizes: horzInitialSizes, // percentages
+ gutterSize: gutterWidth
});
- var infoSplitter = Split(['#globe', '#info-panel'], {
+ var infoSplitter = Split(vertSplitPanes, {
direction: 'vertical',
- minSize: [100, 100],
- sizes: [70, 30],
- gutterSize: 3
+ minSize: minHeights,
+ sizes: vertInitialSizes,
+ gutterSize: gutterWidth
});
- sidebarSplitter.collapse(0); // collapse the sidebar (left) panel
+// sidebarSplitter.collapse(0); // collapse the sidebar (left) panel
infoSplitter.collapse(1); // collapse the info (bottom) panel
// Add a handler to collapse the left side panel
@@ -221,11 +228,11 @@
});
// Add a handler to toggle the left side panel
$('.left-sidebar-btn').on('click', sidebarSplitter, function (event) {
- var splitter = event.data;
- if ($('#left-sidebar').width() < 100) {
+ var splitter = event.data;
+ if ($(horzSplitPanes[0]).width() < 100) {
// Expand the sidebar
if (splitter.lastSizes === undefined) {
- splitter.setSizes([30, 70]); // percentages
+ splitter.setSizes(horzInitialSizes); // percentages
} else {
splitter.setSizes(splitter.lastSizes);
}
@@ -238,10 +245,10 @@
// Add a handler to toggle the info panel
$('.info-panel-btn').on('click', infoSplitter, function (event) {
var splitter = event.data;
- if ($('#info-panel').height() < 100) {
+ if ($(vertSplitPanes[1]).height() < 100) {
// Expand the panel
if (splitter.lastSizes === undefined) {
- splitter.setSizes([70, 30]); // percentages
+ splitter.setSizes(vertInitialSizes); // percentages
} else {
splitter.setSizes(splitter.lastSizes);
}
@@ -250,6 +257,17 @@
splitter.collapse(1);
}
});
+ $(window).resize(function () {
+ // Force re-calc of size percentages when collapsed.
+ // Bug: The collapsed window has a 'fixed' and variable
+ // percentages need to be recomputed during the resize,
+ // else during resizing to a smaller window, the remaining
+ // split-window's size could be fractionally to big to fit
+ // into its container and wrap occurs)
+ if ($(horzSplitPanes[0]).width() < 5) {
+ sidebarSplitter.collapse(0)
+ }
+ });