Bidirectional scrolling in timeline - make horizontalScroll and verticalScroll work together (#3162)

* Bidirectional scrolling.
Make horizontalScroll and verticalScroll work together.

* Fix delta variable declaration

Using ?: operator

* Remove notice about vertical and horizontal scroll conflict

There is no sense considering #3162

docs/timeline/index.html

@@ -732,7 +732,7 @@ function (option, path) {
       <td>Boolean</td>
       <td>false</td>
       <td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
-       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
+       Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
       </td>
     </tr>
 

lib/timeline/Core.js

@@ -173,8 +173,29 @@ Core.prototype._create = function (container) {
       this.emit('mousewheel', event);
     }
 
-    // prevent scrolling if not specified explicitly or when horizontalScroll is true
-    if (!this.options.verticalScroll || this.options.horizontalScroll) return;
+    // deltaX and deltaY normalization from jquery.mousewheel.js
+    var deltaX = 0;
+    var deltaY = 0;
+
+    // Old school scrollwheel delta
+    if ( 'detail'      in event ) { deltaY = event.detail * -1;      }
+    if ( 'wheelDelta'  in event ) { deltaY = event.wheelDelta;       }
+    if ( 'wheelDeltaY' in event ) { deltaY = event.wheelDeltaY;      }
+    if ( 'wheelDeltaX' in event ) { deltaX = event.wheelDeltaX * -1; }
+
+    // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
+    if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
+      deltaX = deltaY * -1;
+      deltaY = 0;
+    }
+
+    // New school wheel delta (wheel event)
+    if ( 'deltaY' in event ) {
+      deltaY = event.deltaY * -1;
+    }
+    if ( 'deltaX' in event ) {
+      deltaX = event.deltaX;
+    }
 
     // prevent scrolling when zoomKey defined or activated
     if (!this.options.zoomKey || event[this.options.zoomKey]) return;
@@ -183,22 +204,30 @@ Core.prototype._create = function (container) {
     // (else the page and timeline both scroll)
     event.preventDefault();
 
-    var delta = 0;
-    if (event.wheelDelta) { /* IE/Opera. */
-      delta = event.wheelDelta / 120;
-    } else if (event.detail) { /* Mozilla case. */
-      // In Mozilla, sign of delta is different than in IE.
-      // Also, delta is multiple of 3.
-      delta = -event.detail / 3;
-    }
-
-    var current = this.props.scrollTop;
-    var adjusted = current + delta * 120;
+    if (this.options.verticalScroll && Math.abs(deltaY) >= Math.abs(deltaX)) {
+      var current = this.props.scrollTop;
+      var adjusted = current + deltaY;
 
-    if (this.isActive()) {
-      this._setScrollTop(adjusted);
-      this._redraw();
-      this.emit('scroll', event);
+      if (this.isActive()) {
+        this._setScrollTop(adjusted);
+        this._redraw();
+        this.emit('scroll', event);
+      }
+    } else if (this.options.horizontalScroll) {
+      var delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
+
+      // calculate a single scroll jump relative to the range scale
+      var diff = (delta / 120) * (this.range.end - this.range.start) / 20;
+      // calculate new start and end
+      var newStart = this.range.start + diff;
+      var newEnd = this.range.end + diff;
+
+      var options = {
+        animation: false,
+        byUser: true,
+        event: event
+      }
+      this.range.setRange(newStart, newEnd, options);
     }
   }
 

lib/timeline/Range.js

@@ -614,24 +614,6 @@ Range.prototype._onMouseWheel = function(event) {
   // don't allow zoom when the according key is pressed and the zoomKey option or not zoomable but movable
   if ((this.options.zoomKey && !event[this.options.zoomKey] && this.options.zoomable) 
     || (!this.options.zoomable && this.options.moveable)) {
-    if (this.options.horizontalScroll) {
-      // Prevent default actions caused by mouse wheel
-      // (else the page and timeline both scroll)
-      event.preventDefault();
-      
-      // calculate a single scroll jump relative to the range scale
-      var diff = delta * (this.end - this.start) / 20;
-      // calculate new start and end
-      var newStart = this.start - diff;
-      var newEnd = this.end - diff;
-
-      var options = {
-        animation: false,
-        byUser: true,
-        event: event
-      }
-      this.setRange(newStart, newEnd, options);
-    }
     return;
   }