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