diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index 43f336e2..04c51ad6 100644 --- a/lib/timeline/Core.js +++ b/lib/timeline/Core.js @@ -112,7 +112,7 @@ Core.prototype._create = function (container) { } }.bind(this)); this.on('touch', this._onTouch.bind(this)); - this.on('pan', this._onDrag.bind(this)); + this.on('panmove', this._onDrag.bind(this)); var me = this; this.on('_change', function (properties) { @@ -191,8 +191,13 @@ Core.prototype._create = function (container) { var current = this.props.scrollTop; var adjusted = current + delta * 120; + if (this.isActive()) { this._setScrollTop(adjusted); + if (this.options.verticalScroll) { + this.dom.left.parentNode.scrollTop = -adjusted; + this.dom.right.parentNode.scrollTop = -adjusted; + } this._redraw(); this.emit('scroll', event); } @@ -202,29 +207,29 @@ Core.prototype._create = function (container) { event.preventDefault(); } - if (this.dom.root.addEventListener) { + if (this.dom.center.addEventListener) { // IE9, Chrome, Safari, Opera - this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false); + this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false); // Firefox - this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false); + this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false); } else { // IE 6/7/8 - this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this)); + this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this)); } function onMouseScrollSide(event) { - var current = this.scrollTop; - var adjusted = -current; + if (!me.options.verticalScroll) return; + event.preventDefault(); if (me.isActive()) { + var adjusted = -event.target.scrollTop; me._setScrollTop(adjusted); - me._redraw(); - me.emit('scroll', event); + me.emit('scrollSide', event); } } - this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide); - this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide); + this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this)); + this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this)); this.customTimes = []; @@ -820,10 +825,9 @@ Core.prototype._redraw = function() { // update the scrollTop, feasible range for the offset can be changed // when the height of the Core or of the contents of the center changed - this._updateScrollTop(); + var offset = this._updateScrollTop(); // reposition the scrollable contents - var offset = this.props.scrollTop; if (options.orientation.item != 'top') { offset += Math.max(this.props.centerContainer.height - this.props.center.height - this.props.border.top - this.props.border.bottom, 0); @@ -844,12 +848,10 @@ Core.prototype._redraw = function() { dom.shadowBottomRight.style.visibility = visibilityBottom; if (this.options.verticalScroll) { - this.dom.shadowTopRight.style.visibility = "hidden"; - this.dom.shadowBottomRight.style.visibility = "hidden"; - this.dom.shadowTopLeft.style.visibility = "hidden"; - this.dom.shadowBottomLeft.style.visibility = "hidden"; - document.getElementsByClassName('vis-left')[0].scrollTop = -offset; - document.getElementsByClassName('vis-right')[0].scrollTop = -offset; + dom.shadowTopRight.style.visibility = "hidden"; + dom.shadowBottomRight.style.visibility = "hidden"; + dom.shadowTopLeft.style.visibility = "hidden"; + dom.shadowBottomLeft.style.visibility = "hidden"; } else { dom.left.style.top = offset + 'px'; dom.right.style.top = offset + 'px'; @@ -1070,6 +1072,7 @@ Core.prototype._onPinch = function (event) { * @private */ Core.prototype._onDrag = function (event) { + if (!event) return // 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; @@ -1079,6 +1082,10 @@ Core.prototype._onDrag = function (event) { var oldScrollTop = this._getScrollTop(); var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta); + if (this.options.verticalScroll) { + this.dom.left.parentNode.scrollTop = -this.props.scrollTop; + this.dom.right.parentNode.scrollTop = -this.props.scrollTop; + } if (newScrollTop != oldScrollTop) { this.emit("verticalDrag"); diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index 075b0baa..faa07abe 100644 --- a/lib/timeline/Range.js +++ b/lib/timeline/Range.js @@ -390,6 +390,8 @@ Range.prototype._onDragStart = function(event) { * @private */ Range.prototype._onDrag = function (event) { + if (!event) return + if (!this.props.touch.dragging) return; // only allow dragging when configured as movable @@ -445,6 +447,9 @@ Range.prototype._onDrag = function (event) { end: endDate, byUser: true }); + + // fire a panmove event + this.body.emitter.emit('panmove'); }; /** diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index 9b2576cd..bb2e6015 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -28,8 +28,8 @@ import Validator from '../shared/Validator'; * @constructor * @extends Core */ -function Timeline (container, items, groups, options) { +function Timeline (container, items, groups, options) { if (!(this instanceof Timeline)) { throw new SyntaxError('Constructor must be called with the new operator'); } @@ -546,25 +546,4 @@ Timeline.prototype.getEventProperties = function (event) { } }; - /** - * Extend the drag event handler from Core, move the timeline vertically - * @param {Event} event - * @private - */ - Timeline.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, and refuse - // to drag when an item is already being dragged - if (!this.touch.allowDragging || this.itemSet.touchParams.itemIsDragging) return; - - var delta = event.deltaY; - - var oldScrollTop = this._getScrollTop(); - var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta); - - if (newScrollTop != oldScrollTop) { - this.emit("verticalDrag"); - } - }; - module.exports = Timeline;