Fix: #1906 Pass through original hammer.js events (#2420)

* Fix redraw order
* Add elements censor and event to emitter
* Fix all recursive loop in json event
* Add docs for event emitted

docs/timeline/index.html

@@ -1488,6 +1488,7 @@ timeline.off('select', onSelect);
           <li><code>start</code> (Number): timestamp of the current start of the window.</li>
           <li><code>end</code> (Number): timestamp of the current end of the window.</li>
           <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
+          <li><code>event</code> (Object): original event triggering the rangechange.</li>
         </ul>
       </td>
       <td>Fired repeatedly when the timeline window is being changed.
@@ -1501,6 +1502,7 @@ timeline.off('select', onSelect);
           <li><code>start</code> (Number): timestamp of the current start of the window.</li>
           <li><code>end</code> (Number): timestamp of the current end of the window.</li>
           <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
+          <li><code>event</code> (Object): original event triggering the rangechanged.</li>
         </ul>
       </td>
       <td>Fired once after the timeline window has been changed.
@@ -1549,6 +1551,7 @@ timeline.off('select', onSelect);
         <ul>
           <li><code>id</code> (Number or String): custom time bar id.</li>
           <li><code>time</code> (Date): the custom time.</li>
+          <li><code>event</code> (Object): original event triggering the timechange.</li>
         </ul>
       </td>
       <td>Fired repeatedly when the user is dragging the custom time bar.
@@ -1562,6 +1565,7 @@ timeline.off('select', onSelect);
         <ul>
           <li><code>id</code> (Number or String): custom time bar id.</li>
           <li><code>time</code> (Date): the custom time.</li>
+          <li><code>event</code> (Object): original event triggering the timechanged.</li>
         </ul>
       </td>
       <td>Fired once after the user has dragged the custom time bar.

lib/timeline/Range.js

