/*!

[0] Fix | Delete

* LABELAUTY jQuery Plugin

[1] Fix | Delete

*

[2] Fix | Delete

* @file: jquery-labelauty.js

[3] Fix | Delete

* @author: Francisco Neves (@fntneves)

[4] Fix | Delete

* @site: www.francisconeves.com

[5] Fix | Delete

* @license: MIT License

[6] Fix | Delete

*/

[7] Fix | Delete

[8] Fix | Delete

(function( $ ){

[9] Fix | Delete

[10] Fix | Delete

$.fn.labelauty = function( options )

[11] Fix | Delete

{

[12] Fix | Delete

/*

[13] Fix | Delete

* Our default settings

[14] Fix | Delete

* Hope you don't need to change anything, with these settings

[15] Fix | Delete

*/

[16] Fix | Delete

var settings = $.extend(

[17] Fix | Delete

{

[18] Fix | Delete

// Development Mode

[19] Fix | Delete

// This will activate console debug messages

[20] Fix | Delete

development: false,

[21] Fix | Delete

[22] Fix | Delete

// Trigger Class

[23] Fix | Delete

// This class will be used to apply styles

[24] Fix | Delete

class: "labelauty",

[25] Fix | Delete

[26] Fix | Delete

// Use text label ?

[27] Fix | Delete

// If false, then only an icon represents the input

[28] Fix | Delete

label: true,

[29] Fix | Delete

[30] Fix | Delete

// Separator between labels' messages

[31] Fix | Delete

// If you use this separator for anything, choose a new one

[32] Fix | Delete

separator: "|",

[33] Fix | Delete

[34] Fix | Delete

// Default Checked Message

[35] Fix | Delete

// This message will be visible when input is checked

[36] Fix | Delete

checked_label: "Checked",

[37] Fix | Delete

[38] Fix | Delete

// Default UnChecked Message

[39] Fix | Delete

// This message will be visible when input is unchecked

[40] Fix | Delete

unchecked_label: "Unchecked",

[41] Fix | Delete

[42] Fix | Delete

// Force random ID's

[43] Fix | Delete

// Replace original ID's with random ID's,

[44] Fix | Delete

force_random_id: false,

[45] Fix | Delete

[46] Fix | Delete

// Minimum Label Width

[47] Fix | Delete

// This value will be used to apply a minimum width to the text labels

[48] Fix | Delete

minimum_width: false,

[49] Fix | Delete

[50] Fix | Delete

// Use the greatest width between two text labels ?

[51] Fix | Delete

// If this has a true value, then label width will be the greatest between labels

[52] Fix | Delete

same_width: true

[53] Fix | Delete

}, options);

[54] Fix | Delete

[55] Fix | Delete

/*

[56] Fix | Delete

* Let's create the core function

[57] Fix | Delete

* It will try to cover all settings and mistakes of using

[58] Fix | Delete

*/

[59] Fix | Delete

return this.each(function()

[60] Fix | Delete

{

[61] Fix | Delete

var migrateDeduplicateWarnings = jQuery.migrateDeduplicateWarnings || false;

[62] Fix | Delete

if (settings.development) jQuery.migrateDeduplicateWarnings = false;

[63] Fix | Delete

[64] Fix | Delete

var $object = $( this );

[65] Fix | Delete

var selected = $object.is(':checked');

[66] Fix | Delete

var type = $object.attr('type');

[67] Fix | Delete

var use_labels = true;

[68] Fix | Delete

var labels;

[69] Fix | Delete

var labels_object;

[70] Fix | Delete

var input_id;

[71] Fix | Delete

[72] Fix | Delete

//Get the aria label from the input element

[73] Fix | Delete

var aria_label = $object.attr( "aria-label" );

[74] Fix | Delete

[75] Fix | Delete

// Hide the object form screen readers

[76] Fix | Delete

$object.attr( "aria-hidden", true );

[77] Fix | Delete

[78] Fix | Delete

// Test if object is a check input

[79] Fix | Delete

// Don't mess me up, come on

[80] Fix | Delete

if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )

[81] Fix | Delete

return this;

[82] Fix | Delete

[83] Fix | Delete

// Add "labelauty" class to all checkboxes

[84] Fix | Delete

// So you can apply some custom styles

[85] Fix | Delete

$object.addClass( settings.class );

[86] Fix | Delete

[87] Fix | Delete

// Get the value of "data-labelauty" attribute

[88] Fix | Delete

// Then, we have the labels for each case (or not, as we will see)

[89] Fix | Delete

labels = $object.attr( "data-labelauty" );

[90] Fix | Delete

[91] Fix | Delete

use_labels = settings.label;

[92] Fix | Delete

[93] Fix | Delete

// It's time to check if it's going to the right way

[94] Fix | Delete

// Null values, more labels than expected or no labels will be handled here

[95] Fix | Delete

if( use_labels === true )

[96] Fix | Delete

{

[97] Fix | Delete

if( labels == null || labels.length === 0 )

[98] Fix | Delete

{

[99] Fix | Delete

// If attribute has no label and we want to use, then use the default labels

[100] Fix | Delete

labels_object = new Array();

[101] Fix | Delete

labels_object[0] = settings.unchecked_label;

[102] Fix | Delete

labels_object[1] = settings.checked_label;

[103] Fix | Delete

}

[104] Fix | Delete

else

[105] Fix | Delete

{

[106] Fix | Delete

// Ok, ok, it's time to split Checked and Unchecked labels

[107] Fix | Delete

// We split, by the "settings.separator" option

[108] Fix | Delete

labels_object = labels.split( settings.separator );

[109] Fix | Delete

[110] Fix | Delete

// Now, let's check if exist _only_ two labels

[111] Fix | Delete

// If there's more than two, then we do not use labels :(

[112] Fix | Delete

// Else, do some additional tests

[113] Fix | Delete

if( labels_object.length > 2 )

[114] Fix | Delete

{

[115] Fix | Delete

use_labels = false;

[116] Fix | Delete

debug( settings.development, "There's more than two labels. LABELAUTY will not use labels." );

[117] Fix | Delete

}

[118] Fix | Delete

else

[119] Fix | Delete

{

[120] Fix | Delete

// If there's just one label (no split by "settings.separator"), it will be used for both cases

[121] Fix | Delete

// Here, we have the possibility of use the same label for both cases

[122] Fix | Delete

if( labels_object.length === 1 )

[123] Fix | Delete

debug( settings.development, "There's just one label. LABELAUTY will use this one for both cases." );

[124] Fix | Delete

}

[125] Fix | Delete

}

[126] Fix | Delete

}

[127] Fix | Delete

[128] Fix | Delete

/*

[129] Fix | Delete

* Let's begin the beauty

[130] Fix | Delete

*/

[131] Fix | Delete

[132] Fix | Delete

// Start hiding ugly checkboxes

[133] Fix | Delete

// Obviously, we don't need native checkboxes :O

[134] Fix | Delete

$object.css({ display : "none" });

[135] Fix | Delete

[136] Fix | Delete

// We don't need more data-labelauty attributes!

[137] Fix | Delete

// Ok, ok, it's just for beauty improvement

[138] Fix | Delete

$object.removeAttr( "data-labelauty" );

[139] Fix | Delete

[140] Fix | Delete

// Now, grab checkbox ID Attribute for "label" tag use

[141] Fix | Delete

// If there's no ID Attribute, then generate a new one

[142] Fix | Delete

input_id = $object.attr( "id" );

[143] Fix | Delete

[144] Fix | Delete

if( settings.force_random_id || input_id == null || input_id.trim() === "")

[145] Fix | Delete

{

[146] Fix | Delete

var input_id_number = 1 + Math.floor( Math.random() * 1024000 );

[147] Fix | Delete

input_id = "labelauty-" + input_id_number;

[148] Fix | Delete

[149] Fix | Delete

// Is there any element with this random ID ?

[150] Fix | Delete

// If exists, then increment until get an unused ID

[151] Fix | Delete

while( $( input_id ).length !== 0 )

[152] Fix | Delete

{

[153] Fix | Delete

input_id_number++;

[154] Fix | Delete

input_id = "labelauty-" + input_id_number;

[155] Fix | Delete

debug( settings.development, "Holy crap, between 1024 thousand numbers, one raised a conflict. Trying again." );

[156] Fix | Delete

}

[157] Fix | Delete

[158] Fix | Delete

$object.attr( "id", input_id );

[159] Fix | Delete

}

[160] Fix | Delete

[161] Fix | Delete

// Now, add necessary tags to make this work

[162] Fix | Delete

// Here, we're going to test some control variables and act properly

[163] Fix | Delete

[164] Fix | Delete

var element = jQuery(create( input_id, aria_label, selected, type, labels_object, use_labels ))

[165] Fix | Delete

[166] Fix | Delete

element.on('click', function(){

[167] Fix | Delete

if($object.is(':checked')){

[168] Fix | Delete

$(element).attr('aria-checked', false);

[169] Fix | Delete

}else{

[170] Fix | Delete

$(element).attr('aria-checked', true);

[171] Fix | Delete

}

[172] Fix | Delete

});

[173] Fix | Delete

[174] Fix | Delete

element.on('keypress', function(event){

[175] Fix | Delete

event.preventDefault();

[176] Fix | Delete

if(event.keyCode === 32 || event.keyCode === 13){

[177] Fix | Delete

if($object.is(':checked')){

[178] Fix | Delete

$object.prop('checked', false);

[179] Fix | Delete

$(element).attr('aria-checked',false);

[180] Fix | Delete

}else{

[181] Fix | Delete

$object.prop('checked', true);

[182] Fix | Delete

$(element).attr('aria-checked', true);

[183] Fix | Delete

}

[184] Fix | Delete

}

[185] Fix | Delete

})

[186] Fix | Delete

[187] Fix | Delete

$object.after(element);

[188] Fix | Delete

[189] Fix | Delete

// Now, add "min-width" to label

[190] Fix | Delete

// Let's say the truth, a fixed width is more beautiful than a variable width

[191] Fix | Delete

if( settings.minimum_width !== false )

[192] Fix | Delete

$object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });

[193] Fix | Delete

[194] Fix | Delete

// Now, add "min-width" to label

[195] Fix | Delete

// Let's say the truth, a fixed width is more beautiful than a variable width

[196] Fix | Delete

if( settings.same_width != false && settings.label == true )

[197] Fix | Delete

{

[198] Fix | Delete

var label_object = $object.next( "label[for=" + input_id + "]" );

[199] Fix | Delete

var unchecked_width = getRealWidth(label_object.find( "span.labelauty-unchecked" ));

[200] Fix | Delete

var checked_width = getRealWidth(label_object.find( "span.labelauty-checked" ));

[201] Fix | Delete

[202] Fix | Delete

if( unchecked_width > checked_width )

[203] Fix | Delete

label_object.find( "span.labelauty-checked" ).width( unchecked_width );

[204] Fix | Delete

else

[205] Fix | Delete

label_object.find( "span.labelauty-unchecked" ).width( checked_width );

[206] Fix | Delete

}

[207] Fix | Delete

if (settings.development) jQuery.migrateDeduplicateWarnings = migrateDeduplicateWarnings;

[208] Fix | Delete

});

