/*!
* labelauty jquery plugin
*
* @file: jquery-labelauty.js
* @author: francisco neves (@fntneves)
* @site: www.francisconeves.com
* @license: mit license
*/
(function( $ ){
$.fn.labelauty = function( options )
{
/*
* our default settings
* hope you don't need to change anything, with these settings
*/
var settings = $.extend(
{
// development mode
// this will activate console debug messages
development: false,
// trigger class
// this class will be used to apply styles
class: "labelauty",
// use text label ?
// if false, then only an icon represents the input
label: true,
// separator between labels' messages
// if you use this separator for anything, choose a new one
separator: "|",
// default checked message
// this message will be visible when input is checked
checked_label: "checked",
// default unchecked message
// this message will be visible when input is unchecked
unchecked_label: "unchecked",
// minimum label width
// this value will be used to apply a minimum width to the text labels
minimum_width: false,
// use the greatest width between two text labels ?
// if this has a true value, then label width will be the greatest between labels
same_width: true
}, options);
/*
* let's create the core function
* it will try to cover all settings and mistakes of using
*/
return this.each(function()
{
var $object = $( this );
var use_labels = true;
var labels;
var labels_object;
var input_id;
// test if object is a check input
// don't mess me up, come on
if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )
return this;
// add "labelauty" class to all checkboxes
// so you can apply some custom styles
$object.addclass( settings.class );
// get the value of "data-labelauty" attribute
// then, we have the labels for each case (or not, as we will see)
labels = $object.attr( "data-labelauty" );
use_labels = settings.label;
// it's time to check if it's going to the right way
// null values, more labels than expected or no labels will be handled here
if( use_labels === true )
{
if( labels == null || labels.length === 0 )
{
// if attribute has no label and we want to use, then use the default labels
labels_object = new array();
labels_object[0] = settings.unchecked_label;
labels_object[1] = settings.checked_label;
}
else
{
// ok, ok, it's time to split checked and unchecked labels
// we split, by the "settings.separator" option
labels_object = labels.split( settings.separator );
// now, let's check if exist _only_ two labels
// if there's more than two, then we do not use labels :(
// else, do some additional tests
if( labels_object.length > 2 )
{
use_labels = false;
debug( settings.development, "there's more than two labels. labelauty will not use labels." );
}
else
{
// if there's just one label (no split by "settings.separator"), it will be used for both cases
// here, we have the possibility of use the same label for both cases
if( labels_object.length === 1 )
debug( settings.development, "there's just one label. labelauty will use this one for both cases." );
}
}
}
/*
* let's begin the beauty
*/
// start hiding ugly checkboxes
// obviously, we don't need native checkboxes :o
$object.css({ display : "none" });
// we don't need more data-labelauty attributes!
// ok, ok, it's just for beauty improvement
$object.removeattr( "data-labelauty" );
// now, grab checkbox id attribute for "label" tag use
// if there's no id attribute, then generate a new one
input_id = $object.attr( "id" );
if( input_id == null )
{
var input_id_number = 1 + math.floor( math.random() * 1024000 );
input_id = "labelauty-" + input_id_number;
// is there any element with this random id ?
// if exists, then increment until get an unused id
while( $( input_id ).length !== 0 )
{
input_id_number++;
input_id = "labelauty-" + input_id_number;
debug( settings.development, "holy crap, between 1024 thousand numbers, one raised a conflict. trying again." );
}
$object.attr( "id", input_id );
}
// now, add necessary tags to make this work
// here, we're going to test some control variables and act properly
$object.after( create( input_id, labels_object, use_labels ) );
// now, add "min-width" to label
// let's say the truth, a fixed width is more beautiful than a variable width
if( settings.minimum_width !== false )
$object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });
// now, add "min-width" to label
// let's say the truth, a fixed width is more beautiful than a variable width
if( settings.same_width != false && settings.label == true )
{
var label_object = $object.next( "label[for=" + input_id + "]" );
var unchecked_width = getrealwidth(label_object.find( "span.labelauty-unchecked" ));
var checked_width = getrealwidth(label_object.find( "span.labelauty-checked" ));
if( unchecked_width > checked_width )
label_object.find( "span.labelauty-checked" ).width( unchecked_width );
else
label_object.find( "span.labelauty-unchecked" ).width( checked_width );
}
});
};
/*
* tricky code to work with hidden elements, like tabs.
* note: this code is based on jquery.actual plugin.
* https://github.com/dreamerslab/jquery.actual
*/
function getrealwidth( element )
{
var width = 0;
var $target = element;
var style = 'position: absolute !important; top: -1000 !important; ';
$target = $target.clone().attr('style', style).appendto('body');
width = $target.width(true);
$target.remove();
return width;
}
function debug( debug, message )
{
if( debug && window.console && window.console.log )
window.console.log( "jquery-labelauty: " + message );
};
function create( input_id, messages_object, label )
{
var block;
var unchecked_message;
var checked_message;
if( messages_object == null )
unchecked_message = checked_message = "";
else
{
unchecked_message = messages_object[0];
// if checked message is null, then put the same text of unchecked message
if( messages_object[1] == null )
checked_message = unchecked_message;
else
checked_message = messages_object[1];
}
if( label == true )
{
block = '';
}
else
{
block = '';
}
return block;
};
}( jquery ));