Fix templates

lib/timeline/Core.js

@@ -112,7 +112,7 @@ Core.prototype._create = function (container) {
     }
   }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
-  this.on('panmove',         this._onDrag.bind(this));
+  this.on('pan',         this._onDrag.bind(this));
 
   var me = this;
   this.on('_change', function (properties) {
@@ -191,13 +191,8 @@ 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);
     }
@@ -207,29 +202,29 @@ Core.prototype._create = function (container) {
     event.preventDefault();
   }
 
-  if (this.dom.center.addEventListener) {
+  if (this.dom.root.addEventListener) {
     // IE9, Chrome, Safari, Opera
-    this.dom.center.addEventListener("mousewheel", onMouseWheel.bind(this), false);
+    this.dom.root.addEventListener("mousewheel", onMouseWheel.bind(this), false);
     // Firefox
-    this.dom.center.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
+    this.dom.root.addEventListener("DOMMouseScroll", onMouseWheel.bind(this), false);
   } else {
     // IE 6/7/8
-    this.dom.center.attachEvent("onmousewheel", onMouseWheel.bind(this));
+    this.dom.root.attachEvent("onmousewheel", onMouseWheel.bind(this));
   }
 
   function onMouseScrollSide(event) {
-    if (!me.options.verticalScroll) return;
-    event.preventDefault();
+    var current = this.scrollTop;
+    var adjusted = -current;
     if (me.isActive()) {
-      var adjusted = -event.target.scrollTop;
       me._setScrollTop(adjusted);
+
       me._redraw();
-      me.emit('scrollSide', event);
+      me.emit('scroll', event);
     }
   }
 
-  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
-  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide.bind(this));
+  this.dom.left.parentNode.addEventListener('scroll', onMouseScrollSide);
+  this.dom.right.parentNode.addEventListener('scroll', onMouseScrollSide);
 
   this.customTimes = [];
 
@@ -367,7 +362,9 @@ 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) {
@@ -825,9 +822,10 @@ 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
-  var offset = this._updateScrollTop();
+  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);
@@ -848,10 +846,12 @@ Core.prototype._redraw = function() {
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
   if (this.options.verticalScroll) {
-    dom.shadowTopRight.style.visibility     = "hidden";
-    dom.shadowBottomRight.style.visibility  = "hidden";
-    dom.shadowTopLeft.style.visibility      = "hidden";
-    dom.shadowBottomLeft.style.visibility   = "hidden";
+    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;
   } else {
     dom.left.style.top    = offset + 'px';
     dom.right.style.top   = offset + 'px';
@@ -1072,7 +1072,6 @@ 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;
@@ -1082,10 +1081,6 @@ 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");

lib/timeline/Timeline.js

@@ -28,8 +28,8 @@ import Validator from '../shared/Validator';
  * @constructor
  * @extends Core
  */
-
 function Timeline (container, items, groups, options) {
+
   if (!(this instanceof Timeline)) {
     throw new SyntaxError('Constructor must be called with the new operator');
   }
@@ -45,22 +45,21 @@ function Timeline (container, items, groups, options) {
   this.defaultOptions = {
     start: null,
     end:   null,
-
     autoResize: true,
-
     orientation: {
       axis: 'bottom',   // axis orientation: 'bottom', 'top', or 'both'
       item: 'bottom'    // not relevant
     },
     moment: moment,
-
     width: null,
     height: null,
     maxHeight: null,
     minHeight: null
   };
   this.options = util.deepExtend({}, this.defaultOptions);
-
+  if (options) {
+    this.options.rtl = options.rtl
+  }
   // Create the DOM, props, and emitter
   this._create(container);
 
@@ -104,14 +103,9 @@ function Timeline (container, items, groups, options) {
   // current time bar
   this.currentTime = new CurrentTime(this.body);
   this.components.push(this.currentTime);
-  
-  // apply options
-  if (options) {
-    this.setOptions(options);
-  }
 
   // item set
-  console.log("aaaaaaaaaa", this.options, options);
+  var itemSetOptions = 
   this.itemSet = new ItemSet(this.body, this.options);
   this.components.push(this.itemSet);
 
@@ -150,6 +144,11 @@ function Timeline (container, items, groups, options) {
     }
   });
 
+  // apply options
+  if (options) {
+    this.setOptions(options);
+  }
+
   // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
   if (groups) {
     this.setGroups(groups);
@@ -195,7 +194,6 @@ Timeline.prototype.setOptions = function (options) {
   if (errorFound === true) {
     console.log('%cErrors have been found in the supplied options object.', printStyle);
   }
-
   Core.prototype.setOptions.call(this, options);
 
   if ('type' in options) {
@@ -546,4 +544,25 @@ 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;

lib/timeline/component/ItemSet.js

@@ -95,7 +95,9 @@ function ItemSet(body, options) {
 
   // options is shared by this ItemSet and all its items
   this.options = util.extend({}, this.defaultOptions);
-  this.options.rtl = options.rtl;
+  if (options) {
+    this.options.rtl = options.rtl; // required to determine from the initial creation if rtl
+  }
 
   // options for getting items from the DataSet with the correct type
   this.itemOptions = {
@@ -318,7 +320,7 @@ ItemSet.prototype.setOptions = function(options) {
     // copy all options that we know
     var fields = ['type', 'rtl', 'align', 'order', 'stack', 'selectable', 'multiselect', 'itemsAlwaysDraggable', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap'];
     util.selectiveExtend(fields, this.options, options);
-
+    
     if ('orientation' in options) {
       if (typeof options.orientation === 'string') {
         this.options.orientation.item = options.orientation === 'top' ? 'top' : 'bottom';

lib/timeline/component/item/Item.js

@@ -188,7 +188,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
 Item.prototype._updateContents = function (element) {
   var content;
   var templateFunction;
-  console.log(this.options);
+
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
     templateFunction = this.options.template.bind(this);
@@ -197,8 +197,6 @@ Item.prototype._updateContents = function (element) {
     content = this.data.content;
   }
 
-  console.log(content);
-  console.log("content: " , content, content instanceof Object, !(content instanceof Element));
   if ((content instanceof Object) && !(content instanceof Element)) {
     templateFunction(itemData, element)
   } else {