trmcnvn/ember-star-rating

:star: An ember.js component for star ratings using svgs!

ember-star-rating

Ember.js component for ratings.

Check out the dummy app here

Installing the Add-on

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v8 or above

In your application's directory:

$ ember install ember-star-rating

Using the Add-on

Use the component in your template:

<StarRating @rating={{rating}} />

or with positional params.

{{star-rating rating}}

Configuration

Option	Type	Default	Info
rating	Number	0	The current rating value
numStars	Number	5	The number of "stars" to render
readOnly	Boolean	false	Whether the component can be edited or not
anyPercent	Boolean	false	Allow setting a rating to any percentage. Example: 3.2
wholeOnly	Boolean	false	Only allow integer rating values. Example: 1 - 5
useHalfStars	Boolean	true	Allow half rating values. Example: 2.5
onHover	Function	NOOP	Called on the mouseMove and mouseLeave events with the rating value at the time.
onClick	Function	NOOP	Called when the user selects a rating value. This is still invoked when readOnly is set to true
width	Number	26	Width of the SVG element
height	Number	26	Height of the SVG element
viewBox	String	'0 0 26 26'	ViewBox of the SVG element
svgPath	String	'...'	Path value of the SVG element
fillColor	String	'yellow'	Color of the SVG element that is considered full (has a rating)
baseColor	String	'lightgrey'	Color of the SVG element that is considered empty

License

See LICENSE.md

ember-star-rating's Issues

Additional parameters on onClick

Is there a way to pass additional parameters on the onClick method ??
I'm loading multiple StarRating components dynamical and i need to differentiate each

Doesn't work on Chrome-based mobile

It seems that v1.4.0 broke the add-on when used in chrome-based mobile browsers.

This can be verified by visiting the demo app (https://www.vevix.net/ember-star-rating/) in Chrome and enabling responsive design mode.

When in responsive design mode, clicks will set the stars to a value of 0.

I have also verified this on Android devices.

After some digging it seems that the bug is around this line of code:
https://github.com/trmcnvn/ember-star-rating/blob/master/addon/components/star-rating.js#L94

Where the problem seems to be that the event.pageX is undefined for touch* events on chrome-based mobile devices/views.

I've checked and this bug is present in version 1.4.0 and upwards.

It takes two taps on mobile...

First interaction with star rating takes two taps on mobile (safari, iOS) to get the onclick event to fire. It happens in your own demo:

https://www.vevix.net/ember-star-rating/

Removing the mouseMove event from the component "fixes" it - but then you don't get the desired mouseover effect on desktop.

Only affects the FIRST mobile tap.

Step 1: load your demo in safari
Step 2: tap a star in the Editable rating demo
-- star rating visually updates
-- click event does NOT fire
Step 3: tap Editable rating demo again
-- star rating visually updates
-- click event DOES fire
Step 4: tap again
-- star rating visually updates
-- click event DOES fire

It's only in step 2, the first tap, that it fails

Stop hovering an anyPercent star clips the rating

When you leave (stop hovering) an anyPercent star it clips the rating on a half-value.

Example:
https://ember-twiddle.com/833563fd60e48374107ddcf8cb4c04ac?openFiles=templates.application.hbs%2C

Unable to Install version 1.3.1 via npm install

Hi There. Unable to Install version 1.3.1 via npm install. Is it possible this has not been pushed to npm?

Remove ember-invoke-action addon

Info

The ember-invoke-action addon is no longer maintained and should be removed

ember-invoke-action

Safari (and Windows Google Chrome) Display Issue

Hi There - I've been using this plugin like so for some time in a project of ours like so...

{{star-rating 
	rating=business.averageRating
	readOnly=true
	width=18
	height=18
        baseColor="#CDCFD6"
	fillColor="#0ED7DA"
}}

However, on Safari the colors / shading don't come through correctly. I tried upgrading to the latest version to no avail.

Safari Screenshot

Google Chrome Screenshot

Any ideas? I checked out the SVG's and I see the linear gradient with the colors getting registered. I also tried hard-setting the

Component appears not to be fastboot compatible.

This is part of the error I am seeing in the console when I install this addon:

There was an error running your app in fastboot. More info about the error:
 Error: Accessing `this.element` is not allowed in non-interactive environments (such as FastBoot).
    at InertRenderer.getElement (/Users/alexmasita/External/Personal/projects/Ember-Apps/mobile-services/tmp/broccoli_persistent_filterautoprefixer_filter-output_path-OkvKfBIB.tmp/assets/ember-glimmer/renderer.js:383:1)
    at Class.get (/Users/alexmasita/External/Personal/projects/Ember-Apps/mobile-services/tmp/broccoli_persistent_filterautoprefixer_filter-output_path-OkvKfBIB.tmp/assets/ember-views/mixins/view_support.js:90:1)
    at Class.exports.default._emberMetal.Mixin.create._Mixin$create.$ (/Users/alexmasita/External/Personal/projects/Ember-Apps/mobile-services/tmp/broccoli_persistent_filterautoprefixer_filter-output_path-OkvKfBIB.tmp/assets/ember-views/mixins/view_support.js:95:1)

What to pass with the action ?

Depending on the answer I'll get, I will feel incredibly stupid, or not...
What param do I pass with the action ? User clicks on 2.5 stars, where is that 2.5 stored ? The ReadMe never specifies this, unless I'm overlooking something, see first line I wrote ! ;)

{{star-rating
numStars=5
readOnly=false
baseColor="#d1cccc"
fillColor="#f79902"
onClick=(action 'setRating' ...? )
}}

Full stars option

Is there any way to always have full stars and disable half empty stars?