123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506 |
- /*!
- * 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);
|