https://geppetto.org/js/flatui-radio.js

1/* =============================================================
2 * flatui-radio.js v0.0.3
3 * ============================================================ */
4
5!function ($) {
6
7 /* RADIO PUBLIC CLASS DEFINITION
8  * ============================== */
9
10  var Radio = function (element, options) {
11    this.init(element, options);
12  }
13
14  Radio.prototype = {
15  
16    constructor: Radio
17    
18  , init: function (element, options) {      
19      var $el = this.$element = $(element)
20      
21      this.options = $.extend({}, $.fn.radio.defaults, options);      
22      $el.before(this.options.template);    
23      this.setState();
24    }   
25    
26  , setState: function () {    
27      var $el = this.$element
28        , $parent = $el.closest('.radio');
29        
30        $el.prop('disabled') && $parent.addClass('disabled');   
31        $el.prop('checked') && $parent.addClass('checked');
32    } 
33    
34  , toggle: function () {    
35      var d = 'disabled'
36        , ch = 'checked'
37        , $el = this.$element
38        , checked = $el.prop(ch)
39        , $parent = $el.closest('.radio')      
40        , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
41        , $elemGroup = $parentWrap.find(':radio[name="' + $el.attr('name') + '"]')
42        , e = $.Event('toggle')
43        
44        $elemGroup.not($el).each(function () {
45          var $el = $(this)
46            , $parent = $(this).closest('.radio');
47            
48            if ($el.prop(d) == false) {
49              $parent.removeClass(ch) && $el.removeAttr(ch).trigger('change');
50            } 
51        });
52      
53        if ($el.prop(d) == false) {
54          if (checked == false) $parent.addClass(ch) && $el.attr(ch, true);
55          $el.trigger(e);
56          
57          if (checked !== $el.prop(ch)) {
58            $el.trigger('change'); 
59          }
60        }               
61    } 
62     
63  , setCheck: function (option) {    
64      var ch = 'checked'
65        , $el = this.$element
66        , $parent = $el.closest('.radio')
67        , checkAction = option == 'check' ? true : false
68        , checked = $el.prop(ch)
69        , $parentWrap = $el.closest('form').length ? $el.closest('form') : $el.closest('body')
70        , $elemGroup = $parentWrap.find(':radio[name="' + $el['attr']('name') + '"]')
71        , e = $.Event(option)
72        
73      $elemGroup.not($el).each(function () {
74        var $el = $(this)
75          , $parent = $(this).closest('.radio');
76          
77          $parent.removeClass(ch) && $el.removeAttr(ch);
78      });
79            
80      $parent[checkAction ? 'addClass' : 'removeClass'](ch) && checkAction ? $el.prop(ch, ch) : $el.removeAttr(ch);
81      $el.trigger(e);  
82          
83      if (checked !== $el.prop(ch)) {
84        $el.trigger('change'); 
85      }
86    }  
87     
88  }
89
90
91 /* RADIO PLUGIN DEFINITION
92  * ======================== */
93
94  var old = $.fn.radio
95
96  $.fn.radio = function (option) {
97    return this.each(function () {
98      var $this = $(this)
99        , data = $this.data('radio')
100        , options = $.extend({}, $.fn.radio.defaults, $this.data(), typeof option == 'object' && option);
101      if (!data) $this.data('radio', (data = new Radio(this, options)));
102      if (option == 'toggle') data.toggle()
103      if (option == 'check' || option == 'uncheck') data.setCheck(option)
104      else if (option) data.setState(); 
105    });
106  }
107  
108  $.fn.radio.defaults = {
109    template: '<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span>'
110  }
111
112
113 /* RADIO NO CONFLICT
114  * ================== */
115
116  $.fn.radio.noConflict = function () {
117    $.fn.radio = old;
118    return this;
119  }
120
121
122 /* RADIO DATA-API
123  * =============== */
124
125  $(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
126    var $radio = $(e.target);
127    e && e.preventDefault() && e.stopPropagation();
128    if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio');
129    $radio.find(':radio').radio('toggle');
130  });
131  
132  $(function () {
133    $('[data-toggle="radio"]').each(function () {
134      var $radio = $(this);
135      $radio.radio();
136    });
137  });
138
139}(window.jQuery);