[209] Fix | Delete

};

[210] Fix | Delete

[211] Fix | Delete

/*

[212] Fix | Delete

* Tricky code to work with hidden elements, like tabs.

[213] Fix | Delete

* Note: This code is based on jquery.actual plugin.

[214] Fix | Delete

* https://github.com/dreamerslab/jquery.actual

[215] Fix | Delete

*/

[216] Fix | Delete

function getRealWidth( element )

[217] Fix | Delete

{

[218] Fix | Delete

var width = 0;

[219] Fix | Delete

var $target = element;

[220] Fix | Delete

var style = 'position: absolute !important; top: -1000 !important; ';

[221] Fix | Delete

[222] Fix | Delete

$target = $target.clone().attr('style', style).appendTo('body');

[223] Fix | Delete

width = $target.width(true);

[224] Fix | Delete

$target.remove();

[225] Fix | Delete

[226] Fix | Delete

return width;

[227] Fix | Delete

}

[228] Fix | Delete

[229] Fix | Delete

function debug( debug, message )

[230] Fix | Delete

{

[231] Fix | Delete

if( debug && window.console && window.console.log )

[232] Fix | Delete

window.console.log( "jQuery-LABELAUTY: " + message );

[233] Fix | Delete

};

[234] Fix | Delete

[235] Fix | Delete

