Add zoomIn and zoomOut to timeline core (#2239)

* Add zoomIn and zoomOut to timeline core functionality
* Fix example
* Fix jsdocs params
* inforce zoom percentage to be between 0 and 1

docs/timeline/index.html

@@ -1322,9 +1322,20 @@ document.getElementById('myTimeline').onclick = function (event) {
       </td>
     </tr>
 
-  </table>
-
+     <tr>
+      <td>zoomIn(percentage)</td>
+      <td>none</td>
+      <td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
+      </td>
+    </tr>
+    <tr>
+      <td>zoomOut(percentage)</td>
+      <td>none</td>
+      <td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
+      </td>
+    </tr>
 
+  </table>
 
   <h2 id="Events">Events</h2>
   <p>

examples/timeline/interaction/navigationMenu.html

@@ -69,44 +69,9 @@
         });
     }
 
-    /**
-     * Zoom the timeline a given percentage in or out
-     * @param {Number} percentage   For example 0.1 (zoom out) or -0.1 (zoom in)
-     */
-   function zoomIn(percentage) {
-      var range = timeline.getWindow();
-      var start = range.start.valueOf();
-      var end = range.end.valueOf();
-      var interval = end - start;
-      var newInterval = interval / (1 + percentage);
-      var distance = (interval - newInterval) / 2;
-      var newStart = start + distance;
-      var newEnd = end - distance;
-
-      timeline.setWindow({
-        start   : newStart,
-        end     : newEnd
-      });
-    }
-
-    function zoomOut(percentage) {
-      var range = timeline.getWindow();
-      var start = range.start.valueOf();
-      var end = range.end.valueOf();
-      var interval = end - start;
-      var newStart = start - interval * percentage / 2;
-      var newEnd = end + interval * percentage / 2;
-
-      timeline.setWindow({
-        start   : newStart,
-        end     : newEnd
-      });
-    }
-
-
     // attach events to the navigation buttons
-    document.getElementById('zoomIn').onclick    = function () { zoomIn( 0.2); };
-    document.getElementById('zoomOut').onclick   = function () { zoomOut( 0.2); };
+    document.getElementById('zoomIn').onclick    = function () { timeline.zoomIn( 0.2); };
+    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); };
 

lib/timeline/Core.js

@@ -676,6 +676,46 @@ Core.prototype.getWindow = function() {
   };
 };
 
+/**
+ * Zoom in the window such that given time is centered on screen.
+ * @param {Number} percentage - must be between [0..1]
+ */
+Core.prototype.zoomIn = function(percentage) {
+  if (!percentage || percentage < 0 || percentage > 1) return
+  var range = this.getWindow();
+  var start = range.start.valueOf();
+  var end = range.end.valueOf();
+  var interval = end - start;
+  var newInterval = interval / (1 + percentage);
+  var distance = (interval - newInterval) / 2;
+  var newStart = start + distance;
+  var newEnd = end - distance;
+
+  this.setWindow({
+    start   : newStart,
+    end     : newEnd
+  });
+};
+
+/**
+ * Zoom out the window such that given time is centered on screen.
+ * @param {Number} percentage - must be between [0..1]
+ */
+Core.prototype.zoomOut = function(percentage) {
+  if (!percentage || percentage < 0 || percentage > 1) return
+  var range = this.getWindow();
+  var start = range.start.valueOf();
+  var end = range.end.valueOf();
+  var interval = end - start;
+  var newStart = start - interval * percentage / 2;
+  var newEnd = end + interval * percentage / 2;
+
+  this.setWindow({
+    start   : newStart,
+    end     : newEnd
+  });
+};
+
 /**
  * Force a redraw. Can be overridden by implementations of Core
  *
@@ -1145,4 +1185,4 @@ Core.prototype._createConfigurator = function () {
   throw new Error('Cannot invoke abstract method _createConfigurator');
 };
 
-module.exports = Core;
+module.exports = Core;