Merge remote-tracking branch 'origin/v4' into v4

lib/timeline/Core.js

@@ -92,6 +92,9 @@ Core.prototype._create = function (container) {
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
   this.on('rangechange', this.redraw.bind(this));
+  this.on('touch',       this._onTouch.bind(this));
+  this.on('panstart',    this._onDragStart.bind(this));
+  this.on('pan',         this._onDrag.bind(this));
 
   var me = this;
   this.on('change', function (properties) {
@@ -112,7 +115,7 @@ Core.prototype._create = function (container) {
 
   // create event listeners for all interesting events, these events will be
   // emitted via emitter
-  this.hammer = new Hammer(this.dom.root, {touchAction: 'pan-y'});
+  this.hammer = new Hammer(this.dom.root);
   this.hammer.get('pinch').set({enable: true});
   this.listeners = {};
 
@@ -138,6 +141,7 @@ Core.prototype._create = function (container) {
 
   // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
   hammerUtil.onTouch(this.hammer, function (event) {
+    console.log('touch', event)
     me.emit('touch', event);
   }.bind(this));
 
@@ -171,6 +175,9 @@ Core.prototype._create = function (container) {
     scrollTopMin: 0
   };
 
+  // store state information needed for touch events
+  this.touch = {};
+
   this.redrawCount = 0;
 
   // attach the root panel to the provided container
@@ -922,6 +929,55 @@ Core.prototype._stopAutoResize = function () {
   this._onResize = null;
 };
 
+/**
+ * Start moving the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Core.prototype._onTouch = function (event) {
+  this.touch.allowDragging = true;
+};
+
+/**
+ * Start moving the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Core.prototype._onPinch = function (event) {
+  this.touch.allowDragging = false;
+};
+
+/**
+ * Start moving the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Core.prototype._onDragStart = function (event) {
+  this.touch.initialScrollTop = this.props.scrollTop;
+};
+
+/**
+ * Move the timeline vertically
+ * @param {Event} event
+ * @private
+ */
+Core.prototype._onDrag = function (event) {
+  // refuse to drag when we where pinching to prevent the timeline make a jump
+  // when releasing the fingers in opposite order from the touch screen
+  if (!this.touch.allowDragging) return;
+
+  var delta = event.deltaY;
+
+  var oldScrollTop = this._getScrollTop();
+  var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
+
+
+  if (newScrollTop != oldScrollTop) {
+    this._redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+    this.emit("verticalDrag");
+  }
+};
+
 /**
  * Apply a scrollTop
  * @param {Number} scrollTop

lib/timeline/Range.js

@@ -47,9 +47,6 @@ function Range(body, options) {
   this.body.emitter.on('panmove',  this._onDrag.bind(this));
   this.body.emitter.on('panend',   this._onDragEnd.bind(this));
 
-  // ignore dragging when holding
-  this.body.emitter.on('press', this._onHold.bind(this));
-
   // mouse wheel for zooming
   this.body.emitter.on('mousewheel', this._onMouseWheel.bind(this));
 
@@ -509,14 +506,6 @@ Range.prototype._onTouch = function (event) {
   this.deltaDifference = 0;
 };
 
-/**
- * On start of a hold gesture
- * @private
- */
-Range.prototype._onHold = function () {
-  this.props.touch.allowDragging = false;
-};
-
 /**
  * Handle pinch event
  * @param {Event} event