function create( input_id, aria_label, selected, type, messages_object, label )

[236] Fix | Delete

{

[237] Fix | Delete

var block;

[238] Fix | Delete

var unchecked_message;

[239] Fix | Delete

var checked_message;

[240] Fix | Delete

var aria = "";

[241] Fix | Delete

[242] Fix | Delete

if( messages_object == null )

[243] Fix | Delete

unchecked_message = checked_message = "";

[244] Fix | Delete

else

[245] Fix | Delete

{

[246] Fix | Delete

unchecked_message = messages_object[0];

[247] Fix | Delete

[248] Fix | Delete

// If checked message is null, then put the same text of unchecked message

[249] Fix | Delete

if( messages_object[1] == null )

[250] Fix | Delete

checked_message = unchecked_message;

[251] Fix | Delete

else

[252] Fix | Delete

checked_message = messages_object[1];

[253] Fix | Delete

}

[254] Fix | Delete

[255] Fix | Delete

if(aria_label == null)

[256] Fix | Delete

aria = "";

[257] Fix | Delete

else

[258] Fix | Delete

aria = 'tabindex="0" role="' + type + '" aria-checked="' + selected + '" aria-label="' + aria_label + '"';

[259] Fix | Delete

[260] Fix | Delete

if( label == true )

[261] Fix | Delete

{

[262] Fix | Delete

block = '<label for="' + input_id + '" ' + aria + '>' +

[263] Fix | Delete

'<span class="labelauty-unchecked-image"></span>' +

[264] Fix | Delete

'<span class="labelauty-unchecked">' + unchecked_message + '</span>' +

[265] Fix | Delete

'<span class="labelauty-checked-image"></span>' +

[266] Fix | Delete

'<span class="labelauty-checked">' + checked_message + '</span>' +

[267] Fix | Delete

'</label>';

[268] Fix | Delete

}

[269] Fix | Delete

else

[270] Fix | Delete

{

[271] Fix | Delete

block = '<label for="' + input_id + '" ' + aria + '>' +

[272] Fix | Delete

'<span class="labelauty-unchecked-image"></span>' +

[273] Fix | Delete

'<span class="labelauty-checked-image"></span>' +

[274] Fix | Delete

'</label>';

[275] Fix | Delete

}

[276] Fix | Delete

[277] Fix | Delete

return block;

[278] Fix | Delete

};

[279] Fix | Delete

[280] Fix | Delete

}( jQuery ));

[281] Fix | Delete