/*! * icheck v0.9.1, http://git.io/uhupma * ================================= * powerful jquery plugin for checkboxes and radio buttons customization * * (c) 2013 damir foy, http://damirfoy.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/i.test(navigator.useragent); // plugin init $.fn[_icheck] = function(options, fire) { // walker var handle = ':' + _checkbox + ', :' + _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() { if (options == 'destroy') { tidy(this, 'ifdestroyed'); } else { operate($(this), 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 }, 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 = ':' + selector; }; // clickable area limit if (area < -50) { area = -50; }; // walk around the selector walker(this); return stack.each(function() { // if already customized tidy(this); var self = $(this), 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)), // wrap input parent = self.wrap('
')[_callback]('ifcreated').parent().append(settings.insert), // layer addition helper = $('').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 mouseenter.i mouseleave.i ' + _touch, function(event) { var type = event[_type], item = $(this); // do nothing if input is disabled if (!node[_disabled]) { // click if (type == _click) { operate(self, false, true); // hover state } else if (labelhover) { // mouseleave|touchend if (/ve|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, callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', regular = option(node, callback + capitalize(node[_type])), specific = option(node, 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 && $.data(this, _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(node, _cursor, true)) { parent.find('.' + _icheckhelper).css(_cursor, 'default'); }; // add state class parent[_add](specific || option(node, state)); // remove regular state class parent[_remove](regular || option(node, 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, callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', regular = option(node, callback + capitalize(node[_type])), specific = option(node, 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(node, _cursor, true)) { parent.find('.' + _icheckhelper).css(_cursor, 'pointer'); }; // remove state class parent[_remove](specific || option(node, state) || ''); // add regular state class parent[_add](regular || option(node, callback)); }; // remove all traces function tidy(node, callback) { if ($.data(node, _icheck)) { var input = $(node); // remove everything except input input.parent().html(input.attr('style', $.data(node, _icheck).s || '')[_callback](callback || '')); // unbind events input.off('.i').unwrap(); $(_label + '[for="' + node.id + '"]').add(input.closest(_label)).off('.i'); }; }; // get some option function option(node, state, regular) { if ($.data(node, _icheck)) { return $.data(node, _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)); }; }; })(jquery);