com.redijedi.tapestry.components.rating.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of redijedi-t5-components

A collection of components built specifically for Tapestry 5.

The newest version!

/**
 * The "class" definition for the JS component properties of a 
 * graphical slider widget.
 *
 * Depends on the prototype library provided by T5.
 */
var RatingField = Class.create();

RatingField.prototype = {
	
	selectedImagePath: null,
	unselectedImagePath: null,
	
	/**
	  * pseudo constructor initializes object props
	  */
	initialize: function(divId, selectedImagePath, unselectedImagePath) {
	
		this.selectedImagePath = selectedImagePath;
		this.unselectedImagePath = unselectedImagePath;
		this.values = new Array();
	
		var choiceBlocks = $(divId).getElementsByClassName('rj-rating-choice');
		for (var i = 0; i < choiceBlocks.length; i++) {
			var div = choiceBlocks[i];
			var input = div.getElementsBySelector('input')[0];
			var label = div.getElementsBySelector('label')[0];
			var value = new RatingChoice(div, input, label, this);
			this.values.push(value);
		}
		
		// init the images
		this.change();
	},
	
	change: function() {
		var selectedIndex = -1
		for (var i = this.values.length - 1; i >= 0; i--) {
			this.values[i].refresh();
			if (this.values[i].selected()) {
				selectedIndex = i;
			}
			if (selectedIndex > i) {
				this.values[i].refresh(true);
			}
		}
	}

}


var RatingChoice = Class.create();

/**
 * Representing the div, input, label, and image for a rating choice.
 */
RatingChoice.prototype = {

	initialize: function(div, input, label, parent) {
		this.div = div;
		this.input = input;
		this.label = label;
		this.parent = parent;
		
		this.image = document.createElement('img');
		
		this.div.appendChild(this.image);
		this.refresh();
		
		Event.observe(this.input, 'change', function() {
			// call out to the parent obj
			this.parent.change();
		}.bindAsEventListener(this));
		
		Event.observe(this.image, 'mouseup', function() {
			this.input.checked = true;
			this.parent.change();
		}.bindAsEventListener(this));
		
	},
	
	selected: function() {
		return this.input.checked;
	},
		
	/**
	 * Determines if this value has been selected and updates the image 
	 * value accordingly.
	 */
	refresh: function(force) {
		if (this.selected() || force) {
			this.image.src = this.parent.selectedImagePath;
		} else {
			this.image.src = this.parent.unselectedImagePath;
		}
	}
	
}