From 178e9dc915fe2057e3c924d77122db2a06e07878 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Fri, 21 Oct 2016 16:59:46 +0300 Subject: [PATCH] Horizontal scroll (#2201) * Hide vertically hidden ranged items in groups that are not visible * Add vertical scroll when zoom is inactive * Fix review comments * Add horizontalScroll option --- docs/timeline/index.html | 9 +++ examples/timeline/other/horizontalScroll.html | 77 +++++++++++++++++++ lib/timeline/Core.js | 5 +- lib/timeline/Range.js | 38 +++++---- lib/timeline/optionsTimeline.js | 1 + 5 files changed, 116 insertions(+), 14 deletions(-) create mode 100644 examples/timeline/other/horizontalScroll.html diff --git a/docs/timeline/index.html b/docs/timeline/index.html index cd02f3d2..c45440ed 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -675,6 +675,15 @@ function (option, path) { + + horizontalScroll + Boolean + false + This option allows you to scroll horizontally to move backwards and forwards in the time range. + Only applicable when option zoomCtrl is defined or zoomable is false. + + + itemsAlwaysDraggable boolean diff --git a/examples/timeline/other/horizontalScroll.html b/examples/timeline/other/horizontalScroll.html new file mode 100644 index 00000000..a999cd51 --- /dev/null +++ b/examples/timeline/other/horizontalScroll.html @@ -0,0 +1,77 @@ + + + Timeline | Horizontal Scroll Option + + + + + + + + + +

Timeline horizontal scroll option

+ +
+ + + + + diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 7b5be3e6..76ed050b 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -161,6 +161,9 @@ Core.prototype._create = function (container) { // prevent scrolling when zoomKey defined or activated if (!me.options.zoomKey || event[me.options.zoomKey]) return + // prevent scrolling vertically when horizontalScroll is true + if (me.options.horizontalScroll) return + var delta = 0; if (event.wheelDelta) { /* IE/Opera. */ delta = event.wheelDelta / 120; @@ -254,7 +257,7 @@ Core.prototype.setOptions = function (options) { var fields = [ 'width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates', - 'locale', 'locales', 'moment', 'rtl', 'zoomKey' + 'locale', 'locales', 'moment', 'rtl', 'zoomKey', 'horizontalScroll' ]; util.selectiveExtend(fields, this.options, options); diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index 41e500af..075b0baa 100644 --- a/lib/timeline/Range.js +++ b/lib/timeline/Range.js @@ -81,7 +81,7 @@ Range.prototype.setOptions = function (options) { // copy the options that we know var fields = [ 'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', - 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl' + 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'horizontalScroll' ]; util.selectiveExtend(fields, this.options, options); @@ -483,15 +483,10 @@ Range.prototype._onDragEnd = function (event) { * @private */ Range.prototype._onMouseWheel = function(event) { - // only allow zooming when configured as zoomable and moveable - if (!(this.options.zoomable && this.options.moveable)) return; - - // only zoom when the mouse is inside the current range - if (!this._isInsideRange(event)) return; + // Prevent default actions caused by mouse wheel + // (else the page and timeline both zoom and scroll) + event.preventDefault(); - // only zoom when the according key is pressed and the zoomKey option is set - if (this.options.zoomKey && !event[this.options.zoomKey]) return; - // retrieve delta var delta = 0; if (event.wheelDelta) { /* IE/Opera. */ @@ -502,6 +497,27 @@ Range.prototype._onMouseWheel = function(event) { delta = -event.detail / 3; } + // don't allow zoom when the according key is pressed and the zoomKey option or not zoomable but movable + if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable) + || (!this.options.zoomable && this.options.moveable)) { + if (this.options.horizontalScroll) { + // calculate a single scroll jump relative to the range scale + var diff = delta * (this.end - this.start) / 20; + // calculate new start and end + var newStart = this.start - diff; + var newEnd = this.end - diff; + + this.setRange(newStart, newEnd); + } + return; + } + + // only allow zooming when configured as zoomable and moveable + if (!(this.options.zoomable && this.options.moveable)) return; + + // only zoom when the mouse is inside the current range + if (!this._isInsideRange(event)) return; + // If delta is nonzero, handle it. // Basically, delta is now positive if wheel was scrolled up, // and negative, if wheel was scrolled down. @@ -524,10 +540,6 @@ Range.prototype._onMouseWheel = function(event) { this.zoom(scale, pointerDate, delta); } - - // Prevent default actions caused by mouse wheel - // (else the page and timeline both zoom and scroll) - event.preventDefault(); }; /** diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index a20d27f4..bfcac84b 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -26,6 +26,7 @@ let allOptions = { //globals : align: {string}, rtl: {boolean, 'undefined': 'undefined'}, + horizontalScroll: {boolean, 'undefined': 'undefined'}, autoResize: {boolean}, clickToUse: {boolean}, dataAttributes: {string, array},