Raty - A Star Rating Plugin.

Rating for Rails?

It's Rating: https://github.com/wbotelhos/rating :star:

Help

• Check the Tutorial to learn about all available features.
• If you're migrating from v3 to v4 check the Upgrade document.

Usage with Image

• raty.js
• star-off.png
• star-on.png

<script src="raty.js"></script>

<div data-raty></div>

const raty = new Raty(document.querySelector('[data-raty]'));

raty.init();

Usage with Font

• raty.css
• raty.[eot|svg|ttf|woff]
• raty.js

<link rel="stylesheet" href="raty.css">

<script src="raty.js"></script>

<div data-raty></div>

new Raty(document.querySelector('[data-raty]'), { starType: 'i' });

Options

| Property | Default |Description | |---------------|------------------------------------------------|-----------------------------------------------------------------| |cancelButton |false |Creates a cancel button to cancel the rating. | |cancelClass |'raty-cancel' |Name of cancel's class. | |cancelHint |'Cancel this rating!' |The cancel's button hint. | |cancelOff |'cancel-off.png' |Icon used on active cancel. | |cancelOn |'cancel-on.png' |Icon used inactive cancel. | |cancelPlace |'left' |Cancel's button position. | |click |undefined |Callback executed on rating click. | |half |false |Enables half star selection. | |halfShow |true |Enables half star display. | |hints |['bad', 'poor', 'regular', 'good', 'gorgeous']|Hints used on each star. | |iconRange |undefined |Object list with position and icon on and off to do a mixed icons| |iconRangeSame|false |All icons prior to selection will be the same as the selection. | |mouseout |undefined |Callback executed on mouseout. | |mouseover |undefined |Callback executed on mouseover. | |noRatedMsg |'Not rated yet!' |Hint for non rated elements when it's readOnly. | |number |5 |The number of stars that will be presented. | |numberMax |20 |Max number of stars star the option number will create. | |path |undefined |A global path where the icon will be found. | |precision |false |Enables the selection of a precise score. | |readOnly |false |Turns the rating read-only. | |round |{ down: .25, full: .6, up: .76 } |Includes value attributes to do the score rounding math. | |score |undefined |Initial rating. | |scoreName |'score' |Name of the hidden field that holds the score value. | |single |false |Enables single star selection. | |space |true |Puts space between the icons. | |starHalf |'star-half.png' |The name of the half star image. | |starOff |'star-off.png' |Name of the star image off. | |starOn |'star-on.png' |Name of the star image on. | |target |undefined |Element selector where the score will be displayed. | |targetFormat |'{score}' |Template to interpolate the score in. | |targetKeep |false |If the last rating value will be kept on mouseout. | |targetScore |undefined |Score field target avoiding hidden field creation | |targetText |'' |Default text in a target. | |targetType |'hint' |Choose if target will receive a hint or the score number | |starType |'img' |Element used to represent a star. |

Functions

To call some function, first, save the Raty instance on a variable and then call the functions:

var raty = new Raty(document.querySelector('[data-raty]'));

| Function | Description | |------------------------|-----------------------------------------------------------| |raty.score() |Get the current score. | |raty.score(number) |Set a score. | |raty.click(number) |Click on a star. | |raty.readOnly(boolean)|Change the read-only state. | |raty.cancel(boolean) |Cancel the rating. The last param force the click callback.| |raty.move(number) |Move the mouse to the given score point position. |

Build

gulp 'amd'
gulp 'umd'
gulp 'commonjs'
gulp 'systemjs'
gulp 'es6'
gulp 'es5'
gulp 'es5-test'