From 5f7a721bf9728dd1ac8390b6835c00bb779df251 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Fri, 2 Dec 2016 10:56:05 +0200 Subject: [PATCH] Fixed #2312 vertical scroll bug with groups and fixed height (#2363) * Fix left/right group alignment * Add _setDOM and remove scrollbar when there is no scrolling * Readd calculation of scrollbar width on resize --- lib/timeline/Core.js | 139 ++++++++++++++++++++++++------------------- 1 file changed, 79 insertions(+), 60 deletions(-) diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 35f8f208..8ece3c41 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -797,8 +797,8 @@ Core.prototype._redraw = function() { props.border.right = props.border.left; props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2; props.border.bottom = props.border.top; - var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight; - var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth; + props.borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight; + props.borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth; // workaround for a bug in IE: the clientWidth of an element with // a height:0px and overflow:hidden is not calculated and always has value 0 @@ -807,7 +807,7 @@ Core.prototype._redraw = function() { props.border.right = props.border.left; } if (dom.root.clientHeight === 0) { - borderRootWidth = borderRootHeight; + props.borderRootWidth = props.borderRootHeight; } // calculate the heights. If any of the side panels is empty, we set the height to @@ -824,28 +824,28 @@ Core.prototype._redraw = function() { // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM) var contentHeight = Math.max(props.left.height, props.center.height, props.right.height); var autoHeight = props.top.height + contentHeight + props.bottom.height + - borderRootHeight + props.border.top + props.border.bottom; + props.borderRootHeight + props.border.top + props.border.bottom; dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px'); // calculate heights of the content panels props.root.height = dom.root.offsetHeight; - props.background.height = props.root.height - borderRootHeight; + props.background.height = props.root.height - props.borderRootHeight; var containerHeight = props.root.height - props.top.height - props.bottom.height - - borderRootHeight; + props.borderRootHeight; props.centerContainer.height = containerHeight; props.leftContainer.height = containerHeight; props.rightContainer.height = props.leftContainer.height; // calculate the widths of the panels props.root.width = dom.root.offsetWidth; - props.background.width = props.root.width - borderRootWidth; + props.background.width = props.root.width - props.borderRootWidth; if (!this.initialDrawDone) { props.scrollbarWidth = util.getScrollBarWidth(); } - if (this.options.verticalScroll) { - if (this.options.rtl) { + if (options.verticalScroll) { + if (options.rtl) { props.left.width = dom.leftContainer.clientWidth || -props.border.left; props.right.width = dom.rightContainer.clientWidth + props.scrollbarWidth || -props.border.right; } else { @@ -857,46 +857,7 @@ Core.prototype._redraw = function() { props.right.width = dom.rightContainer.clientWidth || -props.border.right; } - props.leftContainer.width = props.left.width; - props.rightContainer.width = props.right.width; - var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth; - props.center.width = centerWidth; - props.centerContainer.width = centerWidth; - props.top.width = centerWidth; - props.bottom.width = centerWidth; - - // resize the panels - dom.background.style.height = props.background.height + 'px'; - dom.backgroundVertical.style.height = props.background.height + 'px'; - dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px'; - dom.centerContainer.style.height = props.centerContainer.height + 'px'; - dom.leftContainer.style.height = props.leftContainer.height + 'px'; - dom.rightContainer.style.height = props.rightContainer.height + 'px'; - - dom.background.style.width = props.background.width + 'px'; - dom.backgroundVertical.style.width = props.centerContainer.width + 'px'; - dom.backgroundHorizontal.style.width = props.background.width + 'px'; - dom.centerContainer.style.width = props.center.width + 'px'; - dom.top.style.width = props.top.width + 'px'; - dom.bottom.style.width = props.bottom.width + 'px'; - - // reposition the panels - dom.background.style.left = '0'; - dom.background.style.top = '0'; - dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px'; - dom.backgroundVertical.style.top = '0'; - dom.backgroundHorizontal.style.left = '0'; - dom.backgroundHorizontal.style.top = props.top.height + 'px'; - dom.centerContainer.style.left = props.left.width + 'px'; - dom.centerContainer.style.top = props.top.height + 'px'; - dom.leftContainer.style.left = '0'; - dom.leftContainer.style.top = props.top.height + 'px'; - dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px'; - dom.rightContainer.style.top = props.top.height + 'px'; - dom.top.style.left = props.left.width + 'px'; - dom.top.style.top = '0'; - dom.bottom.style.left = props.left.width + 'px'; - dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px'; + this._setDOM(); // update the scrollTop, feasible range for the offset can be changed // when the height of the Core or of the contents of the center changed @@ -904,17 +865,14 @@ Core.prototype._redraw = function() { // reposition the scrollable contents if (options.orientation.item != 'top') { - offset += Math.max(this.props.centerContainer.height - this.props.center.height - - this.props.border.top - this.props.border.bottom, 0); + offset += Math.max(props.centerContainer.height - props.center.height - + props.border.top - props.border.bottom, 0); } - dom.center.style.left = '0'; dom.center.style.top = offset + 'px'; - dom.left.style.left = '0'; - dom.right.style.left = '0'; // show shadows when vertical scrolling is available - var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : ''; - var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : ''; + var visibilityTop = props.scrollTop == 0 ? 'hidden' : ''; + var visibilityBottom = props.scrollTop == props.scrollTopMin ? 'hidden' : ''; dom.shadowTop.style.visibility = visibilityTop; dom.shadowBottom.style.visibility = visibilityBottom; dom.shadowTopLeft.style.visibility = visibilityTop; @@ -922,18 +880,31 @@ Core.prototype._redraw = function() { dom.shadowTopRight.style.visibility = visibilityTop; dom.shadowBottomRight.style.visibility = visibilityBottom; - if (this.options.verticalScroll) { + if (options.verticalScroll) { + dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll'; + dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll'; + dom.shadowTopRight.style.visibility = "hidden"; dom.shadowBottomRight.style.visibility = "hidden"; dom.shadowTopLeft.style.visibility = "hidden"; dom.shadowBottomLeft.style.visibility = "hidden"; - } else { + + dom.left.style.top = '0px'; + dom.right.style.top = '0px'; + } + + if (!options.verticalScroll || props.center.height < props.centerContainer.height) { dom.left.style.top = offset + 'px'; dom.right.style.top = offset + 'px'; + dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' '); + dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' '); + props.left.width = dom.leftContainer.clientWidth || -props.border.left; + props.right.width = dom.rightContainer.clientWidth || -props.border.right; + this._setDOM(); } // enable/disable vertical panning - var contentsOverflow = this.props.center.height > this.props.centerContainer.height; + var contentsOverflow = props.center.height > props.centerContainer.height; this.hammer.get('pan').set({ direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL }); @@ -954,13 +925,61 @@ Core.prototype._redraw = function() { } else { this.redrawCount = 0; } - this.initialDrawDone = true; //Emit public 'changed' event for UI updates, see issue #1592 this.body.emitter.emit("changed"); }; +Core.prototype._setDOM = function () { + var props = this.props; + var dom = this.dom; + + props.leftContainer.width = props.left.width; + props.rightContainer.width = props.right.width; + var centerWidth = props.root.width - props.left.width - props.right.width - props.borderRootWidth; + props.center.width = centerWidth; + props.centerContainer.width = centerWidth; + props.top.width = centerWidth; + props.bottom.width = centerWidth; + + // resize the panels + dom.background.style.height = props.background.height + 'px'; + dom.backgroundVertical.style.height = props.background.height + 'px'; + dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px'; + dom.centerContainer.style.height = props.centerContainer.height + 'px'; + dom.leftContainer.style.height = props.leftContainer.height + 'px'; + dom.rightContainer.style.height = props.rightContainer.height + 'px'; + + dom.background.style.width = props.background.width + 'px'; + dom.backgroundVertical.style.width = props.centerContainer.width + 'px'; + dom.backgroundHorizontal.style.width = props.background.width + 'px'; + dom.centerContainer.style.width = props.center.width + 'px'; + dom.top.style.width = props.top.width + 'px'; + dom.bottom.style.width = props.bottom.width + 'px'; + + // reposition the panels + dom.background.style.left = '0'; + dom.background.style.top = '0'; + dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px'; + dom.backgroundVertical.style.top = '0'; + dom.backgroundHorizontal.style.left = '0'; + dom.backgroundHorizontal.style.top = props.top.height + 'px'; + dom.centerContainer.style.left = props.left.width + 'px'; + dom.centerContainer.style.top = props.top.height + 'px'; + dom.leftContainer.style.left = '0'; + dom.leftContainer.style.top = props.top.height + 'px'; + dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px'; + dom.rightContainer.style.top = props.top.height + 'px'; + dom.top.style.left = props.left.width + 'px'; + dom.top.style.top = '0'; + dom.bottom.style.left = props.left.width + 'px'; + dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px'; + dom.center.style.left = '0'; + dom.left.style.left = '0'; + dom.right.style.left = '0'; +} + // TODO: deprecated since version 1.1.0, remove some day Core.prototype.repaint = function () { throw new Error('Function repaint is deprecated. Use redraw instead.');