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)); }.bind(this));
this.on('touch', this._onTouch.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; var me = this;
this.on('_change', function (properties) { this.on('_change', function (properties) {
@ -191,8 +191,13 @@ Core.prototype._create = function (container) {
var current = this.props.scrollTop; var current = this.props.scrollTop;
var adjusted = current + delta * 120; var adjusted = current + delta * 120;
if (this.isActive()) { if (this.isActive()) {
this._setScrollTop(adjusted); this._setScrollTop(adjusted);
if (this.options.verticalScroll) {
this.dom.left.parentNode.scrollTop = -adjusted;
this.dom.right.parentNode.scrollTop = -adjusted;
}
this._redraw(); this._redraw();
this.emit('scroll', event); this.emit('scroll', event);
} }
@ -202,29 +207,29 @@ Core.prototype._create = function (container) {
event.preventDefault(); event.preventDefault();
} }
if (this.dom.root.addEventListener) {
if (this.dom.center.addEventListener) {
// IE9, Chrome, Safari, Opera // IE9, Chrome, Safari, Opera
this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false);
this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false);
// Firefox // Firefox
this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
} else { } else {
// IE 6/7/8 // IE 6/7/8
this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this));
this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this));
} }
function onMouseScrollSide(event) { function onMouseScrollSide(event) {
var current = this.scrollTop;
var adjusted = -current;
if (!me.options.verticalScroll) return;
event.preventDefault();
if (me.isActive()) { if (me.isActive()) {
var adjusted = -event.target.scrollTop;
me._setScrollTop(adjusted); me._setScrollTop(adjusted);
me._redraw(); 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 = []; this.customTimes = [];
@ -820,10 +825,9 @@ Core.prototype._redraw = function() {
// update the scrollTop, feasible range for the offset can be changed // 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 // when the height of the Core or of the contents of the center changed
this._updateScrollTop();
var offset = this._updateScrollTop();
// reposition the scrollable contents // reposition the scrollable contents
var offset = this.props.scrollTop;
if (options.orientation.item != 'top') { if (options.orientation.item != 'top') {
offset += Math.max(this.props.centerContainer.height - this.props.center.height - offset += Math.max(this.props.centerContainer.height - this.props.center.height -
this.props.border.top - this.props.border.bottom, 0); this.props.border.top - this.props.border.bottom, 0);
@ -844,12 +848,10 @@ Core.prototype._redraw = function() {
dom.shadowBottomRight.style.visibility = visibilityBottom; dom.shadowBottomRight.style.visibility = visibilityBottom;
if (this.options.verticalScroll) { 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 { } else {
dom.left.style.top = offset + 'px'; dom.left.style.top = offset + 'px';
dom.right.style.top = offset + 'px'; dom.right.style.top = offset + 'px';
@ -1070,6 +1072,7 @@ Core.prototype._onPinch = function (event) {
* @private * @private
*/ */
Core.prototype._onDrag = function (event) { Core.prototype._onDrag = function (event) {
if (!event) return
// refuse to drag when we where pinching to prevent the timeline make a jump // 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 // when releasing the fingers in opposite order from the touch screen
if (!this.touch.allowDragging) return; if (!this.touch.allowDragging) return;
@ -1079,6 +1082,10 @@ Core.prototype._onDrag = function (event) {
var oldScrollTop = this._getScrollTop(); var oldScrollTop = this._getScrollTop();
var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta); 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) { if (newScrollTop != oldScrollTop) {
this.emit("verticalDrag"); this.emit("verticalDrag");

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

@ -390,6 +390,8 @@ Range.prototype._onDragStart = function(event) {
* @private * @private
*/ */
Range.prototype._onDrag = function (event) { Range.prototype._onDrag = function (event) {
if (!event) return
if (!this.props.touch.dragging) return; if (!this.props.touch.dragging) return;
// only allow dragging when configured as movable // only allow dragging when configured as movable
@ -445,6 +447,9 @@ Range.prototype._onDrag = function (event) {
end: endDate, end: endDate,
byUser: true 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 * @constructor
* @extends Core * @extends Core
*/ */
function Timeline (container, items, groups, options) {
function Timeline (container, items, groups, options) {
if (!(this instanceof Timeline)) { if (!(this instanceof Timeline)) {
throw new SyntaxError('Constructor must be called with the new operator'); 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; module.exports = Timeline;

Loading…
Cancel
Save