behaviour.js example

// Rules to power the user_warning class.
var jsrules = {
	'.userWarning' : function(el){
		if (document.createTextNode && document.createElement && el.insertBefore && el.parentNode.removeChild) {
			// Build the button.
			var newLink = document.createElement('a');
			newLink.setAttribute("class","closeButton");
			newLink.setAttribute("title","Close");
			newLink.appendChild(document.createTextNode("X"));

			// Place the button.
			el.insertBefore(newLink, el.firstChild);

			// Attach the behaviours.
			// TODO: Switch to using "this" instead of "el" so we can save memory.
			newLink.onclick = function(){ el.parentNode.removeChild(el); }
		}
	},
	'.ratingInput' : function(el) {
		if (document.createElement && el.removeChild && el.appendChild) {

			// Pull the data out of the fallback so the non-fallback can be constructed.
			// TODO: Also preserve the field's ID.
			if (el.firstChild.getAttribute)
    				var maxValue = el.firstChild.getAttribute('maxval');
			if (!maxValue)
				var maxValue = 2;

			// Prune out the falback version.
			while(el.hasChildNodes()){
				el.removeChild(el.firstChild);
			}
			
			// TODO: Add the onmouseover, onmouseout, and onclick hooks.
			// 	 If this is an on-click submission, each star should trigger submit with a different value.
			for (i = 1; i <= maxValue; i++) {
				star = document.createElement('img');
				//TODO: This needs to somehow get the path from Pylons.
				star.setAttribute("src", "/images/nostar.png");
				star.position = i;

				//TODO: Define these once and use "this" to save memory.
				star.onmouseover = function() { /* TODO: Set gold star on all position <= i */ };
				star.onmouseout  = function() { /* TODO: Return to saved values. */ };
				star.onclick     = function() { /* TODO: Update saved values. */ };

				el.appendChild(star);
			}
			//TODO: If this isn't an on-click submission, add a hidden form field to store the value.
		} else {
			// Hook in the "halfway fallback" input restrictions for the fallback widget.
			// TODO: Make sure this works correctly.
			el.firstChild.onblur     = extractNumber(this,0,false);
			el.firstChild.onkeyup    = extractNumber(this,0,false);
			el.firstChild.onkeypress = function() { return blockNonNumbers(this, event, false, false); };
		}
	}
};

Behaviour.register(jsrules);