Rater API

The Rater Recipe, à la minute.

Ingredients:

Scriptaculous
rater.js
Optionally some images

Method:
Declare an element in your HTML with an Id, preferably <div>. Pass this id to the rater constructor like so: var r = new Rater(id); Do this when the element (or entire page) is loaded, ofcourse. Use <body onload='...'> for instance. You now got yourself a rater! Bon apetit...

This results in a vanilla rater. Variations can be made to serve a more interesting dish to your visitors. To construct a rater use one of the following:

new Rater(id)
new Rater(id, initial)
new Rater(id, options)
new Rater(id, options, initial)
new Rater(id, options, options)
new Rater(id, options, options, initial)

'id' Being the id of element or the element object itself.
'initial' Is a float representing the initial value of the rater, 0 <= initial <= 1.
The 'options' variable should be a javascript object containing member variables which define the behaviour and looks of the rater. A list of options can be found in the table below. Example of 'options': {width: 120, height: 10, reratable: true}. As you can see it is possible to send two 'options' objects along. This is because some preconfigured 'options' sets are available. For now, preconfigurations are (in raterLayout):
- stars
- starsVertical
- slider
- smooth
- progressBar
This way you can set up a rater like this: new Rater(someDiv, raterLayout.stars, {reratable: true}, .3); Saving you Object.extend and the need to pass the initial value in the object.

A buildRaters() function is defined to transform al elements with class="rater" on a page to raters at once. You could use that like: <body onload="javascript:buildRaters();">

Settings in 'options' object
Attribute Name	Type	Default	Description
width	integer	100	Width of the rater in pixels
height	integer	15	Height of the rater in pixels
initial	float	.5	Initial value of the rater
rated	boolean	false	Rated behaviour and looks or not
ratingto: null	mixed	null	URL with '%score%' in it or a function(raterObj, score)
steps	integer	0	Number of ratable steps (number of posible values is steps + 1)
snapAverage	boolean	false	Initial value is snapped to a step or not
cursor	string	'pointer'	CSS name of pointer when rater is ratable
cursorDefault	string	'default'	CSS name of pointer when rater is rated
enablePointer	boolean	false	An pointer/slider is displayed or not
fg	string	null	(Relative) URL to foreground image
bg	string	null	(Relative) URL to foreground image
p	string	null	(Relative) URL to foreground image
fg_torate	string	{fg}-value	(Relative) URL to foreground image when rater is to be rated
fg_rating	string	{fg}-value	(Relative) URL to foreground image when rater is being rated
fg_rated	strin	{fg}-value	(Relative) URL to foreground image when rater is rated
bg_torate	string	{bg}-value	(Relative) URL to background image when rater is to be rated
bg_rating	string	{bg}-value	(Relative) URL to background image when rater is being rated
bg_rated	strin	{bg}-value	(Relative) URL to background image when rater is rated
p_torate	string	{p}-value	(Relative) URL to pointer image when rater is to be rated
p_rating	string	{p}-value	(Relative) URL to pointer image when rater is being rated
p_rated	strin	{p}-value	(Relative) URL to pointer image when rater is rated
p_color	string	'000000'	RGB color for pointer in hex
fg_color	string	'ff0000'	RGB color for foreground in hex
bg_color	string	'eeeeee'	RGB color for background in hex
fg_color_rated	string	'7777dd'	RGB color for foreground when rated in hex
text	string	'%average% average with %votes% votes'	Text to put in the element with id textId
textId	string	null	Id of element where to put resulting vote text in
reratable	boolean	false	If rater should be re-rateble
snapBack	boolean	true	Snap back to initial value when mouse leaves rater
inputId	string	null	Id of an <input> element to assign rated value to
ignorePointerWidth	boolean	false	Ignore the width of the extra pointer (prevents pointer dragged out of rater element boundaries)

You'll need Scriptaculous to run this rater. Also you'll need the rater.js.
Rater v2.0 by eDesign.nl