From 419e6cd51645c4522d619441f3dab5c01d587c59 Mon Sep 17 00:00:00 2001 From: yotamberk Date: Wed, 7 Dec 2016 22:29:35 +0200 Subject: [PATCH] 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 | 4 +++ lib/timeline/Range.js | 39 +++++++++++++++++++--------- lib/timeline/component/CustomTime.js | 6 +++-- lib/timeline/component/ItemSet.js | 8 +++--- lib/util.js | 17 ++++++++++++ 5 files changed, 56 insertions(+), 18 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index a529c1d1..9a623722 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1488,6 +1488,7 @@ timeline.off('select', onSelect);
  • start (Number): timestamp of the current start of the window.
  • end (Number): timestamp of the current end of the window.
  • byUser (Boolean): change happened because of user drag/zoom.
    • +
  • event (Object): original event triggering the rangechange.
    • Fired repeatedly when the timeline window is being changed. @@ -1501,6 +1502,7 @@ timeline.off('select', onSelect);
  • start (Number): timestamp of the current start of the window.
  • end (Number): timestamp of the current end of the window.
  • byUser (Boolean): change happened because of user drag/zoom.
    • +
  • event (Object): original event triggering the rangechanged.
    • Fired once after the timeline window has been changed. @@ -1549,6 +1551,7 @@ timeline.off('select', onSelect); Fired repeatedly when the user is dragging the custom time bar. @@ -1562,6 +1565,7 @@ timeline.off('select', onSelect); Fired once after the user has dragged the custom time bar. diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index f0d51b8e..3e250f38 100644 --- a/lib/timeline/Range.js +++ b/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; diff --git a/lib/timeline/component/CustomTime.js b/lib/timeline/component/CustomTime.js index 63963abe..6a94b2ac 100644 --- a/lib/timeline/component/CustomTime.js +++ b/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(); diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index b0a71b94..1036b316 100644 --- a/lib/timeline/component/ItemSet.js +++ b/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) }); } }; diff --git a/lib/util.js b/lib/util.js index 54d68bf7..85aee0fd 100644 --- a/lib/util.js +++ b/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