feat(timeline): #2647 Dynamic rolling mode option (#2705)

* Fix redraw order
* Fix error when option is not defined
* Allow template labels
* Add .travis.yml file
* Add experiment travis code
* Fix react example
* Add toggleRollingMode option
* Update docs with toggleRollingMode option

docs/timeline/index.html

@@ -1431,6 +1431,13 @@ document.getElementById('myTimeline').onclick = function (event) {
       </td>
     </tr>
 
+    <tr>
+      <td>toggleRollingMode()</td>
+      <td>none</td>
+      <td>Toggle rollingMode.
+      </td>
+    </tr>
+
      <tr>
       <td>zoomIn(percentage)</td>
       <td>none</td>

examples/timeline/interaction/navigationMenu.html

@@ -38,6 +38,7 @@
         <input type="button" id="zoomOut" value="Zoom out"/>
         <input type="button" id="moveLeft" value="Move left"/>
         <input type="button" id="moveRight" value="Move right"/>
+        <input type="button" id="toggleRollingMode" value="toggleRollingMode"/>
     </div>
 </div>
 
@@ -74,6 +75,8 @@
     document.getElementById('zoomOut').onclick   = function () { timeline.zoomOut( 0.2); };
     document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
     document.getElementById('moveRight').onclick = function () { move(-0.2); };
+    document.getElementById('toggleRollingMode').onclick = function () { timeline.toggleRollingMode() };
+
 
 </script>
 </body>

lib/timeline/Timeline.js

@@ -572,4 +572,20 @@ Timeline.prototype.getEventProperties = function (event) {
   }
 };
 
+/**
+ * Toggle Timeline rolling mode
+ */
+
+Timeline.prototype.toggleRollingMode = function () {
+  if (this.range.rolling) {
+    this.range.stopRolling();
+  } else {
+    if (this.options.rollingMode == undefined) {
+      this.setOptions(options)
+    }
+    this.range.startRolling();
+  }
+
+}
+
 module.exports = Timeline;