git.roojs.org Git - bootswatch/blob - AdminLTE-master/js/plugins/iCheck/icheck.js

   1 /*!
   2  * iCheck v1.0.1, http://git.io/arlzeA
   3  * =================================
   4  * Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization
   5  *
   6  * (c) 2013 Damir Sultanov, http://fronteed.com
   7  * MIT Licensed
   8  */
   9
  10 (function($) {
  11
  12   // Cached vars
  13   var _iCheck = 'iCheck',
  14     _iCheckHelper = _iCheck + '-helper',
  15     _checkbox = 'checkbox',
  16     _radio = 'radio',
  17     _checked = 'checked',
  18     _unchecked = 'un' + _checked,
  19     _disabled = 'disabled',
  20     _determinate = 'determinate',
  21     _indeterminate = 'in' + _determinate,
  22     _update = 'update',
  23     _type = 'type',
  24     _click = 'click',
  25     _touch = 'touchbegin.i touchend.i',
  26     _add = 'addClass',
  27     _remove = 'removeClass',
  28     _callback = 'trigger',
  29     _label = 'label',
  30     _cursor = 'cursor',
  31     _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
  32
  33   // Plugin init
  34   $.fn[_iCheck] = function(options, fire) {
  35
  36     // Walker
  37     var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]',
  38       stack = $(),
  39       walker = function(object) {
  40         object.each(function() {
  41           var self = $(this);
  42
  43           if (self.is(handle)) {
  44             stack = stack.add(self);
  45           } else {
  46             stack = stack.add(self.find(handle));
  47           };
  48         });
  49       };
  50
  51     // Check if we should operate with some method
  52     if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {
  53
  54       // Normalize method's name
  55       options = options.toLowerCase();
  56
  57       // Find checkboxes and radio buttons
  58       walker(this);
  59
  60       return stack.each(function() {
  61         var self = $(this);
  62
  63         if (options == 'destroy') {
  64           tidy(self, 'ifDestroyed');
  65         } else {
  66           operate(self, true, options);
  67         };
  68
  69         // Fire method's callback
  70         if ($.isFunction(fire)) {
  71           fire();
  72         };
  73       });
  74
  75     // Customization
  76     } else if (typeof options == 'object' || !options) {
  77
  78       // Check if any options were passed
  79       var settings = $.extend({
  80           checkedClass: _checked,
  81           disabledClass: _disabled,
  82           indeterminateClass: _indeterminate,
  83           labelHover: true,
  84           aria: false
  85         }, options),
  86
  87         selector = settings.handle,
  88         hoverClass = settings.hoverClass || 'hover',
  89         focusClass = settings.focusClass || 'focus',
  90         activeClass = settings.activeClass || 'active',
  91         labelHover = !!settings.labelHover,
  92         labelHoverClass = settings.labelHoverClass || 'hover',
  93
  94         // Setup clickable area
  95         area = ('' + settings.increaseArea).replace('%', '') | 0;
  96
  97       // Selector limit
  98       if (selector == _checkbox || selector == _radio) {
  99         handle = 'input[type="' + selector + '"]';
 100       };
 101
 102       // Clickable area limit
 103       if (area < -50) {
 104         area = -50;
 105       };
 106
 107       // Walk around the selector
 108       walker(this);
 109
 110       return stack.each(function() {
 111         var self = $(this);
 112
 113         // If already customized
 114         tidy(self);
 115
 116         var node = this,
 117           id = node.id,
 118
 119           // Layer styles
 120           offset = -area + '%',
 121           size = 100 + (area * 2) + '%',
 122           layer = {
 123             position: 'absolute',
 124             top: offset,
 125             left: offset,
 126             display: 'block',
 127             width: size,
 128             height: size,
 129             margin: 0,
 130             padding: 0,
 131             background: '#fff',
 132             border: 0,
 133             opacity: 0
 134           },
 135
 136           // Choose how to hide input
 137           hide = _mobile ? {
 138             position: 'absolute',
 139             visibility: 'hidden'
 140           } : area ? layer : {
 141             position: 'absolute',
 142             opacity: 0
 143           },
 144
 145           // Get proper class
 146           className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio,
 147
 148           // Find assigned labels
 149           label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),
 150
 151           // Check ARIA option
 152           aria = !!settings.aria,
 153
 154           // Set ARIA placeholder
 155           ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.', ''),
 156
 157           // Parent & helper
 158           parent = '<div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''),
 159           helper;
 160
 161         // Set ARIA "labelledby"
 162         if (label.length && aria) {
 163           label.each(function() {
 164             parent += 'aria-labelledby="';
 165
 166             if (this.id) {
 167               parent += this.id;
 168             } else {
 169               this.id = ariaID;
 170               parent += ariaID;
 171             }
 172
 173             parent += '"';
 174           });
 175         };
 176
 177         // Wrap input
 178         parent = self.wrap(parent + '/>')[_callback]('ifCreated').parent().append(settings.insert);
 179
 180         // Layer addition
 181         helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent);
 182
 183         // Finalize customization
 184         self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide);
 185         !!settings.inheritClass && parent[_add](node.className || '');
 186         !!settings.inheritID && id && parent.attr('id', _iCheck + '-' + id);
 187         parent.css('position') == 'static' && parent.css('position', 'relative');
 188         operate(self, true, _update);
 189
 190         // Label events
 191         if (label.length) {
 192           label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) {
 193             var type = event[_type],
 194               item = $(this);
 195
 196             // Do nothing if input is disabled
 197             if (!node[_disabled]) {
 198
 199               // Click
 200               if (type == _click) {
 201                 if ($(event.target).is('a')) {
 202                   return;
 203                 }
 204                 operate(self, false, true);
 205
 206               // Hover state
 207               } else if (labelHover) {
 208
 209                 // mouseout|touchend
 210                 if (/ut|nd/.test(type)) {
 211                   parent[_remove](hoverClass);
 212                   item[_remove](labelHoverClass);
 213                 } else {
 214                   parent[_add](hoverClass);
 215                   item[_add](labelHoverClass);
 216                 };
 217               };
 218
 219               if (_mobile) {
 220                 event.stopPropagation();
 221               } else {
 222                 return false;
 223               };
 224             };
 225           });
 226         };
 227
 228         // Input events
 229         self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) {
 230           var type = event[_type],
 231             key = event.keyCode;
 232
 233           // Click
 234           if (type == _click) {
 235             return false;
 236
 237           // Keydown
 238           } else if (type == 'keydown' && key == 32) {
 239             if (!(node[_type] == _radio && node[_checked])) {
 240               if (node[_checked]) {
 241                 off(self, _checked);
 242               } else {
 243                 on(self, _checked);
 244               };
 245             };
 246
 247             return false;
 248
 249           // Keyup
 250           } else if (type == 'keyup' && node[_type] == _radio) {
 251             !node[_checked] && on(self, _checked);
 252
 253           // Focus/blur
 254           } else if (/us|ur/.test(type)) {
 255             parent[type == 'blur' ? _remove : _add](focusClass);
 256           };
 257         });
 258
 259         // Helper events
 260         helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) {
 261           var type = event[_type],
 262
 263             // mousedown|mouseup
 264             toggle = /wn|up/.test(type) ? activeClass : hoverClass;
 265
 266           // Do nothing if input is disabled
 267           if (!node[_disabled]) {
 268
 269             // Click
 270             if (type == _click) {
 271               operate(self, false, true);
 272
 273             // Active and hover states
 274             } else {
 275
 276               // State is on
 277               if (/wn|er|in/.test(type)) {
 278
 279                 // mousedown|mouseover|touchbegin
 280                 parent[_add](toggle);
 281
 282               // State is off
 283               } else {
 284                 parent[_remove](toggle + ' ' + activeClass);
 285               };
 286
 287               // Label hover
 288               if (label.length && labelHover && toggle == hoverClass) {
 289
 290                 // mouseout|touchend
 291                 label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
 292               };
 293             };
 294
 295             if (_mobile) {
 296               event.stopPropagation();
 297             } else {
 298               return false;
 299             };
 300           };
 301         });
 302       });
 303     } else {
 304       return this;
 305     };
 306   };
 307
 308   // Do something with inputs
 309   function operate(input, direct, method) {
 310     var node = input[0],
 311       state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,
 312       active = method == _update ? {
 313         checked: node[_checked],
 314         disabled: node[_disabled],
 315         indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
 316       } : node[state];
 317
 318     // Check, disable or indeterminate
 319     if (/^(ch|di|in)/.test(method) && !active) {
 320       on(input, state);
 321
 322     // Uncheck, enable or determinate
 323     } else if (/^(un|en|de)/.test(method) && active) {
 324       off(input, state);
 325
 326     // Update
 327     } else if (method == _update) {
 328
 329       // Handle states
 330       for (var state in active) {
 331         if (active[state]) {
 332           on(input, state, true);
 333         } else {
 334           off(input, state, true);
 335         };
 336       };
 337
 338     } else if (!direct || method == 'toggle') {
 339
 340       // Helper or label was clicked
 341       if (!direct) {
 342         input[_callback]('ifClicked');
 343       };
 344
 345       // Toggle checked state
 346       if (active) {
 347         if (node[_type] !== _radio) {
 348           off(input, state);
 349         };
 350       } else {
 351         on(input, state);
 352       };
 353     };
 354   };
 355
 356   // Add checked, disabled or indeterminate state
 357   function on(input, state, keep) {
 358     var node = input[0],
 359       parent = input.parent(),
 360       checked = state == _checked,
 361       indeterminate = state == _indeterminate,
 362       disabled = state == _disabled,
 363       callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
 364       regular = option(input, callback + capitalize(node[_type])),
 365       specific = option(input, state + capitalize(node[_type]));
 366
 367     // Prevent unnecessary actions
 368     if (node[state] !== true) {
 369
 370       // Toggle assigned radio buttons
 371       if (!keep && state == _checked && node[_type] == _radio && node.name) {
 372         var form = input.closest('form'),
 373           inputs = 'input[name="' + node.name + '"]';
 374
 375         inputs = form.length ? form.find(inputs) : $(inputs);
 376
 377         inputs.each(function() {
 378           if (this !== node && $(this).data(_iCheck)) {
 379             off($(this), state);
 380           };
 381         });
 382       };
 383
 384       // Indeterminate state
 385       if (indeterminate) {
 386
 387         // Add indeterminate state
 388         node[state] = true;
 389
 390         // Remove checked state
 391         if (node[_checked]) {
 392           off(input, _checked, 'force');
 393         };
 394
 395       // Checked or disabled state
 396       } else {
 397
 398         // Add checked or disabled state
 399         if (!keep) {
 400           node[state] = true;
 401         };
 402
 403         // Remove indeterminate state
 404         if (checked && node[_indeterminate]) {
 405           off(input, _indeterminate, false);
 406         };
 407       };
 408
 409       // Trigger callbacks
 410       callbacks(input, checked, state, keep);
 411     };
 412
 413     // Add proper cursor
 414     if (node[_disabled] && !!option(input, _cursor, true)) {
 415       parent.find('.' + _iCheckHelper).css(_cursor, 'default');
 416     };
 417
 418     // Add state class
 419     parent[_add](specific || option(input, state) || '');
 420
 421     // Set ARIA attribute
 422     disabled ? parent.attr('aria-disabled', 'true') : parent.attr('aria-checked', indeterminate ? 'mixed' : 'true');
 423
 424     // Remove regular state class
 425     parent[_remove](regular || option(input, callback) || '');
 426   };
 427
 428   // Remove checked, disabled or indeterminate state
 429   function off(input, state, keep) {
 430     var node = input[0],
 431       parent = input.parent(),
 432       checked = state == _checked,
 433       indeterminate = state == _indeterminate,
 434       disabled = state == _disabled,
 435       callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
 436       regular = option(input, callback + capitalize(node[_type])),
 437       specific = option(input, state + capitalize(node[_type]));
 438
 439     // Prevent unnecessary actions
 440     if (node[state] !== false) {
 441
 442       // Toggle state
 443       if (indeterminate || !keep || keep == 'force') {
 444         node[state] = false;
 445       };
 446
 447       // Trigger callbacks
 448       callbacks(input, checked, callback, keep);
 449     };
 450
 451     // Add proper cursor
 452     if (!node[_disabled] && !!option(input, _cursor, true)) {
 453       parent.find('.' + _iCheckHelper).css(_cursor, 'pointer');
 454     };
 455
 456     // Remove state class
 457     parent[_remove](specific || option(input, state) || '');
 458
 459     // Set ARIA attribute
 460     disabled ? parent.attr('aria-disabled', 'false') : parent.attr('aria-checked', 'false');
 461
 462     // Add regular state class
 463     parent[_add](regular || option(input, callback) || '');
 464   };
 465
 466   // Remove all traces
 467   function tidy(input, callback) {
 468     if (input.data(_iCheck)) {
 469
 470       // Remove everything except input
 471       input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
 472
 473       // Callback
 474       if (callback) {
 475         input[_callback](callback);
 476       };
 477
 478       // Unbind events
 479       input.off('.i').unwrap();
 480       $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
 481     };
 482   };
 483
 484   // Get some option
 485   function option(input, state, regular) {
 486     if (input.data(_iCheck)) {
 487       return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
 488     };
 489   };
 490
 491   // Capitalize some string
 492   function capitalize(string) {
 493     return string.charAt(0).toUpperCase() + string.slice(1);
 494   };
 495
 496   // Executable handlers
 497   function callbacks(input, checked, callback, keep) {
 498     if (!keep) {
 499       if (checked) {
 500         input[_callback]('ifToggled');
 501       };
 502
 503       input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
 504     };
 505   };
 506 })(window.jQuery || window.Zepto);