fix(timeline): #2672 Item events original event (#2704)

* Fix redraw order

* Fix error when option is not defined

* Allow template labels

* Add .travis.yml file

* Add experiment travis code

* Fix react example

* Fix events returned from mouse events

* Fix example

* Rename censor to stringifyObject in example

examples/timeline/interaction/eventListeners.html

@@ -41,9 +41,11 @@
     timeline.on('rangechange', function (properties) {
       logEvent('rangechange', properties);
     });
+
     timeline.on('rangechanged', function (properties) {
       logEvent('rangechanged', properties);
     });
+
     timeline.on('select', function (properties) {
       logEvent('select', properties);
     });
@@ -52,6 +54,7 @@
       logEvent('itemover', properties);
       setHoveredItem(properties.item);
     });
+    
     timeline.on('itemout', function (properties) {
       logEvent('itemout', properties);
       setHoveredItem('none');
@@ -83,11 +86,23 @@
       logEvent(event, properties);
     });
 
+    function stringifyObject (object) {
+      if (!object) return;
+      var replacer = function(key, value) {
+        if (value && value.tagName) {
+          return "DOM Element";
+        } else {
+          return value;
+        }
+      }
+      return JSON.stringify(object, replacer)
+    }
+
     function logEvent(event, properties) {
       var log = document.getElementById('log');
       var msg = document.createElement('div');
       msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
-          'properties=' + JSON.stringify(properties);
+          'properties=' + stringifyObject(properties);
       log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
     }
 

lib/timeline/Range.js

@@ -218,7 +218,7 @@ Range.prototype.setRange = function(start, end, animation, byUser, event) {
           start: new Date(me.start), 
           end: new Date(me.end), 
           byUser:byUser,
-          event: util.elementsCensor(event)
+          event: event
         }
 
         if (changed) {
@@ -248,7 +248,7 @@ Range.prototype.setRange = function(start, end, animation, byUser, event) {
         start: new Date(this.start), 
         end: new Date(this.end), 
         byUser:byUser, 
-        event: util.elementsCensor(event)
+        event: event
       };
       this.body.emitter.emit('rangechange', params);
       this.body.emitter.emit('rangechanged', params);
@@ -532,7 +532,7 @@ Range.prototype._onDrag = function (event) {
     start: startDate,
     end:   endDate,
     byUser: true,
-    event: util.elementsCensor(event)
+    event: event
   });
 
   // fire a panmove event
@@ -565,7 +565,7 @@ Range.prototype._onDragEnd = function (event) {
     start: new Date(this.start),
     end:   new Date(this.end),
     byUser: true,
-    event: util.elementsCensor(event)
+    event: event
   });
 };
 

lib/timeline/component/ItemSet.js

@@ -1876,7 +1876,7 @@ ItemSet.prototype._onSelectItem = function (event) {
   if (newSelection.length > 0 || oldSelection.length > 0) {
     this.body.emitter.emit('select', {
       items: newSelection,
-      event: util.elementsCensor(event)
+      event: event
     });
   }
 };
@@ -1921,7 +1921,7 @@ ItemSet.prototype._onMouseOver = function (event) {
 
   this.body.emitter.emit('itemover', {
     item: item.id,
-    event: util.elementsCensor(event)
+    event: event
   });
 };
 ItemSet.prototype._onMouseOut = function (event) {
@@ -1941,7 +1941,7 @@ ItemSet.prototype._onMouseOut = function (event) {
 
   this.body.emitter.emit('itemout', {
     item: item.id,
-    event: util.elementsCensor(event)
+    event: event
   });
 };
 ItemSet.prototype._onMouseMove = function (event) {
@@ -2145,7 +2145,7 @@ ItemSet.prototype._onMultiSelectItem = function (event) {
 
     this.body.emitter.emit('select', {
       items: this.getSelection(),
-      event: util.elementsCensor(event)
+      event: event
     });
   }
 };

lib/util.js

@@ -16,23 +16,6 @@ exports.isNumber = function (object) {
   return (object instanceof Number || typeof object == 'number');
 };
 
-/**
- * Censors object elements containing dom elements
- * @param {*} object
- * @return {Object} object without elements
- */
-exports.elementsCensor = function (object) {
-  if (!object) return;
-  var replacer = function(key, value) {
-    if (value instanceof Element) {
-      return "DOM Element";
-    } else {
-      return value;
-    }
-  }
-  return JSON.parse(JSON.stringify(object, replacer))
-}
-
 
 /**
  * Remove everything in the DOM object