icheck.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  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',
  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. if (helper.hasClass('readonly')) {
  214. event.stopPropagation();
  215. return false;
  216. }
  217. var type = event[_type],
  218. // mousedown|mouseup
  219. toggle = /wn|up/.test(type) ? activeClass : hoverClass;
  220. // Do nothing if input is disabled
  221. if (!node[_disabled]) {
  222. // Click
  223. if (type == _click) {
  224. operate(self, false, true);
  225. // Active and hover states
  226. } else {
  227. // State is on
  228. if (/wn|er|in/.test(type)) {
  229. // mousedown|mouseover|touchbegin
  230. parent[_add](toggle);
  231. // State is off
  232. } else {
  233. parent[_remove](toggle + ' ' + activeClass);
  234. }
  235. // Label hover
  236. if (label.length && labelHover && toggle == hoverClass) {
  237. // mouseout|touchend
  238. label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
  239. }
  240. }
  241. if (_mobile) {
  242. event.stopPropagation();
  243. } else {
  244. return false;
  245. }
  246. }
  247. });
  248. });
  249. } else {
  250. return this;
  251. }
  252. };
  253. // Do something with inputs
  254. function operate(input, direct, method) {
  255. var node = input[0],
  256. state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,
  257. active = method == _update ? {
  258. checked: node[_checked],
  259. disabled: node[_disabled],
  260. indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
  261. } : node[state];
  262. // Check, disable or indeterminate
  263. if (/^(ch|di|in)/.test(method) && !active) {
  264. on(input, state);
  265. // Uncheck, enable or determinate
  266. } else if (/^(un|en|de)/.test(method) && active) {
  267. off(input, state);
  268. // Update
  269. } else if (method == _update) {
  270. // Handle states
  271. for (var each in active) {
  272. if (active[each]) {
  273. on(input, each, true);
  274. } else {
  275. off(input, each, true);
  276. }
  277. }
  278. } else if (!direct || method == 'toggle') {
  279. // Helper or label was clicked
  280. if (!direct) {
  281. input[_callback]('ifClicked');
  282. }
  283. // Toggle checked state
  284. if (active) {
  285. if (node[_type] !== _radio) {
  286. off(input, state);
  287. }
  288. } else {
  289. on(input, state);
  290. }
  291. }
  292. }
  293. // Add checked, disabled or indeterminate state
  294. function on(input, state, keep) {
  295. var node = input[0],
  296. parent = input.parent(),
  297. checked = state == _checked,
  298. indeterminate = state == _indeterminate,
  299. disabled = state == _disabled,
  300. callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
  301. regular = option(input, callback + capitalize(node[_type])),
  302. specific = option(input, state + capitalize(node[_type]));
  303. // Prevent unnecessary actions
  304. if (node[state] !== true) {
  305. // Toggle assigned radio buttons
  306. if (!keep && state == _checked && node[_type] == _radio && node.name) {
  307. var form = input.closest('form'),
  308. inputs = 'input[name="' + node.name + '"]';
  309. inputs = form.length ? form.find(inputs) : $(inputs);
  310. inputs.each(function() {
  311. if (this !== node && $(this).data(_iCheck)) {
  312. off($(this), state);
  313. }
  314. });
  315. }
  316. // Indeterminate state
  317. if (indeterminate) {
  318. // Add indeterminate state
  319. node[state] = true;
  320. // Remove checked state
  321. if (node[_checked]) {
  322. off(input, _checked, 'force');
  323. }
  324. // Checked or disabled state
  325. } else {
  326. // Add checked or disabled state
  327. if (!keep) {
  328. node[state] = true;
  329. }
  330. // Remove indeterminate state
  331. if (checked && node[_indeterminate]) {
  332. off(input, _indeterminate, false);
  333. }
  334. }
  335. // Trigger callbacks
  336. callbacks(input, checked, state, keep);
  337. }
  338. // Add proper cursor
  339. if (node[_disabled] && !!option(input, _cursor, true)) {
  340. parent.find('.' + _iCheckHelper).css(_cursor, 'default');
  341. }
  342. // Add state class
  343. parent[_add](specific || option(input, state) || '');
  344. // Set ARIA attribute
  345. if (!!parent.attr('role') && !indeterminate) {
  346. parent.attr('aria-' + (disabled ? _disabled : _checked), 'true');
  347. }
  348. // Remove regular state class
  349. parent[_remove](regular || option(input, callback) || '');
  350. }
  351. // Remove checked, disabled or indeterminate state
  352. function off(input, state, keep) {
  353. var node = input[0],
  354. parent = input.parent(),
  355. checked = state == _checked,
  356. indeterminate = state == _indeterminate,
  357. disabled = state == _disabled,
  358. callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
  359. regular = option(input, callback + capitalize(node[_type])),
  360. specific = option(input, state + capitalize(node[_type]));
  361. // Prevent unnecessary actions
  362. if (node[state] !== false) {
  363. // Toggle state
  364. if (indeterminate || !keep || keep == 'force') {
  365. node[state] = false;
  366. }
  367. // Trigger callbacks
  368. callbacks(input, checked, callback, keep);
  369. }
  370. // Add proper cursor
  371. if (!node[_disabled] && !!option(input, _cursor, true)) {
  372. parent.find('.' + _iCheckHelper).css(_cursor, 'pointer');
  373. }
  374. // Remove state class
  375. parent[_remove](specific || option(input, state) || '');
  376. // Set ARIA attribute
  377. if (!!parent.attr('role') && !indeterminate) {
  378. parent.attr('aria-' + (disabled ? _disabled : _checked), 'false');
  379. }
  380. // Add regular state class
  381. parent[_add](regular || option(input, callback) || '');
  382. }
  383. // Remove all traces
  384. function tidy(input, callback) {
  385. if (input.data(_iCheck)) {
  386. // Remove everything except input
  387. input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
  388. // Callback
  389. if (callback) {
  390. input[_callback](callback);
  391. }
  392. // Unbind events
  393. input.off('.i').unwrap();
  394. $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
  395. }
  396. }
  397. // Get some option
  398. function option(input, state, regular) {
  399. if (input.data(_iCheck)) {
  400. return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
  401. }
  402. }
  403. // Capitalize some string
  404. function capitalize(string) {
  405. return string.charAt(0).toUpperCase() + string.slice(1);
  406. }
  407. // Executable handlers
  408. function callbacks(input, checked, callback, keep) {
  409. if (!keep) {
  410. if (checked) {
  411. input[_callback]('ifToggled');
  412. }
  413. input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
  414. }
  415. }
  416. })(window.jQuery || window.Zepto);