diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index c5ed6640..4fb318ec 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -955,13 +955,29 @@ function (option, path) {
Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline. |
-
- rollingMode |
+
+ rollingMode |
+ Object |
+ Object |
+ Specify how the timeline implements rolling mode. |
+
+
+ rollingMode.follow |
boolean |
false |
If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position. |
+
+ rollingMode.offset |
+ Number |
+ '0.5' |
+
+ Set how far from the left the rolling mode is implemented from. A percentage (i.e. a decimal between 0 and 1)
+ Defaults to the middle or 0.5 (50%)
+ |
+
+
rtl |
boolean |
diff --git a/examples/timeline/interaction/rollingMode.html b/examples/timeline/interaction/rollingMode.html
index ebe3fcfb..199d3e39 100644
--- a/examples/timeline/interaction/rollingMode.html
+++ b/examples/timeline/interaction/rollingMode.html
@@ -33,7 +33,10 @@
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
- rollingMode: true
+ rollingMode: {
+ follow: true,
+ offset: 0.5
+ }
};
// create a Timeline
diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js
index a00435ad..f568bc58 100644
--- a/lib/timeline/Range.js
+++ b/lib/timeline/Range.js
@@ -45,7 +45,11 @@ function Range(body, options) {
min: null,
max: null,
zoomMin: 10, // milliseconds
- zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds
+ zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
+ rollingMode: {
+ follow: false,
+ offset: 0.5
+ }
};
this.options = util.extend({}, this.defaultOptions);
this.props = {
@@ -94,11 +98,11 @@ Range.prototype.setOptions = function (options) {
// copy the options that we know
var fields = [
'animation', 'direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable',
- 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'showCurrentTime', 'rollMode', 'horizontalScroll'
+ 'moment', 'activate', 'hiddenDates', 'zoomKey', 'rtl', 'showCurrentTime', 'rollingMode', 'horizontalScroll'
];
util.selectiveExtend(fields, this.options, options);
- if (options.rollingMode) {
+ if (options.rollingMode && options.rollingMode.follow) {
this.startRolling();
}
if ('start' in options || 'end' in options) {
@@ -134,8 +138,8 @@ Range.prototype.startRolling = function() {
var interval = me.end - me.start;
var t = util.convert(new Date(), 'Date').valueOf();
- var start = t - interval / 2;
- var end = t + interval / 2;
+ var start = t - interval * (me.options.rollingMode.offset);
+ var end = t + interval * (1 - me.options.rollingMode.offset);
var animation = (me.options && me.options.animation !== undefined) ? me.options.animation : true;
var options = {
@@ -647,7 +651,7 @@ Range.prototype._onMouseWheel = function(event) {
// calculate center, the date to zoom around
var pointerDate
if (this.rolling) {
- pointerDate = (this.start + this.end) / 2;
+ pointerDate = this.start + ((this.end - this.start) * this.options.rollingMode.offset);
} else {
var pointer = this.getPointer({x: event.clientX, y: event.clientY}, this.body.dom.center);
pointerDate = this._pointerToDate(pointer);
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 6251bcac..41ac8d0b 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -26,7 +26,11 @@ let allOptions = {
//globals :
align: {string},
rtl: { 'boolean': bool, 'undefined': 'undefined'},
- rollingMode: { 'boolean': bool, 'undefined': 'undefined'},
+ rollingMode: {
+ follow: { 'boolean': bool },
+ offset: {number,'undefined': 'undefined'},
+ __type__: {object}
+ },
verticalScroll: { 'boolean': bool, 'undefined': 'undefined'},
horizontalScroll: { 'boolean': bool, 'undefined': 'undefined'},
autoResize: { 'boolean': bool},