/* * FancyForm 0.95 * By Vacuous Virtuoso, lipidity.com * --- * Checkbox and radio input replacement script. * Toggles defined class when input is selected. */ var FancyForm = { start: function(elements, options){ if(FancyForm.initing != undefined) return; if($type(elements)!='array') elements = $$('input'); if(!options) options = []; FancyForm.onclasses = ($type(options['onClasses']) == 'object') ? options['onClasses'] : { checkbox: 'checked', radio: 'selected' } FancyForm.offclasses = ($type(options['offClasses']) == 'object') ? options['offClasses'] : { checkbox: 'unchecked', radio: 'unselected' } if($type(options['extraClasses']) == 'object'){ FancyForm.extra = options['extraClasses']; } else if(options['extraClasses']){ FancyForm.extra = { checkbox: 'f_checkbox', radio: 'f_radio', on: 'f_on', off: 'f_off', all: 'fancy' } } else { FancyForm.extra = {}; } FancyForm.onSelect = $pick(options['onSelect'], function(el){}); FancyForm.onDeselect = $pick(options['onDeselect'], function(el){}); FancyForm.chks = []; FancyForm.add(elements); $each($$('form'), function(x) { x.addEvent('reset', function(a) { window.setTimeout(function(){FancyForm.chks.each(function(x){FancyForm.update(x);x.inputElement.blur()})}, 200); }); }); }, add: function(elements){ if($type(elements) == 'element') elements = [elements]; FancyForm.initing = 1; var keeps = []; var newChks = elements.filter(function(chk){ if($type(chk) != 'element' || chk.inputElement || (chk.get('tag') == 'input' && chk.getParent().inputElement)) return false; if(chk.get('tag') == 'input' && (FancyForm.onclasses[chk.getProperty('type')])){ var el = chk.getParent(); if(el.getElement('input')==chk){ el.type = chk.getProperty('type'); el.inputElement = chk; this.push(el); } else { chk.addEvent('click',function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); } } else if((chk.inputElement = chk.getElement('input')) && (FancyForm.onclasses[(chk.type = chk.inputElement.getProperty('type'))])){ return true; } return false; }.bind(keeps)); newChks = newChks.combine(keeps); newChks.each(function(chk){ var c = chk.inputElement; c.setStyle('position', 'absolute'); c.setStyle('left', '-9999px'); chk.addEvent('selectStart', function(f){f.stop()}); chk.name = c.getProperty('name'); FancyForm.update(chk); }); newChks.each(function(chk){ var c = chk.inputElement; chk.addEvent('click', function(f){ f.stop(); f.type = 'prop'; c.fireEvent('click', f, 1); }); chk.addEvent('mousedown', function(f){ if($type(c.onmousedown) == 'function') c.onmousedown(); f.preventDefault(); }); chk.addEvent('mouseup', function(f){ if($type(c.onmouseup) == 'function') c.onmouseup(); }); c.addEvent('focus', function(f){ if(FancyForm.focus) chk.setStyle('outline', '1px dotted'); }); c.addEvent('blur', function(f){ chk.setStyle('outline', 0); }); c.addEvent('click', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); if(c.getProperty('disabled')) // c.getStyle('position') != 'absolute' return; if (!chk.hasClass(FancyForm.onclasses[chk.type])) c.setProperty('checked', 'checked'); else if(chk.type != 'radio') c.setProperty('checked', false); if(f.type == 'prop') FancyForm.focus = 0; FancyForm.update(chk); FancyForm.focus = 1; if(f.type == 'prop' && !FancyForm.initing && $type(c.onclick) == 'function') c.onclick(); }); c.addEvent('mouseup', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); c.addEvent('mousedown', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); if(extraclass = FancyForm.extra[chk.type]) chk.addClass(extraclass); if(extraclass = FancyForm.extra['all']) chk.addClass(extraclass); }); FancyForm.chks.combine(newChks); FancyForm.initing = 0; }, update: function(chk){ if(chk.inputElement.getProperty('checked')) { chk.removeClass(FancyForm.offclasses[chk.type]); chk.addClass(FancyForm.onclasses[chk.type]); if (chk.type == 'radio'){ FancyForm.chks.each(function(other){ if (other.name == chk.name && other != chk) { other.inputElement.setProperty('checked', false); FancyForm.update(other); } }); } if(extraclass = FancyForm.extra['on']) chk.addClass(extraclass); if(extraclass = FancyForm.extra['off']) chk.removeClass(extraclass); if(!FancyForm.initing) FancyForm.onSelect(chk); } else { chk.removeClass(FancyForm.onclasses[chk.type]); chk.addClass(FancyForm.offclasses[chk.type]); if(extraclass = FancyForm.extra['off']) chk.addClass(extraclass); if(extraclass = FancyForm.extra['on']) chk.removeClass(extraclass); if(!FancyForm.initing) FancyForm.onDeselect(chk); } if(!FancyForm.initing) chk.inputElement.focus(); }, all: function(){ FancyForm.chks.each(function(chk){ chk.inputElement.setProperty('checked', 'checked'); FancyForm.update(chk); }); }, none: function(){ FancyForm.chks.each(function(chk){ chk.inputElement.setProperty('checked', false); FancyForm.update(chk); }); } }; window.addEvent('domready', function(){ FancyForm.start(); });