Skip to content

Instantly share code, notes, and snippets.

Created December 10, 2009 16:57
Show Gist options
  • Save Auz/253472 to your computer and use it in GitHub Desktop.
Save Auz/253472 to your computer and use it in GitHub Desktop.
var PrettyForms = new Class({
Implements: [Options, Events],
options: {
parentId: 'articlepoll', //only look within this element
initClass: 'fancyform', //check for this class on input elements (radio only so far)
listenClass: 'pollrow', //the class on the element on which to attach the click event (ie, the row, or label)
//the following are for making the UE prettier: classes or colors to add/fade to when events happen (* note, the colors here could be replaced morphing from one class to another, but I assumed that is slow- though might not be *)
listenHoverClass: 'rowhover', // class to add to the listen element on hover
listenCheckedClass: 'rowchecked', // class to add to the listen element when radio is checked.
listenColor: '#ffffff', // I use background fading on the row, and this needs a start color. I think there was a problem with dynamically getting this color with IE.
listenHoverCheckedColor: '#E8FFFB', // color to fade to when hovering over the listen element, and its checked
listenHoverColor: '#F0F9FF', // color to fade to when hovering over the listen element
listenCheckedColor: '#F6FFFC', // mouse out fade color of the listen element, when checked
fxDuration: 400, //fx duration
radioClass: 'fancyradio', // class to add to the replaced radio element
hoverClass: 'radiohover', // class to add to the replaced radio element when hovering
checkedClass: 'radiochecked', // class to add to the replaced radio element when checked.
pointerClass: 'cursor-pointer' // class which changes the cursor to a pointer (finger)
initialize: function(options) {
this.elements = $(this.options.parentId).getElements('input.'+this.options.initClass);
this.states = []; //array which stores the current state of the input (though could also be gotten from the input itself)
this.newElements = []; //array which holds the new inputs (fake inputs)
this.listenEls = []; //array which holds the listen elements, which trigger the inputs
this.hfx = []; //array of fx's on the listen element
this.disabled = false; //bool for disabling the form.
if(this.elements) {
this.elements.each(function(el, ind) {
if(el.get('type') == 'radio') {
this.replaceRadio(el, ind);
}, this);
replaceRadio: function(el, ind) {
this.states[ind] = false;
this.newElements[ind] = new Element('div', {'class':this.options.radioClass});
if(el.get('checked')) {
this.states[ind] = true;
this.listenEls[ind] = el.getParent('.'+this.options.listenClass);
this.hfx[ind] = new Fx.Tween(this.listenEls[ind], {duration: this.options.fxDuration, link: 'cancel'});
if(!this.listenEls[ind]) this.listenEls[ind] = el;
'mouseenter': function(e) {
this.hfx[ind].start('background-color', (this.states[ind])?this.options.listenHoverCheckedColor:this.options.listenHoverColor);
'mouseleave': function(e) {
this.hfx[ind].start('background-color', (this.states[ind])?this.options.listenCheckedColor:this.options.listenColor);
'click' : function(e) {
if(!this.disabled) {
if(!this.states[ind]) {
//it wasnt selected:
//remove all other selected radios:
this.states.each(function(state, i) {
if(i != ind) {
if(state) {
//an different selected element, deselect:
this.hfx[i].start('background-color', this.options.listenColor);
}, this);
//now check this one:
} else {
//its already selected:
this.newElements[ind].inject(this.elements[ind].getParent(), 'top');
this.elements[ind].setStyle('display', 'none');
checkElement: function(i) {
this.states[i] = true;
this.elements[i].set('checked', true);
unCheckElement: function(i) {
this.states[i] = false;
this.elements[i].set('checked', false);
disabledMode: function() {
//disable the radios from working (though doesnt add any disabled class, should add that)
//this.states = [];
this.disabled = true;
this.listenEls.each(function(el) { el.removeClass(this.options.pointerClass); });
enabledMode: function() {
this.disabled = false;
this.listenEls.each(function(el) { el.addClass(this.options.pointerClass); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment