Satinder Grewal
8 years ago
8 changed files with 295 additions and 27 deletions
@ -0,0 +1,6 @@ |
|||
/*! |
|||
* remark (http://getbootstrapadmin.com/remark)
|
|||
* Copyright 2016 amazingsurge |
|||
* Licensed under the Themeforest Standard Licenses |
|||
*/ |
|||
$.components.register("labelauty",{mode:"default",defaults:{same_width:!0}}); |
|||
|
After Width: | Height: | Size: 318 B |
|
After Width: | Height: | Size: 154 B |
@ -0,0 +1,240 @@ |
|||
/*! |
|||
* 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", |
|||
|
|||
// Force random ID's
|
|||
// Replace original ID's with random ID's,
|
|||
force_random_id: false, |
|||
|
|||
// 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( settings.force_random_id || input_id == null || input_id.trim() === "") |
|||
{ |
|||
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 = '<label for="' + input_id + '">' + |
|||
'<span class="labelauty-unchecked-image"></span>' + |
|||
'<span class="labelauty-unchecked">' + unchecked_message + '</span>' + |
|||
'<span class="labelauty-checked-image"></span>' + |
|||
'<span class="labelauty-checked">' + checked_message + '</span>' + |
|||
'</label>'; |
|||
} |
|||
else |
|||
{ |
|||
block = '<label for="' + input_id + '">' + |
|||
'<span class="labelauty-unchecked-image"></span>' + |
|||
'<span class="labelauty-checked-image"></span>' + |
|||
'</label>'; |
|||
} |
|||
|
|||
return block; |
|||
}; |
|||
|
|||
}( jQuery )); |
|||
@ -0,0 +1 @@ |
|||
input.labelauty+label ::-moz-selection{background-color:rgba(255,255,255,0)}input.labelauty+label ::selection{background-color:rgba(255,255,255,0)}input.labelauty+label ::-moz-selection{background-color:rgba(255,255,255,0)}input.labelauty{display:none!important}input.labelauty+label{display:table;padding:10px 12px;margin-bottom:0;font-size:14px;line-height:1;color:#757575;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#eee;border-radius:3px;-webkit-transition:background-color .25s;-moz-transition:background-color .25s;-o-transition:background-color .25s;transition:background-color .25s}input.labelauty+label>span.labelauty-checked,input.labelauty+label>span.labelauty-unchecked{display:inline-block;line-height:16px;vertical-align:bottom}input.labelauty+label>span.labelauty-checked-image,input.labelauty+label>span.labelauty-unchecked-image{display:inline-block;width:16px;height:16px;vertical-align:bottom;background-repeat:no-repeat;background-position:left center;-webkit-transition:background-image .5s linear;-moz-transition:background-image .5s linear;-o-transition:background-image .5s linear;transition:background-image .5s linear}input.labelauty+label>span.labelauty-checked-image+span.labelauty-checked,input.labelauty+label>span.labelauty-unchecked-image+span.labelauty-unchecked{margin-left:7px}input.labelauty:not(:checked):not([disabled])+label:hover{color:#757575;background-color:#e0e0e0}input.labelauty:not(:checked)+label>span.labelauty-checked-image{display:none}input.labelauty:not(:checked)+label>span.labelauty-checked{display:none}input.labelauty:checked+label{color:#fff;background-color:#3949ab}input.labelauty:checked:not([disabled])+label:hover{background-color:#3f51b5}input.labelauty:checked+label>span.labelauty-unchecked-image{display:none}input.labelauty:checked+label>span.labelauty-unchecked{display:none}input.labelauty:checked+label>span.labelauty-checked{display:inline-block}input.labelauty.no-label:checked+label>span.labelauty-checked{display:block}input.labelauty[disabled]+label{opacity:.7}input.labelauty+label>span.labelauty-unchecked-image{background-image:url(images/input-unchecked.png)}input.labelauty+label>span.labelauty-checked-image{background-image:url(images/input-checked.png)}input.to-labelauty+label{min-width:160px}input.to-labelauty-icon+label{display:inline-block;padding:8px 8px}input.to-labelauty-icon+label+span{margin-left:7px} |
|||
Loading…
Reference in new issue