Add and fix mouse events on timeline #2473
Conversation
| // timeline.on('mouseDown', function (properties) { | ||
| // logEvent('mouseDown', properties); | ||
| // }); | ||
|
|
| @@ -120,15 +120,27 @@ function Timeline (container, items, groups, options) { | |||
| this.itemsData = null; // DataSet | |||
| this.groupsData = null; // DataSet | |||
|
|
|||
| this.on('tap', function (event) { | |||
There was a problem hiding this comment.
Did you make sure this still workes on mobile?
There was a problem hiding this comment.
Yup, I have a touch screen on my computer and it seems to work fine.
There was a problem hiding this comment.
cool! But we should test it on mobile devices. It's possible that your screen emulates mouse events. I'll try to have a look on some devices.
There was a problem hiding this comment.
Ok, looks good on Android and iOS.
| <td> | ||
| Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>. | ||
| </td> | ||
| <td>Fired when mouse over the Timeline. |
There was a problem hiding this comment.
Better: "Fired when the mouse hovers over a timeline element."
There was a problem hiding this comment.
It's not really hover. I mean, it is in a sense, but from what I saw there is a difference between hover and mouseover events so I still want this to say "mouse over"
There was a problem hiding this comment.
No problem. But the event is not fired by mouse over the "timeline" itself, but the event is fired if the mouse is over a "timeline element". Check it again, I'm not so sure myself but it looked like the event is e.g. fired by mouse over time-ticks, elements. Maybe we should clarify this!?
There was a problem hiding this comment.
Will do. I think ill change it to mouseover for the timeline as a whole
| <td> | ||
| Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>. | ||
| </td> | ||
| <td>Fired when mouse down inside the Timeline. |
There was a problem hiding this comment.
I don't understand this event. I only managed to trigger this in the example by pressing the middle-mouse-button.
There was a problem hiding this comment.
It fires when you press the left mouse button in the timeline
There was a problem hiding this comment.
I get a "click" event on the left button and a "contextmenu" on the right button.
There was a problem hiding this comment.
Weird... ill check that out
There was a problem hiding this comment.
I've removed this event. I see absolutely no real reason for this event.
| </tr> | ||
|
|
||
| <tr> | ||
| <td>mouseUp</td> |
There was a problem hiding this comment.
I don't understand this event. I only managed to trigger this in the example by pressing the middle-mouse-button.
There was a problem hiding this comment.
Same as above just for when you release it
There was a problem hiding this comment.
I've removed this event. I see absolutely no real reason for this event.
| this.dom.root.onmouseup = function (event) { | ||
| me.emit('mouseUp', me.getEventProperties(event)) | ||
| }; | ||
| this.dom.root.onmousemove = function (event) { |
There was a problem hiding this comment.
do we really want to emit this event. This happens quite often? What is the usecase for this?
There was a problem hiding this comment.
I see a use for it when someone wants a tooltip appearing any time you're on the timeline and want to see the exact time you are hovering on
| @@ -120,15 +120,27 @@ function Timeline (container, items, groups, options) { | |||
| this.itemsData = null; // DataSet | |||
| this.groupsData = null; // DataSet | |||
|
|
|||
| this.on('tap', function (event) { | |||
There was a problem hiding this comment.
Ok, looks good on Android and iOS.
fixes #226, #2421 and #2429