@@ -116,7 +116,7 @@ function validateDirection (direction) {
  * @param {Boolean} [byUser=false]
  *
  */
-Range.prototype.setRange = function(start, end, animation, byUser) {
+Range.prototype.setRange = function(start, end, animation, byUser, event) {
   if (byUser !== true) {
     byUser = false;
   }
@@ -151,13 +151,21 @@ Range.prototype.setRange = function(start, end, animation, byUser) {
         changed = me._applyRange(s, e);
         DateUtil.updateHiddenDates(me.options.moment, me.body, me.options.hiddenDates);
         anyChanged = anyChanged || changed;
+
+        var params = {
+          start: new Date(me.start), 
+          end: new Date(me.end), 
+          byUser:byUser,
+          event: util.elementsCensor(event)
+        }
+
         if (changed) {
-          me.body.emitter.emit('rangechange', {start: new Date(me.start), end: new Date(me.end), byUser:byUser});
+          me.body.emitter.emit('rangechange', params);
         }
 
         if (done) {
           if (anyChanged) {
-            me.body.emitter.emit('rangechanged', {start: new Date(me.start), end: new Date(me.end), byUser:byUser});
+            me.body.emitter.emit('rangechanged', params);
           }
         }
         else {
@@ -174,7 +182,12 @@ Range.prototype.setRange = function(start, end, animation, byUser) {
     var changed = this._applyRange(finalStart, finalEnd);
     DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
     if (changed) {
-      var params = {start: new Date(this.start), end: new Date(this.end), byUser:byUser};
+      var params = {
+        start: new Date(this.start), 
+        end: new Date(this.end), 
+        byUser:byUser, 
+        event: util.elementsCensor(event)
+      };
       this.body.emitter.emit('rangechange', params);
       this.body.emitter.emit('rangechanged', params);
     }
@@ -445,7 +458,8 @@ Range.prototype._onDrag = function (event) {
   this.body.emitter.emit('rangechange', {
     start: startDate,
     end:   endDate,
-    byUser: true
+    byUser: true,
+    event: util.elementsCensor(event)
   });
 
   // fire a panmove event
@@ -477,7 +491,8 @@ Range.prototype._onDragEnd = function (event) {
   this.body.emitter.emit('rangechanged', {
     start: new Date(this.start),
     end:   new Date(this.end),
-    byUser: true
+    byUser: true,
+    event: util.elementsCensor(event)
   });
 };
 
@@ -512,7 +527,7 @@ Range.prototype._onMouseWheel = function(event) {
       var newStart = this.start - diff;
       var newEnd = this.end - diff;
 
-      this.setRange(newStart, newEnd);
+      this.setRange(newStart, newEnd, false, true, event);
     }
     return;
   }
@@ -543,7 +558,7 @@ Range.prototype._onMouseWheel = function(event) {
     var pointer = this.getPointer({x: event.clientX, y: event.clientY}, this.body.dom.center);
     var pointerDate = this._pointerToDate(pointer);
 
-    this.zoom(scale, pointerDate, delta);
+    this.zoom(scale, pointerDate, delta, event);
 
     // Prevent default actions caused by mouse wheel
     // (else the page and timeline both scroll)
@@ -604,7 +619,7 @@ Range.prototype._onPinch = function (event) {
     newEnd = safeEnd;
   }
 
-  this.setRange(newStart, newEnd, false, true);
+  this.setRange(newStart, newEnd, false, true, event);
 
   this.startToFront = false; // revert to default
   this.endToFront = true; // revert to default
@@ -684,7 +699,7 @@ Range.prototype.getPointer = function (touch, element) {
  * @param {Number} [center]   Value representing a date around which will
  *                            be zoomed.
  */
-Range.prototype.zoom = function(scale, center, delta) {
+Range.prototype.zoom = function(scale, center, delta, event) {
   // if centerDate is not provided, take it half between start Date and end Date
   if (center == null) {
     center = (this.start + this.end) / 2;
@@ -708,7 +723,7 @@ Range.prototype.zoom = function(scale, center, delta) {
     newEnd = safeEnd;
   }
 
-  this.setRange(newStart, newEnd, false, true);
+  this.setRange(newStart, newEnd, false, true, event);
 
   this.startToFront = false; // revert to default
   this.endToFront = true; // revert to default
@@ -749,7 +764,7 @@ Range.prototype.moveTo = function(moveTo) {
   var newStart = this.start - diff;
   var newEnd = this.end - diff;
 
-  this.setRange(newStart, newEnd);
+  this.setRange(newStart, newEnd, false, true, event);
 };
 
 module.exports = Range;

lib/timeline/component/CustomTime.js

@@ -214,7 +214,8 @@ CustomTime.prototype._onDrag = function (event) {
   // fire a timechange event
   this.body.emitter.emit('timechange', {
     id: this.options.id,
-    time: new Date(this.customTime.valueOf())
+    time: new Date(this.customTime.valueOf()),
+    event: util.elementsCensor(event)
   });
 
   event.stopPropagation();
@@ -231,7 +232,8 @@ CustomTime.prototype._onDragEnd = function (event) {
   // fire a timechanged event
   this.body.emitter.emit('timechanged', {
     id: this.options.id,
-    time: new Date(this.customTime.valueOf())
+    time: new Date(this.customTime.valueOf()),
+    event: util.elementsCensor(event)
   });
 
   event.stopPropagation();

lib/timeline/component/ItemSet.js

@@ -1766,7 +1766,7 @@ ItemSet.prototype._onSelectItem = function (event) {
   if (newSelection.length > 0 || oldSelection.length > 0) {
     this.body.emitter.emit('select', {
       items: newSelection,
-      event: event
+      event: util.elementsCensor(event)
     });
   }
 };
@@ -1781,7 +1781,7 @@ ItemSet.prototype._onMouseOver = function (event) {
   if (!item) return;
   this.body.emitter.emit('itemover', {
     item: item.id,
-    event: event
+    event: util.elementsCensor(event)
   });
 };
 ItemSet.prototype._onMouseOut = function (event) {
@@ -1789,7 +1789,7 @@ ItemSet.prototype._onMouseOut = function (event) {
   if (!item) return;
   this.body.emitter.emit('itemout', {
     item: item.id,
-    event: event
+    event: util.elementsCensor(event)
   });
 };
 
@@ -1966,7 +1966,7 @@ ItemSet.prototype._onMultiSelectItem = function (event) {
 
     this.body.emitter.emit('select', {
       items: this.getSelection(),
-      event: event
+      event: util.elementsCensor(event)
     });
   }
 };

lib/util.js

@@ -16,6 +16,23 @@ 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