/*
Uniform v1.7.3
Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC
http://pixelmatrixdesign.com
Requires jQuery 1.4 or newer
Much thanks to Thomas Reynolds and Buck Wilson for their help and advice on this
Disabling text selection is made possible by Mathias Bynens
and his noSelect plugin.
Also, thanks to David Kaneda and Eugene Bond for their contributions to the plugin
License:
MIT License - http://www.opensource.org/licenses/mit-license.php
Enjoy!
*/
(function($) {
$.uniform = {
options: {
selectClass: 'selector',
select2Class: 'selector2', /* Second style for small date select boxes*/
select3Class: 'selector3', /* Third style for small date select boxes*/
radioClass: 'radio',
checkboxClass: 'checker',
fileClass: 'uploader',
filenameClass: 'filename',
fileBtnClass: 'action',
fileDefaultText: 'No file selected',
fileBtnText: 'Choose File',
checkedClass: 'checked',
focusClass: 'focus',
disabledClass: 'disabled',
buttonClass: 'button',
activeClass: 'active',
hoverClass: 'hover',
useID: true,
idPrefix: 'uniform',
resetSelector: false
},
elements: []
};
if($.browser.msie && $.browser.version < 7){
$.support.selectOpacity = false;
}else{
$.support.selectOpacity = true;
}
$.fn.uniform = function(options) {
options = $.extend($.uniform.options, options);
var el = this;
//code for specifying a reset button
if(options.resetSelector != false){
$(options.resetSelector).mouseup(function(){
function resetThis(){
$.uniform.update(el);
}
setTimeout(resetThis, 10);
});
}
function doInput(elem){
$el = $(elem);
$el.addClass($el.attr("type"));
storeElement(elem);
}
function doTextarea(elem){
$(elem).addClass("uniform");
storeElement(elem);
}
function doButton(elem){
$el = elem;
var divTag = $(""),
spanTag = $("
");
divTag.addClass(options.buttonClass);
if(options.useID && $el.attr("id") != "") divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
var btnText;
if($el.is("a")){
btnText = $el.text();
}else if($el.is("button")){
btnText = $el.text();
}else if($el.is(":submit") || $el.is("input[type=button]")){
btnText = $el.attr("value");
}
if(btnText == "") btnText = "Submit";
spanTag.html(btnText);
$el.hide();
$el.wrap(divTag);
$el.wrap(spanTag);
//redefine variables
divTag = $el.closest("div");
spanTag = $el.closest("span");
if($el.is(":disabled")) divTag.addClass(options.disabledClass);
divTag.bind({
"mouseenter.uniform": function(){
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function(){
divTag.removeClass(options.hoverClass);
},
"mousedown.uniform touchbegin.uniform": function(){
divTag.addClass(options.activeClass);
},
"mouseup.uniform touchend.uniform": function(){
divTag.removeClass(options.activeClass);
},
"click.uniform touchend.uniform": function(e){
if($(e.target).is("span") || $(e.target).is("div")){
if(elem[0].dispatchEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent( 'click', true, true );
elem[0].dispatchEvent(ev);
}else{
elem[0].click();
}
}
}
});
elem.bind({
"focus.uniform": function(){
divTag.addClass(options.focusClass);
},
"blur.uniform": function(){
divTag.removeClass(options.focusClass);
}
});
$.uniform.noSelect(divTag);
storeElement(elem);
}
function doSelect(elem){
var divTag = $(''),
spanTag = $('');
divTag.addClass(options.selectClass);
if(options.useID && elem.attr("id") != ""){
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
}
var selected = elem.find(":selected:first");
if(selected.length == 0){
selected = elem.find("option:first");
}
spanTag.html(selected.text());
elem.css('opacity', 0);
elem.wrap(divTag);
elem.before(spanTag);
//redefine variables
divTag = elem.parent("div");
spanTag = elem.siblings("span");
elem.bind({
"change.uniform": function() {
spanTag.text(elem.find(":selected").text());
divTag.removeClass(options.activeClass);
},
"focus.uniform": function() {
divTag.addClass(options.focusClass);
},
"blur.uniform": function() {
divTag.removeClass(options.focusClass);
divTag.removeClass(options.activeClass);
},
"mousedown.uniform touchbegin.uniform": function() {
divTag.addClass(options.activeClass);
},
"mouseup.uniform touchend.uniform": function() {
divTag.removeClass(options.activeClass);
},
"click.uniform touchend.uniform": function(){
divTag.removeClass(options.activeClass);
},
"mouseenter.uniform": function() {
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function() {
divTag.removeClass(options.hoverClass);
},
"keyup.uniform": function(){
spanTag.text(elem.find(":selected").text());
}
});
//handle disabled state
if($(elem).attr("disabled")){
//box is checked by default, check our box
divTag.addClass(options.disabledClass);
}
$.uniform.noSelect(spanTag);
storeElement(elem);
}
/* Second style for small date select boxes*/
function doSelect2(elem){
var divTag = $(''),
spanTag = $('');
divTag.addClass(options.select2Class);
if(options.useID && elem.attr("id") != ""){
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
}
var selected = elem.find(":selected:first");
if(selected.length == 0){
selected = elem.find("option:first");
}
spanTag.html(selected.text());
elem.css('opacity', 0);
elem.wrap(divTag);
elem.before(spanTag);
//redefine variables
divTag = elem.parent("div");
spanTag = elem.siblings("span");
elem.bind({
"change.uniform": function() {
spanTag.text(elem.find(":selected").text());
divTag.removeClass(options.activeClass);
},
"focus.uniform": function() {
divTag.addClass(options.focusClass);
},
"blur.uniform": function() {
divTag.removeClass(options.focusClass);
divTag.removeClass(options.activeClass);
},
"mousedown.uniform touchbegin.uniform": function() {
divTag.addClass(options.activeClass);
},
"mouseup.uniform touchend.uniform": function() {
divTag.removeClass(options.activeClass);
},
"click.uniform touchend.uniform": function(){
divTag.removeClass(options.activeClass);
},
"mouseenter.uniform": function() {
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function() {
divTag.removeClass(options.hoverClass);
},
"keyup.uniform": function(){
spanTag.text(elem.find(":selected").text());
}
});
//handle disabled state
if($(elem).attr("disabled")){
//box is checked by default, check our box
divTag.addClass(options.disabledClass);
}
$.uniform.noSelect(spanTag);
storeElement(elem);
}
/* Second style for small date select boxes*/
function doSelect3(elem){
var divTag = $(''),
spanTag = $('');
divTag.addClass(options.select3Class);
if(options.useID && elem.attr("id") != ""){
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
}
var selected = elem.find(":selected:first");
if(selected.length == 0){
selected = elem.find("option:first");
}
spanTag.html(selected.text());
elem.css('opacity', 0);
elem.wrap(divTag);
elem.before(spanTag);
//redefine variables
divTag = elem.parent("div");
spanTag = elem.siblings("span");
elem.bind({
"change.uniform": function() {
spanTag.text(elem.find(":selected").text());
divTag.removeClass(options.activeClass);
},
"focus.uniform": function() {
divTag.addClass(options.focusClass);
},
"blur.uniform": function() {
divTag.removeClass(options.focusClass);
divTag.removeClass(options.activeClass);
},
"mousedown.uniform touchbegin.uniform": function() {
divTag.addClass(options.activeClass);
},
"mouseup.uniform touchend.uniform": function() {
divTag.removeClass(options.activeClass);
},
"click.uniform touchend.uniform": function(){
divTag.removeClass(options.activeClass);
},
"mouseenter.uniform": function() {
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function() {
divTag.removeClass(options.hoverClass);
},
"keyup.uniform": function(){
spanTag.text(elem.find(":selected").text());
}
});
//handle disabled state
if($(elem).attr("disabled")){
//box is checked by default, check our box
divTag.addClass(options.disabledClass);
}
$.uniform.noSelect(spanTag);
storeElement(elem);
}
function doCheckbox(elem){
var divTag = $(''),
spanTag = $('');
divTag.addClass(options.checkboxClass);
//assign the id of the element
if(options.useID && elem.attr("id") != ""){
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
}
//wrap with the proper elements
$(elem).wrap(divTag);
$(elem).wrap(spanTag);
//redefine variables
spanTag = elem.parent();
divTag = spanTag.parent();
//hide normal input and add focus classes
$(elem)
.css("opacity", 0)
.bind({
"focus.uniform": function(){
divTag.addClass(options.focusClass);
},
"blur.uniform": function(){
divTag.removeClass(options.focusClass);
},
"click.uniform touchend.uniform": function(){
if(!$(elem).attr("checked")){
//box was just unchecked, uncheck span
spanTag.removeClass(options.checkedClass);
}else{
//box was just checked, check span.
spanTag.addClass(options.checkedClass);
}
},
"mousedown.uniform touchbegin.uniform": function() {
divTag.addClass(options.activeClass);
},
"mouseup.uniform touchend.uniform": function() {
divTag.removeClass(options.activeClass);
},
"mouseenter.uniform": function() {
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function() {
divTag.removeClass(options.hoverClass);
}
});
//handle defaults
if($(elem).attr("checked")){
//box is checked by default, check our box
spanTag.addClass(options.checkedClass);
}
//handle disabled state
if($(elem).attr("disabled")){
//box is checked by default, check our box
divTag.addClass(options.disabledClass);
}
storeElement(elem);
}
function doRadio(elem){
var divTag = $(''),
spanTag = $('');
divTag.addClass(options.radioClass);
if(options.useID && elem.attr("id") != ""){
divTag.attr("id", options.idPrefix+"-"+elem.attr("id"));
}
//wrap with the proper elements
$(elem).wrap(divTag);
$(elem).wrap(spanTag);
//redefine variables
spanTag = elem.parent();
divTag = spanTag.parent();
//hide normal input and add focus classes
$(elem)
.css("opacity", 0)
.bind({
"focus.uniform": function(){
divTag.addClass(options.focusClass);
},
"blur.uniform": function(){
divTag.removeClass(options.focusClass);
},
"click.uniform touchend.uniform": function(){
if(!$(elem).attr("checked")){
//box was just unchecked, uncheck span
spanTag.removeClass(options.checkedClass);
}else{
//box was just checked, check span
$("."+options.radioClass + " span."+options.checkedClass + ":has([name='" + $(elem).attr('name') + "'])").removeClass(options.checkedClass);
spanTag.addClass(options.checkedClass);
}
},
"mousedown.uniform touchend.uniform": function() {
if(!$(elem).is(":disabled")){
divTag.addClass(options.activeClass);
}
},
"mouseup.uniform touchbegin.uniform": function() {
divTag.removeClass(options.activeClass);
},
"mouseenter.uniform touchend.uniform": function() {
divTag.addClass(options.hoverClass);
},
"mouseleave.uniform": function() {
divTag.removeClass(options.hoverClass);
}
});
//handle defaults
if($(elem).attr("checked")){
//box is checked by default, check span
spanTag.addClass(options.checkedClass);
}
//handle disabled state
if($(elem).attr("disabled")){
//box is checked by default, check our box
divTag.addClass(options.disabledClass);
}
storeElement(elem);
}
function storeElement(elem){
//store this element in our global array
elem = $(elem).get();
if(elem.length > 1){
$.each(elem, function(i, val){
$.uniform.elements.push(val);
});
}else{
$.uniform.elements.push(elem);
}
}
//noSelect v1.0
$.uniform.noSelect = function(elem) {
function f() {
return false;
};
$(elem).each(function() {
this.onselectstart = this.ondragstart = f; // Webkit & IE
$(this)
.mousedown(f) // Webkit & Opera
.css({ MozUserSelect: 'none' }); // Firefox
});
};
$.uniform.update = function(elem){
if(elem == undefined){
elem = $($.uniform.elements);
}
//sanitize input
elem = $(elem);
elem.each(function(){
//do to each item in the selector
//function to reset all classes
var $e = $(this);
if($e.is("select")){
//element is a select
var spanTag = $e.siblings("span");
var divTag = $e.parent("div");
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
//reset current selected text
spanTag.html($e.find(":selected").text());
if($e.is(":disabled")){
divTag.addClass(options.disabledClass);
}else{
divTag.removeClass(options.disabledClass);
}
}else if($e.is(":checkbox")){
//element is a checkbox
var spanTag = $e.closest("span");
var divTag = $e.closest("div");
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
spanTag.removeClass(options.checkedClass);
if($e.is(":checked")){
spanTag.addClass(options.checkedClass);
}
if($e.is(":disabled")){
divTag.addClass(options.disabledClass);
}else{
divTag.removeClass(options.disabledClass);
}
}else if($e.is(":radio")){
//element is a radio
var spanTag = $e.closest("span");
var divTag = $e.closest("div");
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
spanTag.removeClass(options.checkedClass);
if($e.is(":checked")){
spanTag.addClass(options.checkedClass);
}
if($e.is(":disabled")){
divTag.addClass(options.disabledClass);
}else{
divTag.removeClass(options.disabledClass);
}
}else if($e.is(":file")){
var divTag = $e.parent("div");
var filenameTag = $e.siblings(options.filenameClass);
btnTag = $e.siblings(options.fileBtnClass);
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
filenameTag.text($e.val());
if($e.is(":disabled")){
divTag.addClass(options.disabledClass);
}else{
divTag.removeClass(options.disabledClass);
}
}else if($e.is(":submit") || $e.is("button") || $e.is("a") || elem.is("input[type=button]")){
var divTag = $e.closest("div");
divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass);
if($e.is(":disabled")){
divTag.addClass(options.disabledClass);
}else{
divTag.removeClass(options.disabledClass);
}
}
});
};
return this.each(function() {
if($.support.selectOpacity){
var elem = $(this);
if(elem.is("select")){
//element is a select
if(elem.attr("multiple") != true){
//element is not a multi-select
if(elem.attr("size") == undefined || elem.attr("size") <= 1){
if (elem.attr("class")== "selectDate") {
doSelect2(elem);
}else if (elem.attr("class")== "selectDateMonth") {
doSelect3(elem);
}else {
doSelect(elem);
}
}
}
}else if(elem.is(":checkbox")){
//element is a checkbox
doCheckbox(elem);
}else if(elem.is(":radio")){
//element is a radio
doRadio(elem);
}else if(elem.is(":text, :password, input[type='email']")){
doInput(elem);
}else if(elem.is("textarea")){
doTextarea(elem);
}else if(elem.is("a") || elem.is(":submit") || elem.is("button") || elem.is("input[type=button]")){
doButton(elem);
}
}
});
};
})(jQuery);