Added Timeline itemover, itemout events (#2099)

docs/timeline/index.html

@@ -1187,7 +1187,7 @@ document.getElementById('myTimeline').onclick = function (event) {
     <tr>
       <td>on(event, callback)</td>
       <td>none</td>
-      <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
+      <td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>, <code>itemover</code>, <code>itemout</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
     </tr>
 
     <tr>
@@ -1442,6 +1442,28 @@ timeline.off('select', onSelect);
       </td>
     </tr>
 
+    <tr>
+      <td>itemover</td>
+      <td>
+        <ul>
+          <li><code>item</code>: hovered item id</li>
+          <li><code>event</code>: the original mouseover event</li>
+        </ul>
+      </td>
+      <td>Fired when the user moves the mouse over an item.</td>
+    </tr>
+
+    <tr>
+      <td>itemout</td>
+      <td>
+        <ul>
+          <li><code>item</code>: hovered item id</li>
+          <li><code>event</code>: the original mouseout event</li>
+        </ul>
+      </td>
+      <td>Fired when the user moves the mouse out of an item.</td>
+    </tr>
+
     <tr>
       <td>timechange</td>
       <td>

examples/timeline/interaction/eventListeners.html

@@ -19,6 +19,7 @@
   </p>
   <div id="visualization"></div>
   <p></p>
+  <div id="hoveredItem"></div>
   <div id="log"></div>
 
   <script type="text/javascript">
@@ -47,6 +48,15 @@
       logEvent('select', properties);
     });
 
+    timeline.on('itemover', function (properties) {
+      logEvent('itemover', properties);
+      setHoveredItem(properties.item);
+    });
+    timeline.on('itemout', function (properties) {
+      logEvent('itemout', properties);
+      setHoveredItem('none');
+    });
+
     items.on('*', function (event, properties) {
       logEvent(event, properties);
     });
@@ -59,6 +69,11 @@
       log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
     }
 
+    function setHoveredItem(id) {
+      var hoveredItem = document.getElementById('hoveredItem');
+      hoveredItem.innerHTML = 'hoveredItem=' + id;
+    }
+
   </script>
 </body>
 </html>

lib/timeline/component/ItemSet.js

@@ -237,6 +237,9 @@ ItemSet.prototype._create = function(){
   this.groupHammer.on('panend',   this._onGroupDragEnd.bind(this));
   this.groupHammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
   
+  this.body.dom.centerContainer.addEventListener('mouseover', this._onMouseOver.bind(this));
+  this.body.dom.centerContainer.addEventListener('mouseout', this._onMouseOut.bind(this));
+
   // attach to the DOM
   this.show();
 };
@@ -1745,6 +1748,28 @@ ItemSet.prototype._onSelectItem = function (event) {
   }
 };
 
+/**
+ * Handle hovering an item
+ * @param {Event} event
+ * @private
+ */
+ItemSet.prototype._onMouseOver = function (event) {
+  var item = this.itemFromTarget(event);
+  if (!item) return;
+  this.body.emitter.emit('itemover', {
+    item: item.id,
+    event: event
+  });
+};
+ItemSet.prototype._onMouseOut = function (event) {
+  var item = this.itemFromTarget(event);
+  if (!item) return;
+  this.body.emitter.emit('itemout', {
+    item: item.id,
+    event: event
+  });
+};
+
 /**
  * Handle creation and updates of an item on double tap
  * @param event