added zoomKey to apply zooming only when a specific key is down

docs/timeline/index.html

@@ -907,6 +907,16 @@ function (option, path) {
       </td>
     </tr>
 
+	<tr>
+      <td>zoomKey</td>
+      <td>String</td>
+      <td><code>''</code></td>
+      <td>Specifies whether the Timeline is only zoomed when an additional key is down.
+      	Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
+        Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+      </td>
+    </tr>
+
     <tr>
       <td>zoomMax</td>
       <td>number</td>

lib/timeline/Range.js

@@ -78,7 +78,7 @@ Range.prototype = new Component();
 Range.prototype.setOptions = function (options) {
   if (options) {
     // copy the options that we know
-    var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate', 'hiddenDates'];
+    var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable', 'activate', 'hiddenDates', 'zoomKey'];
     util.selectiveExtend(fields, this.options, options);
 
     if ('start' in options || 'end' in options) {
@@ -474,6 +474,9 @@ Range.prototype._onMouseWheel = function(event) {
 
   // only zoom when the mouse is inside the current range
   if (!this._isInsideRange(event)) return;
+  
+  // only zoom when the according key is pressed and the zoom_key option is set
+  if (this.options.zoomKey && !event[this.options.zoomKey]) return;
 
   // retrieve delta
   var delta = 0;

lib/timeline/optionsTimeline.js

@@ -113,6 +113,7 @@ let allOptions = {
   type: {string},
   width: {string, number},
   zoomable: {boolean},
+  zoomKey: {string},
   zoomMax: {number},
   zoomMin: {number},
 
@@ -197,6 +198,7 @@ let configureOptions = {
     type: ['box', 'point', 'range', 'background'],
     width: '100%',
     zoomable: true,
+    zoomKey: ['ctrlKey', 'altKey', 'metaKey', ''],
     zoomMax: [315360000000000, 10, 315360000000000, 1],
     zoomMin: [10, 10, 315360000000000, 1]
   }