|
|
@ -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 |
|
|
|