From f1cb7320aac5756ef66a71468778b3eaa8668d5b Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 3 Sep 2016 01:08:28 +0300
Subject: [PATCH 01/12] Hide vertically hidden ranged items in groups that are
 not visible

---
 lib/timeline/component/Group.js          | 27 ++++++++++++++++++++++++
 lib/timeline/component/item/RangeItem.js | 10 +++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index c11d7cce..5dcc2e49 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -14,6 +14,7 @@ function Group (groupId, data, itemSet) {
   this.subgroupIndex = 0;
   this.subgroupOrderer = data && data.subgroupOrder;
   this.itemSet = itemSet;
+  this.isVisible = null;
 
   this.dom = {};
   this.props = {
@@ -180,6 +181,8 @@ Group.prototype.redraw = function(range, margin, restack) {
   // recalculate the height of the subgroups
   this._calculateSubGroupHeights();
 
+  this.isVisible = this._isGroupVisible(range);
+
   // reposition visible items vertically
   if (typeof this.itemSet.options.order === 'function') {
     // a custom order function
@@ -219,6 +222,10 @@ Group.prototype.redraw = function(range, margin, restack) {
     }
   }
 
+  if (!this.isVisible && this.height) {
+    return resized = false;
+  }
+
   // recalculate the height of the group
   var height = this._calculateHeight(margin);
 
@@ -265,6 +272,17 @@ Group.prototype._calculateSubGroupHeights = function () {
   }
 };
 
+/**
+ * check if group is visible
+ * @private
+  */
+Group.prototype._isGroupVisible = function (range) {
+  var isVisible = 
+    (this.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+    (this.top + this.height > - range.body.domProps.scrollTop);
+  return isVisible;
+}
+
 /**
  * recalculate the height of the group
  * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
@@ -475,6 +493,15 @@ Group.prototype.order = function() {
 Group.prototype._updateVisibleItems = function(orderedItems, oldVisibleItems, range) {
   var visibleItems = [];
   var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
+   
+  if (!this.isVisible) {
+    for (i = 0; i < oldVisibleItems.length; i++) {
+      item = oldVisibleItems[i];
+      if (item.displayed) item.hide();
+    }
+    return visibleItems;
+  } 
+
   var interval = (range.end - range.start) / 4;
   var lowerBound = range.start - interval;
   var upperBound = range.end + interval;
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 694d21b6..bfd6f7ee 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -43,8 +43,14 @@ RangeItem.prototype.baseClassName = 'vis-item vis-range';
  */
 RangeItem.prototype.isVisible = function(range) {
   // determine visibility
-  return (this.data.start < range.end) && (this.data.end > range.start);
-};
+var isVisible = 
+// determine horizontal visibillity
+  (this.data.start < range.end) && 
+  (this.data.end > range.start) && 
+// determine verticaltal visibillity
+  (this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+  (this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
+return isVisible;};
 
 /**
  * Repaint the item

From 89a0bfd36a833579f4e0f05bf1e153f584753cd4 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 11:54:01 +0300
Subject: [PATCH 02/12] Add element to templates options

---
 lib/timeline/component/Group.js     | 2 +-
 lib/timeline/component/item/Item.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
index 512fac58..4927e034 100644
--- a/lib/timeline/component/Group.js
+++ b/lib/timeline/component/Group.js
@@ -88,7 +88,7 @@ Group.prototype.setData = function(data) {
   // update contents
   var content;
   if (this.itemSet.options && this.itemSet.options.groupTemplate) {
-    content = this.itemSet.options.groupTemplate(data);
+    content = this.itemSet.options.groupTemplate(data, this.dom.inner);
   }
   else {
     content = data && data.content;
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index ea5c7cbb..743e5944 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -190,7 +190,7 @@ Item.prototype._updateContents = function (element) {
   var content;
   if (this.options.template) {
     var itemData = this.parent.itemSet.itemsData.get(this.id); // get a clone of the data from the dataset
-    content = this.options.template(itemData);
+    content = this.options.template(itemData, element);
   }
   else {
     content = this.data.content;

From b32f9428ff7725bc14e4e11ef5f8dc16336516a1 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 12:20:49 +0300
Subject: [PATCH 03/12] Fix comment typo

---
 lib/timeline/component/item/RangeItem.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 98614607..01c94ed2 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -45,11 +45,11 @@ RangeItem.prototype.isVisible = function(range) {
   // determine visibility
 var isVisible = 
 // determine horizontal visibillity
-  (this.data.start < range.end) && 
-  (this.data.end > range.start) && 
-// determine verticaltal visibillity
-  (this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
-  (this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
+(this.data.start < range.end) && 
+(this.data.end > range.start) && 
+// determine vertical visibillity
+(this.parent.top < range.body.domProps.centerContainer.height - range.body.domProps.scrollTop) && 
+(this.parent.top + this.parent.height > - range.body.domProps.scrollTop)
 return isVisible;};
 
 /**

From 092186857b8a35388f50911152d1cd373e9ae578 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sun, 16 Oct 2016 12:33:42 +0300
Subject: [PATCH 04/12] Add documentation for react mounting

---
 docs/timeline/index.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index f11d1c89..4ca5975e 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -640,7 +640,7 @@ function (option, path) {
       <td>groupTemplate</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as argument, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -970,7 +970,7 @@ function (option, path) {
       <td>template</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as the first argument and the item element as the second, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -1629,6 +1629,17 @@ var template = Handlebars.compile(source);
 };
 </pre>
 
+<h3>React templates</h3>
+
+You can use a React component for the templates by rendering them to the templates' element directly:
+
+<pre class="prettyprint lang-js">
+  template: function (item, element) {
+    return ReactDOM.render(&lt;b&gt;{item.content}&lt;/b&gt;, element);
+  },
+</pre>
+
+
   <h3>Multiple templates</h3>
 
   In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:

From 06c264e5b627c320f2d7474b251b1ccaa285e04c Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:07:29 +0300
Subject: [PATCH 05/12] add react example

---
 examples/timeline/other/usingReact.html | 131 ++++++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 examples/timeline/other/usingReact.html

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
new file mode 100644
index 00000000..2e59d418
--- /dev/null
+++ b/examples/timeline/other/usingReact.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>React Hello World</title>
+  </head>
+  <body>
+
+    <div id='root'></div>
+    
+    <!--
+    For ease of use, we are including the React, ReactDOM and Babel CDN
+    builds to make getting started as fast as possible.
+    
+    In production, you'll want to instead look at using something 
+    like Gulp, Grunt or WebPack (my personal recommendation) 
+    to compile JSX into JavaScript. Also, check out:
+    http://facebook.github.io/react/docs/tooling-integration.html
+    -->
+    <script src="https://fb.me/react-15.0.1.js"></script>
+    <script src="https://fb.me/react-dom-15.0.1.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    
+    <!--
+    This is where you link to your React code. Can be .js or .jsx 
+    extension, doesn't really matter.
+    -->
+    <script type="text/babel">
+        var timeline;
+        
+        // create groups
+        var numberOfGroups = 25; 
+        var groups = new vis.DataSet()
+        for (var i = 0; i < numberOfGroups; i++) {
+            groups.add({
+              id: i,
+              content: 'Truck ' + i
+            })
+        }
+          
+        // create items
+        var numberOfItems = 1000;
+        var items = new vis.DataSet();
+        var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
+        for (var truck = 0; truck < numberOfGroups; truck++) {
+            var date = new Date();
+            for (var order = 0; order < itemsPerGroup; order++) {
+              date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
+              var start = new Date(date);
+              date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
+              var end = new Date(date);
+              items.add({
+                id: order + itemsPerGroup * truck,
+                group: truck,
+                start: start,
+                end: end,
+                content: 'Order ' + order
+              });
+            }
+        }
+
+        var GroupTemplate = React.createClass({
+          render: function() {
+            var { group } = this.props;
+            return <div>
+              <label>{group.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        var ItemTemplate = React.createClass({
+          render: function() {
+            var { item } = this.props;
+            return <div>
+              <label>{item.content}</label>
+              <button>do stuff</button>
+            </div>
+          }
+        })
+
+        // specify options
+        var options = {
+          rtl: true,
+          stack: true,
+          maxHeight: 400,
+          start: new Date(),
+          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+          editable: true,
+          margin: {
+            item: 10, // minimal margin between items
+            axis: 5   // minimal margin between items and the axis
+          },
+          template: function (item, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<ItemTemplate item={item} />, element);
+          },
+          groupTemplate: function (group, element) {
+            ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(<GroupTemplate group={group} />, element);
+          },
+          orientation: 'top'
+        }
+     
+
+        var VisTimeline = React.createClass({
+            componentDidMount: function() {
+                initTimeline()
+            },
+            render: function() {
+                return <div>
+                    <h1>Vis timline with React</h1>
+                    <h2>Using react components for items ang group templates</h2>      
+
+                    <div id="mytimeline"></div>
+                </div>
+            }
+        });
+
+        function initTimeline() {
+            var container = document.getElementById('mytimeline');
+            timeline = new vis.Timeline(container, items, groups, options);
+        } 
+
+        ReactDOM.render(<VisTimeline />, document.getElementById('root'));
+    </script>
+  </body>
+</html>
\ No newline at end of file

From 17c48c7967d2a5c3995133ae61d19173458dfeab Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:13:04 +0300
Subject: [PATCH 06/12] Fix typo

---
 examples/timeline/other/usingReact.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index 2e59d418..dea32d95 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -113,7 +113,7 @@
             render: function() {
                 return <div>
                     <h1>Vis timline with React</h1>
-                    <h2>Using react components for items ang group templates</h2>      
+                    <h2>Using react components for items and group templates</h2>      
 
                     <div id="mytimeline"></div>
                 </div>
@@ -128,4 +128,4 @@
         ReactDOM.render(<VisTimeline />, document.getElementById('root'));
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 42c054ff540b15db8f91d01c7824b3f73b7c4208 Mon Sep 17 00:00:00 2001
From: yotamberk <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 13:37:57 +0300
Subject: [PATCH 07/12] fix title

---
 examples/timeline/other/usingReact.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index dea32d95..4f7c2470 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>React Hello World</title>
+    <title>React Components in templates</title>
   </head>
   <body>
 

From 342091d180ff6badfe2a1631adf809c3d326cb22 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 17:51:52 +0300
Subject: [PATCH 08/12] Fix review comments

---
 examples/timeline/other/usingReact.html | 50 +++++++++++--------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/examples/timeline/other/usingReact.html b/examples/timeline/other/usingReact.html
index 2e59d418..1d276499 100644
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>React Hello World</title>
+    <title>React Components in templates</title>
   </head>
   <body>
 
@@ -17,8 +17,8 @@
     to compile JSX into JavaScript. Also, check out:
     http://facebook.github.io/react/docs/tooling-integration.html
     -->
-    <script src="https://fb.me/react-15.0.1.js"></script>
-    <script src="https://fb.me/react-dom-15.0.1.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 
     <script src="../../../dist/vis.js"></script>
@@ -30,7 +30,7 @@
     -->
     <script type="text/babel">
         var timeline;
-        
+
         // create groups
         var numberOfGroups = 25; 
         var groups = new vis.DataSet()
@@ -66,8 +66,7 @@
           render: function() {
             var { group } = this.props;
             return <div>
-              <label>{group.content}</label>
-              <button>do stuff</button>
+                <label>{group.content}</label>
             </div>
           }
         })
@@ -76,44 +75,37 @@
           render: function() {
             var { item } = this.props;
             return <div>
-              <label>{item.content}</label>
-              <button>do stuff</button>
+                <label>{item.content}</label>
             </div>
           }
         })
 
         // specify options
         var options = {
-          rtl: true,
-          stack: true,
-          maxHeight: 400,
-          start: new Date(),
-          end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-          editable: true,
-          margin: {
-            item: 10, // minimal margin between items
-            axis: 5   // minimal margin between items and the axis
-          },
-          template: function (item, element) {
-            ReactDOM.unmountComponentAtNode(element);
-            return ReactDOM.render(<ItemTemplate item={item} />, element);
-          },
-          groupTemplate: function (group, element) {
-            ReactDOM.unmountComponentAtNode(element);
-            return ReactDOM.render(<GroupTemplate group={group} />, element);
-          },
-          orientation: 'top'
+            orientation: 'top',
+            maxHeight: 400,
+            start: new Date(),
+            end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+            editable: true,
+            template: function (item, element) {
+                ReactDOM.unmountComponentAtNode(element);
+                return ReactDOM.render(<ItemTemplate item={item} />, element);
+            },
+            groupTemplate: function (group, element) {
+                ReactDOM.unmountComponentAtNode(element);
+                return ReactDOM.render(<GroupTemplate group={group} />, element);
+            }
         }
      
 
         var VisTimeline = React.createClass({
             componentDidMount: function() {
-                initTimeline()
+                return initTimeline();
             },
             render: function() {
                 return <div>
                     <h1>Vis timline with React</h1>
-                    <h2>Using react components for items ang group templates</h2>      
+                    <h2>Using react components for items and group templates</h2>      
 
                     <div id="mytimeline"></div>
                 </div>

From 3addd510462bea9878764112dcb3d6f8c1d0f0d0 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Sat, 22 Oct 2016 23:19:33 +0300
Subject: [PATCH 09/12] Add vis-drag-center to fix dragging bug when template
 is react component

---
 lib/timeline/component/css/item.css      |  9 +++++++++
 lib/timeline/component/item/BoxItem.js   |  1 +
 lib/timeline/component/item/Item.js      | 24 ++++++++++++++++++++++++
 lib/timeline/component/item/PointItem.js |  3 ++-
 lib/timeline/component/item/RangeItem.js |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 41d22256..0e9327ae 100644
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@@ -136,6 +136,15 @@
   color: white;
 }
 
+.vis-item .vis-drag-center {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0px;
+  cursor: move;
+}
+
 .vis-item.vis-range .vis-drag-left {
   position: absolute;
   width: 24px;
diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js
index f77652bf..2963619b 100644
--- a/lib/timeline/component/item/BoxItem.js
+++ b/lib/timeline/component/item/BoxItem.js
@@ -164,6 +164,7 @@ BoxItem.prototype.redraw = function() {
     this.dirty = false;
   }
 
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.box);
 };
 
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index c70cc0a4..c12a3203 100644
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@@ -287,6 +287,7 @@ Item.prototype._updateStyle = function(element) {
   }
 };
 
+
 /**
  * Stringify the items contents
  * @param {string | Element | undefined} content
@@ -315,4 +316,27 @@ Item.prototype.getWidthRight = function () {
   return 0;
 };
 
+/**
+ * Repaint a drag area on the center of the item when the item is selected
+ * @protected
+ */
+Item.prototype._repaintDragCenter = function () {
+  if (this.selected && this.options.editable.updateTime && !this.dom.dragCenter) {
+    // create and show drag area
+    var dragCenter = document.createElement('div');
+    dragCenter.className = 'vis-drag-center';
+    dragCenter.dragCenterItem = this;
+
+    this.dom.box.appendChild(dragCenter);
+    this.dom.dragCenter = dragCenter;
+  }
+  else if (!this.selected && this.dom.dragCenter) {
+    // delete drag area
+    if (this.dom.dragCenter.parentNode) {
+      this.dom.dragCenter.parentNode.removeChild(this.dom.dragCenter);
+    }
+    this.dom.dragCenter = null;
+  }
+};
+
 module.exports = Item;
diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js
index 10a2463c..91b86909 100644
--- a/lib/timeline/component/item/PointItem.js
+++ b/lib/timeline/component/item/PointItem.js
@@ -140,7 +140,8 @@ PointItem.prototype.redraw = function() {
 
     this.dirty = false;
   }
-
+  
+  this._repaintDragCenter();
   this._repaintDeleteButton(dom.point);
 };
 
diff --git a/lib/timeline/component/item/RangeItem.js b/lib/timeline/component/item/RangeItem.js
index 8ec29991..5e287f4f 100644
--- a/lib/timeline/component/item/RangeItem.js
+++ b/lib/timeline/component/item/RangeItem.js
@@ -124,6 +124,7 @@ RangeItem.prototype.redraw = function() {
     this.dirty = false;
   }
   this._repaintDeleteButton(dom.box);
+  this._repaintDragCenter();
   this._repaintDragLeft();
   this._repaintDragRight();
 };

From 2f2f5c4cc88e6874681be3de366174e389089c8e Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 20:54:56 +0300
Subject: [PATCH 10/12] Commit before pull

---
 lib/timeline/Timeline.js            | 1 +
 lib/timeline/component/item/Item.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index ef47d28f..9b2576cd 100644
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@@ -111,6 +111,7 @@ function Timeline (container, items, groups, options) {
   }
 
   // item set
+  console.log("aaaaaaaaaa", this.options, options);
   this.itemSet = new ItemSet(this.body, this.options);
   this.components.push(this.itemSet);
 
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index c12a3203..27c90271 100644
--- a/lib/timeline/component/item/Item.js
+++ b/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,7 +197,9 @@ Item.prototype._updateContents = function (element) {
     content = this.data.content;
   }
 
-  if (content instanceof Object) {
+  console.log(content);
+  console.log("content: " , content, content instanceof Object, !(content instanceof Element));
+  if ((content instanceof Object) && !(content instanceof Element)) {
     templateFunction(itemData, element)
   } else {
     var changed = this._contentToString(this.content) !== this._contentToString(content);

From 4f105a31279bcc8ea8093ef403dfd2e3d9004e34 Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 22:30:21 +0300
Subject: [PATCH 11/12] Fix templates

---
 lib/timeline/Core.js                | 49 +++++++++++++----------------
 lib/timeline/Timeline.js            | 43 ++++++++++++++++++-------
 lib/timeline/component/ItemSet.js   |  6 ++--
 lib/timeline/component/item/Item.js |  4 +--
 4 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 04c51ad6..eb9de7b3 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('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");
diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
index bb2e6015..e11f34ff 100644
--- a/lib/timeline/Timeline.js
+++ b/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;
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 9eb46393..f2020b09 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/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';
diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js
index 27c90271..c1762805 100644
--- a/lib/timeline/component/item/Item.js
+++ b/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 {

From 4b6a0d7f74bf0573076e5fdd4faf3261332f98dd Mon Sep 17 00:00:00 2001
From: Yotam Berkowitz <yotamberk@gmail.com>
Date: Tue, 25 Oct 2016 22:41:45 +0300
Subject: [PATCH 12/12] Fix to Core.js to updated Core.js

---
 lib/timeline/Core.js     | 51 ++++++++++++++++++++++------------------
 lib/timeline/Timeline.js | 22 -----------------
 2 files changed, 28 insertions(+), 45 deletions(-)

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;