MooRating

Rating star using Mootools.

As unregisted user cannot download the attachment, so I delete it.

Tested in Mozilla Firefox and IE 7.0.

js

/*
 * Rating star using Mootools.
 * 
 * Modified from Dynamic Rating stars @copyright 2006 Beau D. Scott
 * http://beauscott.com
 *
 * Note:valueBox must use continuous integers.If not, there could be some bugs.
 * messageBox and valueBox keys must begin from zero.
 */
Rating = new Class( {
 
	initialize : function(options) {
 
		this.options = $extend( {
			bindField : null,
			maxRating : 5,
			container : null,
			imageDirectory : "images/",
			callback : null,
			actionURL : null,
			value : 0,
			locked : false,
			useOpacityStyle : true,
			messageBox : $H( {
				0 : "Poor",
				1 : "Nothing special",
				2 : "Worth watching",
				3 : "Pretty cool",
				4 : "Awesome!"
			}),
			valueBox : $H( {
				0 : 1,
				1 : 2,
				2 : 3,
				3 : 4,
				4 : 5
			})
		}, options || {});
 
		if (this.options.messageBox.length != this.options.maxRating
				|| this.options.valueBox.length != this.options.maxRating) {
			alert("messageBox's length and valueBox's length must be equal to maxRating");
			return;
		}
 
		/**
		 * hover and empty ratings imageSrc.
		 */
		this.hoverImages = {
			EMPTY : this.options.imageDirectory + "empty.gif",
			HALF : this.options.imageDirectory + "hover-half.gif",
			FULL : this.options.imageDirectory + "hover.gif"
		};
 
		/**
		 * preload images
		 */
		for (var x in this.hoverImages) {
			var y = document.createElement("img");
			y.src = this.hoverImages[x];
		}
 
		/**
		 * selected and empty ratings imageSrc.
		 */
		this.selectedImages = {
			EMPTY : this.options.imageDirectory + "empty.gif",
			HALF : this.options.imageDirectory + "selected-half.gif",
			FULL : this.options.imageDirectory + "selected.gif"
		};
		/**
		 * preload images
		 */
		for (var x in this.selectedImages) {
			var y = document.createElement("img");
			y.src = this.selectedImages[x];
		}
 
		if ($defined(this.options.container)) {
			this.container = $(this.options.container);
		} else {
			this.id = "ratecontainer" + Math.random(0, 10000);
			document.write('<span id="' + this.id + '"></span>');
			this.container = $(this.id);
		}
 
		this.initialized = false;
		this.rated = false;
		this.ratings = [];
		this.value = -1;
		this.locked = this.options.locked ? true : false;
		this.useOpacityStyle = this.options.useOpacityStyle ? true : false;
 
		this.display();
		this.setValue(this.options.value);
		this.initialized = true;
	},
 
	display : function() {
		for (var i = 0;i < this.options.maxRating; i++) {
			var rating = document.createElement("img");
			rating.src = this.locked
					? this.selectedImages.EMPTY
					: this.hoverImages.EMPTY;
			rating.style.cursor = "pointer";
			rating.title = this.options.messageBox.get(i);
			if (!this.locked) {
				rating.addEvent("mouseover", this.hover.bind(this));
				rating.addEvent("click", this.rate.bind(this));
				rating.addEvent("mouseout", this.clear.bind(this));
			}
			this.ratings.push(rating);
			this.container.appendChild(rating);
		}
	},
 
	setValue : function(val) {
		if (this.locked && this.initialized)
			return;
 
		// iterate on options.valueBox to search key for val.
 
		for (var i = 0;i < this.options.valueBox.length; i++) {
			var value = this.options.valueBox.get(i);
			if (value == val + .5) {
				this.value = i - .5;
				break;
			} else if (value == val) {
				this.value = i;
				break;
			}
		}
		/*
		 * this.options.valueBox.each(function(value, key) { if (value == val +
		 * .5) { this.value = key - .5; } else if (value == val) { this.value =
		 * key; } }, this);
		 */
		if (this.options.bindField) {
			$(this.options.bindField).value = val;
		}
		if (this.initialized) {
			if (this.options.actionURL) {
				// ajax submit.
				new Ajax(this.options.actionURL + val, {
					method : "get",
					onComplete : this.options["callback"]
				}).request();
			} else if (this.options.callback) {
				this.options["callback"](val);
			}
		}
		this.clear();
	},
 
	hover : function(ev) {
		if (this.locked)
			return;
		var rating = new Event(ev).target;
		var greater = false;
 
		this.ratings.each(function(el) {
			el.src = greater ? this.hoverImages.EMPTY : this.hoverImages.FULL;
			if (rating == el) {
				greater = true;
				// TODO use opacity style, maybe more beautiful styles should be
				// added.
				if (this.useOpacityStyle) {
					var fx = new Fx.Style(el, "opacity", {
						duration : 500,
						wait : false
					});
					fx.start(.5, 1);
				}
			}
		}, this);
	},
 
	rate : function(ev) {
		if (this.locked)
			return;
		var rating = new Event(ev).target;
		this.rated = true;
 
		this.ratings.some(function(el, i) {
			if (el == rating) {
				this.setValue(this.options.valueBox.get(i));
				return true;
			}
		}, this);
	},
 
	clear : function(ev) {
		if (this.locked && this.initialized)
			return;
		var greater = false;
		this.ratings.each(function(el, i) {
			if (i > this.value)
				greater = true;
			if ((this.initialized && this.rated) || this.value == -1)
				el.src = greater ? (this.value + .5 == i)
						? this.hoverImages.HALF
						: this.hoverImages.EMPTY : this.hoverImages.FULL;
			else
				this.ratings[i].src = greater ? (this.value + .5 == i)
						? this.selectedImages.HALF
						: this.selectedImages.EMPTY : this.selectedImages.FULL;
		}, this)
	}
});

Usage:

<script>
var rating = new Rating({
	value:0.5,
	locked:false,
	bindField:'test',
	callback:showRate
});

function showRate(val){
	rating.locked=true;
}
</script>