|
|
@ -89,10 +89,6 @@ 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('pinch', this._onPinch.bind(this)); |
|
|
|
this.on('dragstart', this._onDragStart.bind(this)); |
|
|
|
this.on('drag', this._onDrag.bind(this)); |
|
|
|
|
|
|
|
var me = this; |
|
|
|
this.on('change', function (properties) { |
|
|
@ -113,44 +109,42 @@ 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); |
|
|
|
this.hammer = new Hammer(this.dom.root, {touchAction: 'pan-y'}); |
|
|
|
this.hammer.get('pinch').set({enable: true}); |
|
|
|
this.listeners = {}; |
|
|
|
|
|
|
|
var events = [ |
|
|
|
'tap', 'doubletap', 'press', |
|
|
|
'pinch', |
|
|
|
'panstart', 'panmove', 'panend' |
|
|
|
// TODO: mouse wheel?
|
|
|
|
'pan', 'panstart', 'panmove', 'panend' |
|
|
|
// TODO: cleanup
|
|
|
|
//'touch', 'pinch',
|
|
|
|
//'tap', 'doubletap', 'hold',
|
|
|
|
//'dragstart', 'drag', 'dragend',
|
|
|
|
//'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
|
|
|
|
]; |
|
|
|
events.forEach(function (event) { |
|
|
|
var listener = function () { |
|
|
|
var args = [event].concat(Array.prototype.slice.call(arguments, 0)); |
|
|
|
events.forEach(function (type) { |
|
|
|
var listener = function (event) { |
|
|
|
if (me.isActive()) { |
|
|
|
me.emit.apply(me, args); |
|
|
|
me.emit(type, event); |
|
|
|
} |
|
|
|
}; |
|
|
|
me.hammer.on(event, listener); |
|
|
|
me.listeners[event] = listener; |
|
|
|
me.hammer.on(type, listener); |
|
|
|
me.listeners[type] = listener; |
|
|
|
}); |
|
|
|
|
|
|
|
// emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
|
|
|
|
this.hammer.on('hammer.input', function (event) { |
|
|
|
if (event.isFirst) { |
|
|
|
var args = ['touch'].concat(Array.prototype.slice.call(arguments, 0)); |
|
|
|
if (me.isActive()) { |
|
|
|
me.emit.apply(me, args); |
|
|
|
me.emit('touch', event); |
|
|
|
} |
|
|
|
} |
|
|
|
}.bind(this)); |
|
|
|
|
|
|
|
function onMouseWheel() { |
|
|
|
var args = ['mousewheel'].concat(Array.prototype.slice.call(arguments, 0)); |
|
|
|
function onMouseWheel(event) { |
|
|
|
if (me.isActive()) { |
|
|
|
me.emit.apply(me, args); |
|
|
|
me.emit('mousewheel', event); |
|
|
|
} |
|
|
|
} |
|
|
|
this.dom.root.addEventListener('mousewheel', onMouseWheel); |
|
|
@ -172,7 +166,6 @@ Core.prototype._create = function (container) { |
|
|
|
scrollTop: 0, |
|
|
|
scrollTopMin: 0 |
|
|
|
}; |
|
|
|
this.touch = {}; // store state information needed for touch events
|
|
|
|
|
|
|
|
this.redrawCount = 0; |
|
|
|
|
|
|
@ -794,55 +787,6 @@ 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 |
|
|
|