Touch events added. Mouse events will never be fired b/c of preventDefault() (see above link with event ordering). touchMove keeps it updating the UI if you drag your thumb across. touchEnd makes the changes after any dragging thumb stuff.
I have also added a sanity check for numStarsFilled, so that dragging beyond the number of stars, during a touch event, will prevent the value exceeding the number of stars. In other words, without this, the touchEnd event could be fired (thumb lifted up) when the thumb is outside the component, and a five star rating component could return a rating of 8 (or other value higher than 5).
Also, user-select: none added to CSS. This prevents accidental highlighting during touch interactions.
Now works on first tap, updates in real-time as touch is dragged across rating.
See: https://github.com/trmcnvn/ember-star-rating/issues/17
Problem:
First interaction with star rating takes two taps on mobile (safari, iOS) to get the onclick event to fire.
Reason:
http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
Solution, described:
Touch events added. Mouse events will never be fired b/c of preventDefault() (see above link with event ordering). touchMove keeps it updating the UI if you drag your thumb across. touchEnd makes the changes after any dragging thumb stuff.
I have also added a sanity check for numStarsFilled, so that dragging beyond the number of stars, during a touch event, will prevent the value exceeding the number of stars. In other words, without this, the touchEnd event could be fired (thumb lifted up) when the thumb is outside the component, and a five star rating component could return a rating of 8 (or other value higher than 5).
Also, user-select: none added to CSS. This prevents accidental highlighting during touch interactions.
Boom. Enjoy.