Fix to Core.js to updated Core.js

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;

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;