diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index eb9de7b3..1b4f1291 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 = []; @@ -362,9 +367,7 @@ Core.prototype.setOptions = function (options) { } // propagate options to all components - this.components.forEach(component => { - component.setOptions(options) - }); + this.components.forEach(component => component.setOptions(options)); // enable/disable configure if ('configure' in options) { @@ -822,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); @@ -846,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'; @@ -1072,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; @@ -1081,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"); @@ -1141,4 +1146,4 @@ Core.prototype._createConfigurator = function () { throw new Error('Cannot invoke abstract method _createConfigurator'); }; -module.exports = Core; +module.exports = Core; \ No newline at end of file diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index e11f34ff..cc44f3b0 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -105,7 +105,6 @@ function Timeline (container, items, groups, options) { this.components.push(this.currentTime); // item set - var itemSetOptions = this.itemSet = new ItemSet(this.body, this.options); this.components.push(this.itemSet); @@ -544,25 +543,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;