|
|
/*! * iCheck v1.0.1, http://git.io/arlzeA
* ================================= * Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization * * (c) 2013 Damir Sultanov, http://fronteed.com
* MIT Licensed */
(function($) {
// Cached vars
var _iCheck = 'iCheck', _iCheckHelper = _iCheck + '-helper', _checkbox = 'checkbox', _radio = 'radio', _checked = 'checked', _unchecked = 'un' + _checked, _disabled = 'disabled', _determinate = 'determinate', _indeterminate = 'in' + _determinate, _update = 'update', _type = 'type', _click = 'click', _touch = 'touchbegin.i touchend.i', _add = 'addClass', _remove = 'removeClass', _callback = 'trigger', _label = 'label', _cursor = 'cursor', _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
// Plugin init
$.fn[_iCheck] = function(options, fire) {
// Walker
var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]', stack = $(), walker = function(object) { object.each(function() { var self = $(this);
if (self.is(handle)) { stack = stack.add(self); } else { stack = stack.add(self.find(handle)); } }); };
// Check if we should operate with some method
if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {
// Normalize method's name
options = options.toLowerCase();
// Find checkboxes and radio buttons
walker(this);
return stack.each(function() { var self = $(this);
if (options == 'destroy') { tidy(self, 'ifDestroyed'); } else { operate(self, true, options); } // Fire method's callback
if ($.isFunction(fire)) { fire(); } });
// Customization
} else if (typeof options == 'object' || !options) {
// Check if any options were passed
var settings = $.extend({ checkedClass: _checked, disabledClass: _disabled, indeterminateClass: _indeterminate, labelHover: true, aria: false }, options),
selector = settings.handle, hoverClass = settings.hoverClass || 'hover', focusClass = settings.focusClass || 'focus', activeClass = settings.activeClass || 'active', labelHover = !!settings.labelHover, labelHoverClass = settings.labelHoverClass || 'hover',
// Setup clickable area
area = ('' + settings.increaseArea).replace('%', '') | 0;
// Selector limit
if (selector == _checkbox || selector == _radio) { handle = 'input[type="' + selector + '"]'; } // Clickable area limit
if (area < -50) { area = -50; } // Walk around the selector
walker(this);
return stack.each(function() { var self = $(this);
// If already customized
tidy(self);
var node = this, id = node.id,
// Layer styles
offset = -area + '%', size = 100 + (area * 2) + '%', layer = { position: 'absolute', top: offset, left: offset, display: 'block', width: size, height: size, margin: 0, padding: 0, background: '#fff', border: 0, opacity: 0 },
// Choose how to hide input
hide = _mobile ? { position: 'absolute', visibility: 'hidden' } : area ? layer : { position: 'absolute', opacity: 0 },
// Get proper class
className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio,
// Find assigned labels
label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),
// Check ARIA option
aria = !!settings.aria,
// Set ARIA placeholder
ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.', ''),
// Parent & helper
parent = '<div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''), helper;
// Set ARIA "labelledby"
if (label.length && aria) { label.each(function() { parent += 'aria-labelledby="';
if (this.id) { parent += this.id; } else { this.id = ariaID; parent += ariaID; }
parent += '"'; }); } // Wrap input
parent = self.wrap(parent + '/>')[_callback]('ifCreated').parent().append(settings.insert);
// Layer addition
helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent);
// Finalize customization
self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide); !!settings.inheritClass && parent[_add](node.className || ''); !!settings.inheritID && id && parent.attr('id', _iCheck + '-' + id); parent.css('position') == 'static' && parent.css('position', 'relative'); operate(self, true, _update);
// Label events
if (label.length) { label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) { var type = event[_type], item = $(this);
// Do nothing if input is disabled
if (!node[_disabled]) {
// Click
if (type == _click) { if ($(event.target).is('a')) { return; } operate(self, false, true);
// Hover state
} else if (labelHover) {
// mouseout|touchend
if (/ut|nd/.test(type)) { parent[_remove](hoverClass); item[_remove](labelHoverClass); } else { parent[_add](hoverClass); item[_add](labelHoverClass); } } if (_mobile) { event.stopPropagation(); } else { return false; } } }); } // Input events
self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) { var type = event[_type], key = event.keyCode;
// Click
if (type == _click) { return false;
// Keydown
} else if (type == 'keydown' && key == 32) { if (!(node[_type] == _radio && node[_checked])) { if (node[_checked]) { off(self, _checked); } else { on(self, _checked); } } return false;
// Keyup
} else if (type == 'keyup' && node[_type] == _radio) { !node[_checked] && on(self, _checked);
// Focus/blur
} else if (/us|ur/.test(type)) { parent[type == 'blur' ? _remove : _add](focusClass); } });
// Helper events
helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) { var type = event[_type],
// mousedown|mouseup
toggle = /wn|up/.test(type) ? activeClass : hoverClass;
// Do nothing if input is disabled
if (!node[_disabled]) {
// Click
if (type == _click) { operate(self, false, true);
// Active and hover states
} else {
// State is on
if (/wn|er|in/.test(type)) {
// mousedown|mouseover|touchbegin
parent[_add](toggle);
// State is off
} else { parent[_remove](toggle + ' ' + activeClass); } // Label hover
if (label.length && labelHover && toggle == hoverClass) {
// mouseout|touchend
label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass); } } if (_mobile) { event.stopPropagation(); } else { return false; } } }); }); } else { return this; } };
// Do something with inputs
function operate(input, direct, method) { var node = input[0], state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked, active = method == _update ? { checked: node[_checked], disabled: node[_disabled], indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false' } : node[state];
// Check, disable or indeterminate
if (/^(ch|di|in)/.test(method) && !active) { on(input, state);
// Uncheck, enable or determinate
} else if (/^(un|en|de)/.test(method) && active) { off(input, state);
// Update
} else if (method == _update) {
// Handle states
for (var state in active) { if (active[state]) { on(input, state, true); } else { off(input, state, true); } } } else if (!direct || method == 'toggle') {
// Helper or label was clicked
if (!direct) { input[_callback]('ifClicked'); } // Toggle checked state
if (active) { if (node[_type] !== _radio) { off(input, state); } } else { on(input, state); } } } // Add checked, disabled or indeterminate state
function on(input, state, keep) { var node = input[0], parent = input.parent(), checked = state == _checked, indeterminate = state == _indeterminate, disabled = state == _disabled, callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', regular = option(input, callback + capitalize(node[_type])), specific = option(input, state + capitalize(node[_type]));
// Prevent unnecessary actions
if (node[state] !== true) {
// Toggle assigned radio buttons
if (!keep && state == _checked && node[_type] == _radio && node.name) { var form = input.closest('form'), inputs = 'input[name="' + node.name + '"]';
inputs = form.length ? form.find(inputs) : $(inputs);
inputs.each(function() { if (this !== node && $(this).data(_iCheck)) { off($(this), state); } }); } // Indeterminate state
if (indeterminate) {
// Add indeterminate state
node[state] = true;
// Remove checked state
if (node[_checked]) { off(input, _checked, 'force'); } // Checked or disabled state
} else {
// Add checked or disabled state
if (!keep) { node[state] = true; } // Remove indeterminate state
if (checked && node[_indeterminate]) { off(input, _indeterminate, false); } } // Trigger callbacks
callbacks(input, checked, state, keep); } // Add proper cursor
if (node[_disabled] && !!option(input, _cursor, true)) { parent.find('.' + _iCheckHelper).css(_cursor, 'default'); } // Add state class
parent[_add](specific || option(input, state) || '');
// Set ARIA attribute
disabled ? parent.attr('aria-disabled', 'true') : parent.attr('aria-checked', indeterminate ? 'mixed' : 'true');
// Remove regular state class
parent[_remove](regular || option(input, callback) || ''); } // Remove checked, disabled or indeterminate state
function off(input, state, keep) { var node = input[0], parent = input.parent(), checked = state == _checked, indeterminate = state == _indeterminate, disabled = state == _disabled, callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', regular = option(input, callback + capitalize(node[_type])), specific = option(input, state + capitalize(node[_type]));
// Prevent unnecessary actions
if (node[state] !== false) {
// Toggle state
if (indeterminate || !keep || keep == 'force') { node[state] = false; } // Trigger callbacks
callbacks(input, checked, callback, keep); } // Add proper cursor
if (!node[_disabled] && !!option(input, _cursor, true)) { parent.find('.' + _iCheckHelper).css(_cursor, 'pointer'); } // Remove state class
parent[_remove](specific || option(input, state) || '');
// Set ARIA attribute
disabled ? parent.attr('aria-disabled', 'false') : parent.attr('aria-checked', 'false');
// Add regular state class
parent[_add](regular || option(input, callback) || ''); } // Remove all traces
function tidy(input, callback) { if (input.data(_iCheck)) {
// Remove everything except input
input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
// Callback
if (callback) { input[_callback](callback); } // Unbind events
input.off('.i').unwrap(); $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i'); } } // Get some option
function option(input, state, regular) { if (input.data(_iCheck)) { return input.data(_iCheck).o[state + (regular ? '' : 'Class')]; } } // Capitalize some string
function capitalize(string) { return string.charAt(0).toUpperCase() + string.slice(1); } // Executable handlers
function callbacks(input, checked, callback, keep) { if (!keep) { if (checked) { input[_callback]('ifToggled'); } input[_callback]('ifChanged')[_callback]('if' + capitalize(callback)); } } })(window.jQuery || window.Zepto);
|