Browse Source

Fix scroll bugs with vertical scrollbar (#2228)

* Add initial scroller without options
* Add initial scroll without an option
* Add verticalScroll option
* Fix scrollbar positions
* Add docs
* fix example
* remove jquery dependency
* Fix example
* Fix review comments
* Fix verticalScroll and horizontalScroll docs
* Fix bug in timeline option.rtl if otion is undefined
* Remove hack
* Fix breaking of timeline
* Fix scrolling bugs
* Remove silly mistake
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
commit
33795a90a1
3 changed files with 32 additions and 41 deletions
  1. +26
    -19
      lib/timeline/Core.js
  2. +5
    -0
      lib/timeline/Range.js
  3. +1
    -22
      lib/timeline/Timeline.js

+ 26
- 19
lib/timeline/Core.js View File

@ -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");

+ 5
- 0
lib/timeline/Range.js View File

@ -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');
};
/**

+ 1
- 22
lib/timeline/Timeline.js View File

@ -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');
}
@ -545,25 +545,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;

Loading…
Cancel
Save