Login   Register  
PHP Classes
elePHPant
Icontem

File: ui-plugins/ptc-forms-ui.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Carlo Pietrobattista  >  PHP Forms Generator and Validation  >  ui-plugins/ptc-forms-ui.js  >  Download  
File: ui-plugins/ptc-forms-ui.js
Role: Auxiliary data
Content type: text/plain
Description: Plugin to add jquery-ui styles to form fields
Class: PHP Forms Generator and Validation
Generate and validate HTML forms dynamically
Author: By
Last change: Jquery-ui plugin to style form fields with ui css
Date: 11 months ago
Size: 20,700 bytes
 

Contents

Class file image Download
/*!
* UI-FORM PLUGIN TO CREATE JQUERY-UI FORM FIELDS 
* Version: 0.1
* Jquery Version: 1.8
* Copyright (c) 2013 Irony
* Licensed under the MIT license.
* http://phptoolcase.com/
*
* usage: $("form").form(); // see options paramater for options
* for a select with scroll, add a height to the ul tag like this: #parent-element-id ul{height:200px;}
*
* Todo: 
*     	- add fields array to be able to control field options individually
*	- add fields that should be excluded
*
*	- selector:
*		- fix position var between arrows and a-z-1-9 keys
*		- fix overflow height by getting individual li height
*
*/
(function($) 
{
	$.widget("ui.form",
	{
		options:
		{
			roundCorners:true						// Adds round corners to the fields
			,widget:true							// Adds widget style controls to the fields
			,fontWeight:"normal"					// Sets fonts weight for the input fields, set to false to ignore this option
			,textPadding:"3px"						// Padding for text inside input fields, set to false to ignore this option
			,borders:"1px ridge"					// Adds borders to all input elements, set to false to ignore this option
			,margin:"0px"							// Margins for text fields, set to false to ignore this option
			,boxSizing:true							// Real box sizes standard for html doctype declaration
			,selectIcon:"ui-icon ui-icon-triangle-1-s"		// The icon image for the selector
			//,exclude:[]							// Fields to be excluded (by Id)
			//,fields:[]								// Control the previous options by fieldName
		},
		_create:function()
		{
			var browserVars=this._browserConfig();
			if(!browserVars){return;}
			var	object=this,
				options=object.options,
				form=object.element,
				inputs=form.find("input,select,textarea");
			if(options.widget)
			{
				form.addClass("ui-widget");
				form.find("fieldset").addClass("ui-widget ui-widget-content");
				form.find("fieldset").find("table").addClass("ui-widget-content").css({"background":"transparent","border":"none"});
				form.find("legend").addClass("ui-widget-header").css({"width":"98%","padding":"5px 0 5px 5px"});
			}
			if(options.roundCorners)
			{
				form.find("fieldset").addClass("ui-corner-all");
				form.find("legend").addClass("ui-corner-all");
			}
			$.each(inputs,function()
			{
				var input=$(this);
				if(options.fontWeight && !input.is(":reset, :submit")){input.css("font-weight",options.fontWeight);}
				if(options.textPadding && !input.is(":reset, :submit")){input.css("padding",options.textPadding);}
				if(options.margin){input.css("margin",options.margin);}
				if(options.boxSizing){input.css(browserVars['border-box'],"border-box");}
				/* Add an id to the input if not present */
				if(!input.attr('id')){input.attr('id','gen-'+Math.floor(Math.random()*99999));}
				if(options.widget)
				{
					input.addClass('ui-state-default');
					$("label[for="+input.attr("id")+"]").addClass("ui-helper-reset");
				}
				if(options.roundCorners){input.addClass('ui-corner-all');}
				//input.wrap("<label />");
				if(input.is(":reset, :submit")){input.wrap("<label />");object._buttons(this);}
				else if(input.is(":checkbox")){input.wrap("<label />");object._checkboxes(this);}
				else if(input.is(":radio")){input.wrap("<label />");object._radio(this);}
				else if(input.is("select")){input.wrap("<div />");object._selector(this);}
				else if(input.is("input[type='text']")||input.is("textarea")||
					input.is("input[type='password']")){input.wrap("<div />");object._textelements(this);}
				//if(input.hasClass("date")){input.wrap("<div />");input.datepicker();}
			});
			$(".hover").hover(function(){$(this).addClass("ui-state-hover");},function(){$(this).removeClass("ui-state-hover");});
			$(".hoverUl").hover(function(){$(this).addClass("ui-state-hover").css("margin","-1px");},
				function(){$(this).removeClass("ui-state-hover").css("margin","0px");});
			$(".hoverRadio").hover(
				function(){$(this).addClass("ui-state-hover").removeClass("ui-state-active");},
				function()
				{
					ra=$(this);
					if(ra.parent().find("input:radio").attr("checked")){ra.addClass("ui-state-active");}
					ra.removeClass("ui-state-hover");
				});
			$(".hoverCheck").hover(
				function(){$(this).addClass("ui-state-hover").removeClass("ui-state-active");},
				function()
				{
					ck=$(this);
					if(ck.parent().find("input:checkbox").attr("checked")){ck.addClass("ui-state-active");}
					ck.removeClass("ui-state-hover");
				});
		},
		_browserConfig:function()
		{
			var browser=$.browser
			var options=[];
			options['browser']=browser;
			if(browser.chrome)
			{
				options['border-box']="-webkit-box-sizing";
			}
			else if(browser.msi)
			{
				if(parseInt($.browser.version,10) == 6,7){return;} // no support for IE7, there are problems with ghe selector layout
				options['border-box']="-ms-box-sizing";
			}
			else if(browser.mozilla)
			{
				options['border-box']="-moz-box-sizing";
			}
			else
			{
				options['border-box']="box-sizing";
			}
			return this.browserVars=options;
		},
		_textelements:function(element)
		{
			if(this.options.widget)
			{
				var mainEl=$(element);
				mainEl.addClass('hover');
				if(this.options.borders){mainEl.css("border",this.options.borders);}
				mainEl.bind({focusin:function(){$(this).toggleClass('ui-state-focus');},
							focusout:function(){$(this).toggleClass('ui-state-focus');}});
			}
		},
		_buttons:function(element)
		{
			var	object=this,
				mainEl=$(element);
			if(mainEl.is(":submit"))
			{
				//mainEl.bind("click",function(event){event.preventDefault();});
				if(object.options.widget){mainEl.button().addClass('ui-priority-primary hover');}
			}
			else if(mainEl.is(":reset"))
			{
				if(object.options.widget)
				{
					mainEl.button().bind('mousedown mouseup',function()
					{
						mainEl.toggleClass('ui-state-active');
					}).addClass('ui-priority-primary hover');
				}
			}
		},
		_checkboxes:function(element)
		{
			var	object=this,
				mainEl=$(element);
			if(object.options.widget)
			{
				mainEl.parent("label").after("<span />");
				var parent=mainEl.parent("label").next();
				mainEl.addClass("ui-helper-hidden-accessible");
				parent.css({width:16,height:16,display:"block"});
				parent.wrap("<span class='ui-state-default ui-corner-all' style='display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:middle;'/>");
				parent.parent().addClass('hoverCheck');
				if(object.options.borders){parent.parent().css("border",object.options.borders);}
				parent.parent("span").click(function(event)
				{
					$(this).toggleClass("ui-state-active");
					parent.toggleClass("ui-icon ui-icon-check");
					mainEl.click();
					if($().validate){mainEl.valid();}
				}).bind
				({
					hover:function(){$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseenter');},
					mouseout:function(){$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseleave');}
				});
				if(mainEl.attr('checked'))
				{
					parent.parent("span").toggleClass("ui-state-active");
					parent.toggleClass("ui-icon ui-icon-check");
				};
				$("label[for="+mainEl.attr("id")+"]").bind
				({
					click:function(event)
					{
						parent.parent("span").click();
						if(mainEl.attr("checked"))
						{
							mainEl.attr("checked",true);
							parent.parent("span").addClass("ui-state-active").removeClass("ui-state-hover");
						}
						else
						{
							mainEl.attr("checked",false);
							parent.parent("span").addClass("ui-state-hover").removeClass("ui-state-active");
						}
						//mainEl.click();
						if($().validate){mainEl.valid();}
						event.preventDefault();
					},
					hover:function()
					{
						$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseenter');
						parent.parent("span").addClass("ui-state-hover").removeClass("ui-state-active");
					},
					mouseout:function()
					{
						$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseleave');
						if(mainEl.attr("checked")){parent.parent("span").addClass("ui-state-active");}
						parent.parent("span").removeClass("ui-state-hover");
					}
				});
			}
			mainEl.focus(function()
			{
				parent.parent("span").addClass("ui-state-hover").removeClass("ui-state-active");
			}).blur(function()
			{
				if(mainEl.attr("checked")){parent.parent("span").addClass("ui-state-active");}
				parent.parent("span").removeClass("ui-state-hover");
			}).keydown(function(event) 
			{
				if(event.keyCode=="32")
				{
					parent.toggleClass("ui-icon ui-icon-check");
					if(!mainEl.attr("checked")){parent.parent("span").addClass("ui-state-active");}
					else{parent.parent("span").removeClass("ui-state-active");}
				}
			});
		},
		_radio:function(element)
		{
			var	object=this,
				mainEl=$(element);
			if(object.options.widget)
			{
				mainEl.parent("label").after("<span />");
				var parent=$(element).parent("label").next();
				mainEl.addClass("ui-helper-hidden-accessible");
				parent.addClass("ui-icon ui-icon-radio-off");
				parent.wrap("<span class='ui-state-default ui-corner-all ui-form-"+mainEl.attr("name")+
						"' style='display:inline-block;width:16px;height:16px;margin-right:5px;vertical-align:middle;'/>");
				parent.parent().addClass('hoverRadio');
				if(object.options.borders){parent.parent().css("border",object.options.borders);}
				parent.parent("span").click(function(event)
				{
					$(".ui-form-"+mainEl.attr("name")).removeClass("ui-state-active");
					$(this).addClass("ui-state-active");
					parent.removeClass("ui-icon-radio-off").addClass("ui-icon-radio-on");
					mainEl.click();
					if($().validate){mainEl.valid();}
				}).bind
				({
					hover:function(){$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseenter');},
					mouseout:function(){$("input[name*='"+mainEl.attr('name')+"']").trigger('mouseleave');}
				});
				if(mainEl.attr('checked'))
				{
					$(".ui-form-"+mainEl.attr("name")).removeClass("ui-state-active");
					parent.parent("span").addClass("ui-state-active");
					parent.removeClass("ui-icon-radio-off").addClass("ui-icon-radio-on");
				}
				$('input[name='+mainEl.attr("name")+']').change(function()
				{
					$(".ui-form-"+mainEl.attr("name")).removeClass("ui-state-active ui-state-hover");
					$.each($("input[name='"+mainEl.attr("name")+"']"),function(i,j) 
					{
						el=$(j);
						if(!el.attr("checked")){el.parent().next("span").children("span").
							removeClass("ui-icon-radio-on ui-state-active").addClass("ui-icon-radio-off");}
						else{el.parent().next("span").addClass("ui-state-active").children("span").
										removeClass("ui-icon-radio-off").addClass("ui-icon-radio-on");} 
					});
					
				});
				$("label[for="+mainEl.attr("id")+"]").bind
				({
					click:function(event)
					{
						parent.parent("span").click();
						mainEl.click();
						if($().validate){mainEl.valid();}
						event.preventDefault();
					},
					hover:function(){parent.parent("span").addClass("ui-state-hover");},
					mouseout:function(){parent.parent("span").removeClass("ui-state-hover");}
				});
				mainEl.focus(function()
				{
					parent.parent("span").addClass("ui-state-hover").removeClass("ui-state-active");
					
				}).blur(function()
				{
					parent.parent("span").removeClass("ui-state-hover");
				});
			}
		},
		_selector:function(element)
		{
			var object=this;
			if(object.options.roundCorners){$(element).addClass('ui-corner-all');}
			if(object.options.widget)
			{
				var	mainEl=$(element),
					parent=mainEl.parent(),
					container=$(parent),
					elId=mainEl.attr('id'),
					tpl=$("#"+elId),
					wt=tpl.outerWidth(true),
					elName=mainEl.attr('name'),
					elClass=mainEl.attr('class');
				mainEl.addClass('ui-helper-hidden');
				object.inputTextTpl="<input type='text' class='"+elClass+" labeltext hover' readOnly='true' name='uiForm-"+elId+"' id='ui-form-"+elId+"'>";
				object.iconTpl="<span class='"+object.options.selectIcon+"'></span>";
				parent.append(object.inputTextTpl+object.iconTpl);
				container.wrap("<div style='position:relative;display:inline-block;' />");
				var	inputText=$("#ui-form-"+elId),
					ht=(tpl.outerHeight(true)+(parseInt(mainEl.css("margin-top")))),
					elHeight=0;
				inputText.css(
				{
					"cursor":"pointer"
					,"float":"left"
					,"padding":parseInt(mainEl.css("padding-top"))+"px "+parseInt(mainEl.css("padding-right"))+"px "+
									parseInt(mainEl.css("padding-bottom"))+"px "+parseInt(mainEl.css("padding-left"))+"px"
					,"margin":parseInt(mainEl.css("margin-top"))+"px "+parseInt(mainEl.css("margin-right"))+"px "+
									parseInt(mainEl.css("margin-bottom"))+"px "+parseInt(mainEl.css("margin-left"))+"px"
					,"width":(wt-(parseInt(mainEl.css("margin-left"))+parseInt(mainEl.css("margin-right"))))+"px"
				});
				if(object.options.borders){inputText.css("border",object.options.borders);}
				if(ht>15 && (ht-16)>1){elHeight=Math.floor((ht-16)/2);}
				if(object.options.fontWeight){inputText.css("font-weight",object.options.fontWeight);}
				if(object.options.boxSizing){inputText.css(object.browserVars["border-box"],"border-box");}
				container.find("span").attr('style','float:right;top:'+elHeight+'px;right:8px;position:absolute;cursor:pointer;');
				if($.browser.msie){parent.css({"display":"block",width:wt});}
				else{parent.css({"display":"inline-block",width:wt});}
				parent.css({"background":"transparent","border":"none"});
				parent.addClass("ui-state-default");
				parent.after("<ul class='ui-helper-reset ui-widget ui-widget-content ui-helper-hidden ui-corner-bottom ui-form-ul'></ul>");
				container.next("ul").css(
				{
					"overflow":"auto"
					,"overflow-x":"hidden"
					,"overflow-y":"auto"
					,"position":"absolute"
					,"top":tpl.innerHeight()+"px"
					,"z-index":"3000"
					,"width":((wt-2)-(parseInt(mainEl.css("margin-left"))+parseInt(mainEl.css("margin-right"))))+"px"
					,"margin-left":mainEl.css("margin-left")+"px"
					,"margin-right":mainEl.css("margin-right")+"px"
				});
				$.each(mainEl.find("option"),function(k,v)
				{
					var el=$(this);
					if(el.attr('selected'))
					{
						inputText.val(el.text());
						mainEl.val(el.attr('value'));
						if(!el.attr('value')){inputText.addClass("defaultValue").attr("default-value",el.text());}
					}
					if(el.attr('value') && el.text())
					{
						container.next("ul").append("<li class='hoverUl ui-corner-all' style='margin:0px;padding:2px;list-style-type:none;'>"+
							"<a href='javascript:void(0)' style='text-decoration:none;display:block;padding:2px .4em;line-height:1.5;zoom:1;font-weight:normal;'>"+el.text()+"</a></li>");
					}
				});
				container.next("ul").append("<div style='clear:both;height:1px'><!-- --></div>");
				container.next("ul").find("li").click(function(event)
				{
					var el=$(this);
					inputText.val(el.text());
					$.each(tpl.find("option"),function(k,v){$(v).removeAttr("selected");});
					tpl.find("option:contains('"+el.text()+"')").attr("selected","selected");
					if($().validate)
					{
						if(inputText.val()!=inputText.attr("default-value"))
						{
							mainEl.valid(); 
							inputText.valid();
						}
					}
					if(object.options.roundCorners){inputText.switchClass('ui-corner-top','ui-corner-all',10);}
					parent.next("ul").toggle(10);
					event.preventDefault();
				});
				container.find("span").click(function(event)
				{
					//inputText.focus();		// does does not seem to fire the blur() but the next line does
					document.getElementById("ui-form-"+elId).focus();
					event.preventDefault();
				});
				position=0;
				container.click(function(event)
				{
					var el=$(this);
					if(object.options.roundCorners)
					{
						if(el.next("ul").is(':visible')){inputText.switchClass('ui-corner-top','ui-corner-all',10);}
						else
						{
							inputText.switchClass('ui-corner-all','ui-corner-top',10);
							container.next("ul").find("li.ui-state-hover").removeClass("ui-state-hover");
						}
					}
					el.next("ul").toggle(10);
					event.preventDefault();
				}).keydown(function(event) 
				{
					var 	k=event.which || event.keyCode,
						charStr=String.fromCharCode(k);
						el=$(this);
					if(k=="32" || k=="13")
					{
						useElement=container.next("ul").find("li.ui-state-hover");
						inputText.val($(useElement).text());
						$.each(tpl.find("option"),function(k,v){$(v).removeAttr("selected");});
						tpl.find("option:contains('"+$(useElement).text()+"')").attr("selected", "selected");
						if(object.options.roundCorners)
						{
							if(el.next("ul").is(':visible')){inputText.switchClass('ui-corner-top','ui-corner-all',10);}
							else{inputText.switchClass('ui-corner-all','ui-corner-top',10);}
						}
						el.next("ul").toggle(10);
						event.preventDefault();
					}
					else if(k=="39" || k=="40")
					{
						if(!el.next("ul").is(':visible'))
						{
							if(object.options.roundCorners){inputText.switchClass('ui-corner-all','ui-corner-top',10);}
							el.next("ul").toggle(10);
						}
						if(!container.next("ul").find("li").hasClass("ui-state-hover"))
						{
							container.next("ul").children("li").first().addClass("ui-state-hover").css("margin","-1px");
						}
						else
						{
							rMe=container.next("ul").find("li.ui-state-hover");
							if(!$(rMe).is(':last-child') && $(rMe).next().is("li")) 
							{
								ulPosition=(el.next("ul").offset().top+el.next("ul").height());
								if(ulPosition<(rMe.offset().top+40))
								{
									position=(position+el.next("ul").height());
									el.next("ul").scrollTop(position);
								}
								$(rMe).next().addClass("ui-state-hover").css("margin","-1px");
								$(rMe).removeClass("ui-state-hover").css("margin","0px");
							}
						}
						event.preventDefault();
					}
					else if(k=='38' || k=='37') 
					{
						if(!el.next("ul").is(':visible'))
						{
							if(object.options.roundCorners){inputText.switchClass('ui-corner-all','ui-corner-top',10);}
							el.next("ul").toggle(10);
						}
						if(!container.next("ul").find("li").hasClass("ui-state-hover")){container.next("ul").children("li").first().addClass("ui-state-hover");}
						else
						{
							rMe=container.next("ul").find("li.ui-state-hover");
							if(!$(rMe).is(':first-child')) 
							{
								ulHeight=el.next("ul").height();
								ulPosition=(el.next("ul").offset().top+ulHeight);
								if(ulPosition>(rMe.offset().top+ulHeight)-20)
								{
									position=(position-ulHeight);
									el.next("ul").scrollTop(position);	
								}
								container.next("ul").find("li.ui-state-hover").prev().addClass("ui-state-hover").css("margin","-1px");
								$(rMe).removeClass("ui-state-hover").css("margin","0px");
							}
						}
						event.preventDefault();
					}
					else if(/[a-z0-9]/i.test(charStr))
					{
						container.next("ul").find("li").each(function(k,v)
						{
							opLi=$(v),
							ul=container.next("ul");
							if(opLi.find("a").text().substr(0,1)==charStr && !opLi.hasClass("ui-state-hover"))
							{
								ul.find("li.ui-state-hover").removeClass("ui-state-hover").css("margin","0px");
								opLi.addClass("ui-state-hover").css("margin","-1px");
								if(!ul.is(':visible'))
								{
									ul.toggle(10,function(){if(this.clientHeight<ul[0].scrollHeight)
									{
										v.scrollIntoView(true);
									}
									});
									if(object.options.roundCorners){inputText.switchClass('ui-corner-all','ui-corner-top',10);}
								}
								else if(ul[0].clientHeight<ul[0].scrollHeight){v.scrollIntoView(true);}
								return false;
							}
						});
					}
				});
				inputText.focus(function(event)
				{
					this.select();
					$(this).addClass('ui-state-focus');
					event.preventDefault();
				});
				mouseover=false;
				parent.next("ul").mouseenter(function(){mouseover=true;}).mouseleave(function(){mouseover=false;});
				inputText.blur(function(event)
				{
					if(mouseover){this.focus(); return; }
					var ul=parent.next("ul");
					$(this).removeClass('ui-state-focus ui-state-hover');
					if(!mouseover && ul.is(':visible')) 
					{
						if(object.options.roundCorners){inputText.switchClass('ui-corner-top','ui-corner-all',10);}
						ul.toggle(10);
					}
					event.preventDefault();
				});
			}
		}
	});
})(jQuery);