jquery.rating.js

/*
 ### jQuery Star Rating Plugin v4.11 - 2013-03-14 ###
 * Home: https://star-rating.fyneworks.com/
 * Code: http://code.google.com/p/jquery-star-rating-plugin/
 *
	* Licensed under http://en.wikipedia.org/wiki/MIT_License
 ###
*/

/*# AVOID COLLISIONS #*/
;if(window.jQuery) (function($){
/*# AVOID COLLISIONS #*/

	// IE6 Background Image Fix
	if ((!$.support.opacity && !$.support.style)) try {
		document.execCommand("BackgroundImageCache", false, true);
	} catch(e) {

	}
	// Thanks to http://www.visualjquery.com/rating/rating_redux.html

	// plugin initialization
	$.fn.rating = function(opts) {
		if(this.length===0) return this; // quick fail

		// Handle API methods
		if(typeof arguments[0]=='string') {
			// Perform API methods on individual elements
			if(this.length>1){
				var args = arguments;
				return this.each(function(){
					$.fn.rating.apply($(this), args);
				});
			}

			// Invoke API method handler
			$.fn.rating[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []);
			// Quick exit...
			return this;
		}

		// Initialize options for this call
		var options = $.extend(
			{} /* new object */,
			$.fn.rating.options/* default options */,
			opts || {} /* just-in-time options */
		);

		// Allow multiple controls with the same name by making each call unique
		$.fn.rating.calls++;

		// loop through each matched element
		this
		.not('.star-rating-applied')
		.addClass('star-rating-applied')
		.each(function(){

			// Load control parameters / find context / etc
			var control, input = $(this);
			var control_name = (this.name || options.name || 'unnamed-rating' +(options.stars?'-'+$.fn.rating.calls:'') ).replace(/\[|\]/g, '_').replace(/^\_+|\_+$/g,'');
			var context = $(this.form || document.body);

			// issue #10 - https://github.com/fyneworks/star-rating/issues/10
			if(!input.is('input')){
				if(options.stars){
					
					// insert newly created form elements
					input.html(Array(options.stars+1).join(
						'<input type="radio" name="'+ control_name +'"/>'
					));

					return input.find('input').each(function(i){
						// set element values.
						// accepts an array in options.values
						// or defaults to numbers from 1 to options.stars
						$(this).val( options.values ? options.values[i] : i+1 )

					})
					.rating(options);
				}
				else{
					throw "Invalid star rating plugin call";
					return;
				};
			};

			// FIX: http://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=23
			var raters = context.data('rating');
			if(!raters || raters.call!=$.fn.rating.calls) raters = { count:0, call:$.fn.rating.calls };
			var rater = raters[control_name] || context.data('rating'+control_name);

			// if rater is available, verify that the control still exists
			if(rater) control = rater.data('rating');

			if(rater && control)//{// save a byte!
				// add star to control if rater is available and the same control still exists
				control.count++;

			//}// save a byte!
			else{
				// create new control if first star or control element was removed/replaced

				// Initialize options for this rater
				control = $.extend(
					{}/* new object */,
					options || {} /* current call options */,
					($.metadata? input.metadata(): ($.meta?input.data():null)) || {}, /* metadata options */
					{ count:0, stars: [], inputs: [] }
				);

				// increment number of rating controls
				control.serial = raters.count++;

				// create rating element
				rater = $('<span class="star-rating-control" aria-hidden="true" />');
				input.before(rater);

				// Mark element for initialization (once all stars are ready)
				rater.addClass('rating-to-be-drawn');

				// Accept readOnly setting from 'disabled' property
				if(input.attr('disabled') || input.hasClass('disabled')) control.readOnly = true;

				// Accept required setting from class property (class='required')
				if(input.hasClass('required')) control.required = true;

				// Create 'cancel' button
				rater.append(
					control.cancel = $('<div class="rating-cancel rater-cancel-' + control.serial + '"><a title="' + control.cancel + '">' + control.cancelValue + '</a></div>')
					.on('mouseover',function(){
						$(this).rating('drain');
						$(this).addClass('star-rating-hover');
						//$(this).rating('focus');
					})
					.on('mouseout',function(){
						$(this).rating('draw');
						$(this).removeClass('star-rating-hover');
						//$(this).rating('blur');
					})
					.on('click',function(){
						$(this).rating('select');
					})
					.data('rating', control)
				);

			} // first element of group

			// insert rating star (thanks Jan Fanslau rev125 for blind support https://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=125)
			var star = $('<div role="text" aria-label="'+ (this.title || this.value) +'" class="star-rating rater-'+ control.serial +'"><a title="' + (this.title || this.value) + '">' + this.value + '</a></div>');
			rater.append(star);

			// inherit attributes from input element
			if(this.id) star.attr('id', this.id);
			if(this.className) star.addClass(this.className);

			// Google Code Suggestion 144 - https://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=144
			for (datum in $(this).data()) {
				star.data(datum, $(this).data(datum));
			};

			// Half-stars?
			if(control.half) control.split = 2;

			// Prepare division control
			if(typeof control.split=='number' && control.split>0){
				var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
				var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
				star
				// restrict star's width and hide overflow (already in CSS)
				.width(spw)
				// move the star left by using a negative margin
				// this is work-around to IE's stupid box model (position:relative doesn't work)
				.find('a').css({ 'margin-left': '-'+ (spi*spw) +'px' });
			}

			// readOnly?
			if(control.readOnly)//{ //save a byte!
				// Mark star as readOnly so user can customize display
				star.addClass('star-rating-readonly');
			//}  //save a byte!

			else {
				// Enable hover css effects
				star.addClass('star-rating-live')
					// Attach mouse events
					.on('mouseover',function(){
						$(this).rating('fill');
						$(this).rating('focus');
					})
					.on('mouseout',function(){
						$(this).rating('draw');
						$(this).rating('blur');
					})
					.on('click',function(){
						$(this).rating('select');
					});
			} //save a byte!

			// set current selection
			if(this.checked) control.current = star;

			// set current select for links
			if(this.nodeName=="A"){
				if($(this).hasClass('selected')) control.current = star;
			}

			// hide input element
			input.css({"position": "absolute", "left": "-9999em"});

			// backward compatibility, form element to plugin
			input.on('change.rating',function(event){
				if(event.selfTriggered) return false;
				$(this).rating('select');
			});

			// attach reference to star to input element and vice-versa
			star.data('rating.input', input.data('rating.star', star));

			// store control information in form (or body when form not available)
			control.stars[control.stars.length] = star[0];
			control.inputs[control.inputs.length] = input[0];
			control.rater = raters[control_name] = rater;
			control.context = context;

			input.data('rating', control);
			rater.data('rating', control);
			star.data('rating', control);
			context.data('rating', raters);
			context.data('rating'+control_name, rater); // required for ajax forms
		}); // each element

		// Initialize ratings (first draw)
		$('.rating-to-be-drawn').rating('draw').removeClass('rating-to-be-drawn');

		return this; // don't break the chain...
	};

	/*--------------------------------------------------------*/

	/*
		### Core functionality and API ###
	*/
	$.extend($.fn.rating, {
		// Used to append a unique serial number to internal control ID
		// each time the plugin is invoked so same name controls can co-exist
		calls: 0,

		focus: function(){
			var control = this.data('rating'); if(!control) return this;
			if(!control.focus) return this; // quick fail if not required
			// find data for event
			var input = $(this).data('rating.input') || $( this.tagName=='INPUT' ? this : null );
			// focus handler, as requested by focusdigital.co.uk
			if(control.focus) control.focus.apply(input[0], [input.val(), $('a', input.data('rating.star'))[0]]);
		}, // $.fn.rating.focus

		blur: function(){
			var control = this.data('rating'); if(!control) return this;
			if(!control.blur) return this; // quick fail if not required
			// find data for event
			var input = $(this).data('rating.input') || $( this.tagName=='INPUT' ? this : null );
			// blur handler, as requested by focusdigital.co.uk
			if(control.blur) control.blur.apply(input[0], [input.val(), $('a', input.data('rating.star'))[0]]);
		}, // $.fn.rating.blur

		fill: function(){ // fill to the current mouse position.
			var control = this.data('rating'); if(!control) return this;
			// do not execute when control is in read-only mode
			if(control.readOnly) return;
			// Reset all stars and highlight them up to this element
			this.rating('drain');
			this.prevAll().addBack().filter('.rater-'+ control.serial).addClass('star-rating-hover');
		},// $.fn.rating.fill

		drain: function() { // drain all the stars.
			var control = this.data('rating'); if(!control) return this;
			// do not execute when control is in read-only mode
			if(control.readOnly) return;
			// Reset all stars
			control.rater.children().filter('.rater-'+ control.serial).removeClass('star-rating-on').removeClass('star-rating-hover');
		},// $.fn.rating.drain

		draw: function(){ // set value and stars to reflect current selection
			var control = this.data('rating'); if(!control) return this;
			// Clear all stars
			this.rating('drain');
			// Set control value
			var current = $( control.current );//? control.current.data('rating.input') : null );
			var starson = current.length ? current.prevAll().addBack().filter('.rater-'+ control.serial) : null;
			if(starson)	starson.addClass('star-rating-on');
			// Show/hide 'cancel' button
			control.cancel[control.readOnly || control.required?'hide':'show']();
			// Add/remove read-only classes to remove hand pointer
			this.siblings()[control.readOnly?'addClass':'removeClass']('star-rating-readonly');
		}, // $.fn.rating.draw





		select: function(value,wantCallBack){ // select a value
			var control = this.data('rating'); if(!control) return this;
			// do not execute when control is in read-only mode
			if(control.readOnly) return;
			// clear selection
			control.current = null;
			// programmatically (based on user input)
			if(typeof value!='undefined' || this.length>1){
				// select by index (0 based)
				if(typeof value=='number')
					return $(control.stars[value]).rating('select',undefined,wantCallBack);
				// select by literal value (must be passed as a string
				if(typeof value=='string'){
					//return
					$.each(control.stars, function(){
					//console.log($(this).data('rating.input'), $(this).data('rating.input').val(), value, $(this).data('rating.input').val()==value?'BINGO!':'');
						if($(this).data('rating.input').val()==value) $(this).rating('select',undefined,wantCallBack);
					});
					// don't break the chain
					return this;
				}
			} else {
				control.current = this[0].tagName=='INPUT' ?
					this.data('rating.star') :
					((this.is('.rater-'+ control.serial) || this.is('.rater-cancel-' + control.serial)) ? this : null);
			}
			// Update rating control state
			this.data('rating', control);
			// Update display
			this.rating('draw');
			// find current input and its sibblings
			var current = $( control.current ? control.current.data('rating.input') : null );
			var lastipt = $( control.inputs ).filter(':checked');
			var deadipt = $( control.inputs ).not(current);
			// check and uncheck elements as required
			deadipt.prop('checked',false);//.removeAttr('checked');
			current.prop('checked',true);//.attr('checked','checked');
			// trigger change on current or last selected input
			$(current.length? current : lastipt ).trigger({ type:'change', selfTriggered:true });
			// click callback, as requested here: http://plugins.jquery.com/node/1655
			if((wantCallBack || wantCallBack === undefined) && control.callback) control.callback.apply(current[0], [current.val(), $('a', control.current)[0]]);// callback event
			// don't break the chain
			return this;
		},// $.fn.rating.select





		readOnly: function(toggle, disable){ // make the control read-only (still submits value)
			var control = this.data('rating'); if(!control) return this;
			// setread-only status
			control.readOnly = toggle || toggle===undefined ? true : false;
			// enable/disable control value submission
			if(disable) {
				$(control.inputs).attr("disabled", "disabled");
			} else {
				$(control.inputs).removeAttr("disabled");
			}
			// Update rating control state
			this.data('rating', control);
			// Update display
			this.rating('draw');
		}, // $.fn.rating.readOnly

		disable: function(){ // make read-only and never submit value
			this.rating('readOnly', true, true);
		}, // $.fn.rating.disable

		enable: function(){ // make read/write and submit value
			this.rating('readOnly', false, false);
		} // $.fn.rating.select
	});

	/*--------------------------------------------------------*/

	/*
		### Default Settings ###
		eg.: You can override default control like this:
		$.fn.rating.options.cancel = 'Clear';
	*/
	$.fn.rating.options = { //$.extend($.fn.rating, { options: {
			cancel: 'Cancel Rating',   // advisory title for the 'cancel' link
			cancelValue: '',           // value to submit when user click the 'cancel' link
			split: 0,                  // split the star into how many parts?

			// Width of star image in case the plugin can't work it out. This can happen if
			// the jQuery.dimensions plugin is not available OR the image is hidden at installation
			starWidth: 16//,

			//NB.: These don't need to be pre-defined (can be undefined/null) so let's save some code!
			//half:     false,         // just a shortcut to control.split = 2
			//required: false,         // disables the 'cancel' button so user can only select one of the specified values
			//readOnly: false,         // disable rating plugin interaction/ values cannot be.one('change',		//focus:    function(){},  // executed when stars are focused
			//blur:     function(){},  // executed when stars are focused
			//callback: function(){},  // executed when a star is clicked
	}; //} });

	/*--------------------------------------------------------*/


	// auto-initialize plugin
	$(function(){
		$('input[type=radio].star').rating();
	});

/*# AVOID COLLISIONS #*/
})(jQuery);
/*# AVOID COLLISIONS #*/