diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 63ac132a..61ed6eaa 100644 --- a/lib/timeline/Core.js +++ b/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 diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index 38982d72..6ce5bc0d 100644 --- a/lib/timeline/Range.js +++ b/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