From 0545f382ec5f62a86212bdb67ea732f1d157a649 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Sat, 12 Nov 2016 22:02:19 +0200 Subject: [PATCH] Fixes #2295 Issues with vertical scroll and maxHeight (#2302) * Fixes #2273 * Remove console.log * Fix for zoomable false * Fix initial scrolling with verticalScroll and fix example --- examples/timeline/other/verticalScroll.html | 12 ++++------- lib/timeline/Core.js | 23 +++++++++++---------- lib/timeline/Range.js | 12 +++++++---- 3 files changed, 24 insertions(+), 23 deletions(-) diff --git a/examples/timeline/other/verticalScroll.html b/examples/timeline/other/verticalScroll.html index ddf946f0..78946765 100644 --- a/examples/timeline/other/verticalScroll.html +++ b/examples/timeline/other/verticalScroll.html @@ -52,12 +52,13 @@ zoomKey: 'ctrlKey' date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); var end = new Date(date); + var orderIndex = order + itemsPerGroup * truck items.add({ - id: order + itemsPerGroup * truck, + id: orderIndex, group: truck, start: start, end: end, - content: 'Order ' + order + content: 'Order ' + orderIndex }); } } @@ -70,15 +71,10 @@ zoomKey: 'ctrlKey' maxHeight: 200, start: new Date(), end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - margin: { - item: 10, // minimal margin between items - axis: 5 // minimal margin between items and the axis - }, - orientation: 'top' }; // create a Timeline + options1 = Object.assign({}, options) var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, groups, options1); diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index b809a019..a5cde77a 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -174,11 +174,15 @@ Core.prototype._create = function (container) { this.emit('mousewheel', event); } + // prevent scrolling if not specified explicitly or when horizontalScroll is true + if (!this.options.verticalScroll || this.options.horizontalScroll) return; + // prevent scrolling when zoomKey defined or activated - if (!this.options.zoomKey || event[this.options.zoomKey]) return + if (!this.options.zoomKey || event[this.options.zoomKey]) return; - // prevent scrolling vertically when horizontalScroll is true - if (this.options.horizontalScroll) return + // Prevent default actions caused by mouse wheel + // (else the page and timeline both scroll) + event.preventDefault(); var delta = 0; if (event.wheelDelta) { /* IE/Opera. */ @@ -194,17 +198,9 @@ Core.prototype._create = function (container) { if (this.isActive()) { this._setScrollTop(adjusted); - if (this.options.verticalScroll) { - this.dom.left.parentNode.scrollTop = -adjusted; - this.dom.right.parentNode.scrollTop = -adjusted; - } this._redraw(); this.emit('scroll', event); } - - // Prevent default actions caused by mouse wheel - // (else the page and timeline both scroll) - event.preventDefault(); } if (this.dom.centerContainer.addEventListener) { @@ -1204,6 +1200,11 @@ Core.prototype._updateScrollTop = function () { if (this.props.scrollTop > 0) this.props.scrollTop = 0; if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin; + if (this.options.verticalScroll) { + this.dom.left.parentNode.scrollTop = -this.props.scrollTop; + this.dom.right.parentNode.scrollTop = -this.props.scrollTop; + } + return this.props.scrollTop; }; diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index faa07abe..f0d51b8e 100644 --- a/lib/timeline/Range.js +++ b/lib/timeline/Range.js @@ -488,10 +488,6 @@ Range.prototype._onDragEnd = function (event) { * @private */ Range.prototype._onMouseWheel = function(event) { - // Prevent default actions caused by mouse wheel - // (else the page and timeline both zoom and scroll) - event.preventDefault(); - // retrieve delta var delta = 0; if (event.wheelDelta) { /* IE/Opera. */ @@ -506,6 +502,10 @@ Range.prototype._onMouseWheel = function(event) { if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable) || (!this.options.zoomable && this.options.moveable)) { if (this.options.horizontalScroll) { + // Prevent default actions caused by mouse wheel + // (else the page and timeline both scroll) + event.preventDefault(); + // calculate a single scroll jump relative to the range scale var diff = delta * (this.end - this.start) / 20; // calculate new start and end @@ -544,6 +544,10 @@ Range.prototype._onMouseWheel = function(event) { var pointerDate = this._pointerToDate(pointer); this.zoom(scale, pointerDate, delta); + + // Prevent default actions caused by mouse wheel + // (else the page and timeline both scroll) + event.preventDefault(); } };