diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 61a31f70..5fa25312 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1187,7 +1187,7 @@ document.getElementById('myTimeline').onclick = function (event) { on(event, callback) none - Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. + Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select, itemover, itemout. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information. @@ -1442,6 +1442,28 @@ timeline.off('select', onSelect); + + itemover + + + + Fired when the user moves the mouse over an item. + + + + itemout + + + + Fired when the user moves the mouse out of an item. + + timechange diff --git a/examples/timeline/interaction/eventListeners.html b/examples/timeline/interaction/eventListeners.html index b9d9b8cb..f3a9bcc5 100644 --- a/examples/timeline/interaction/eventListeners.html +++ b/examples/timeline/interaction/eventListeners.html @@ -19,6 +19,7 @@

+
\ No newline at end of file diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 381ac011..eeec817a 100644 --- a/lib/timeline/component/ItemSet.js +++ b/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