icheck.js 14 KB

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