Rolling mode offset (#2950)

docs/timeline/index.html

@@ -955,13 +955,29 @@ function (option, path) {
       <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
     </tr>
 
-    <tr>
-      <td>rollingMode</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','rollingMode', this);">
+      <td><span parent="rollingMode" class="right-caret"></span> rollingMode</td>
+      <td>Object</td>
+      <td><code>Object</code></td>
+      <td>Specify how the timeline implements rolling mode.</td>
+    </tr>
+    <tr parent="rollingMode" class="hidden">
+      <td class="indent">rollingMode.follow</td>
       <td>boolean</td>
       <td><code>false</code></td>
       <td>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.</td>
     </tr>
 
+    <tr parent="rollingMode" class="hidden">
+      <td class="indent">rollingMode.offset</td>
+      <td>Number</td>
+      <td><code>'0.5'</code></td>
+      <td>
+        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%)
+      </td>
+    </tr>
+
     <tr>
       <td>rtl</td>
       <td>boolean</td>

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

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);

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},