Merge pull request #63 from FinalAngel/feature/uniform-checked

added checked option for uniform

docs/src/cl.uniform.rst

@@ -34,6 +34,7 @@ select         'select'         will be used as the wrapper for select elements.
 disabled       'disabled'       will be added whenever the attribute ``disabled="disabled"`` is defined.
 focus          'focus'          will be added whenever ``focus`` is triggered on the element.
 ready          'ready'          will be added when the uniform is ready on this particular field.
+checked        'checked'        will be added when checkbox/radio is checked/selected
 ==========     ============     ===========
 
 

index.html

@@ -20,7 +20,7 @@
   - name: mobilemenu
     version: 1.1.6
   - name: uniform
-    version: 1.2.2
+    version: 1.2.3
 
 experimental_plugins:
   - name: parallax

src/cl.uniform/CHANGELOG.rst

@@ -2,6 +2,10 @@
 Cl.Uniform
 ==========
 
+1.2.3
+-----
+- added ``checked`` class option
+
 1.2.2
 -----
 - fixed issue with uniform triggering extra change events on radio/checkboxes

src/cl.uniform/cl.uniform.js

@@ -1,7 +1,7 @@
 /*!
  * @author      Angelo Dini - github.com/finalangel/classjs-plugins
  * @copyright   Distributed under the BSD License.
- * @version     1.2.2
+ * @version     1.2.3
  * @contributer Vanessa Hänni, Vadim Sikora
  */
 
@@ -24,7 +24,8 @@ var Cl = window.Cl || {};
                 'select': 'select',
                 'disabled': 'disabled',
                 'focus': 'focus',
-                'ready': 'ready'
+                'ready': 'ready',
+                'checked': 'checked'
             },
             'lang': {
                 'fileBtn': 'Upload',
@@ -125,6 +126,7 @@ var Cl = window.Cl || {};
             var cls = this.options.cls;
             var clsTpl = cls.prefix + ' ' + cls.prefix + '-' + cls[type];
             var clsKnob = cls.prefix + '-' + cls[type] + '-knob';
+            var clsChecked = cls.prefix + '-' + cls.checked;
 
             var tpl = $(this.options.tpl[type].replace('{cls}', clsTpl));
             var tplKnob = $(this.options.tpl.knob.replace('{knob}', clsKnob));
@@ -147,6 +149,8 @@ var Cl = window.Cl || {};
                     // don't use toggle, jQuery UI bug: http://bugs.jqueryui.com/ticket/10557
                     knob[checked ? 'show' : 'hide']();
 
+                    parent[checked ? 'addClass' : 'removeClass'](clsChecked);
+
                     // accessibility
                     parent.attr('aria-checked', checked);
 
@@ -162,6 +166,7 @@ var Cl = window.Cl || {};
                         var checked = input.is(':checked');
 
                         knob[checked ? 'show' : 'hide']();
+                        parent[checked ? 'addClass' : 'removeClass'](clsChecked);
                         // accessibility
                         parent.attr('aria-checked', checked);
                     });
@@ -220,10 +225,10 @@ var Cl = window.Cl || {};
 
             // set initial accessibility labels and knob state
             if (field.is(':checked')) {
-                parent.attr('aria-checked', true);
+                parent.attr('aria-checked', true).addClass(clsChecked);
                 field.siblings('.' + clsKnob).show();
             } else {
-                parent.attr('aria-checked', false);
+                parent.attr('aria-checked', false).removeClass(clsChecked);
                 field.siblings('.' + clsKnob).hide();
             }
 

tests/cl.uniform.js

@@ -97,13 +97,14 @@ test('Options', function() {
     equal(cls.disabled, 'disabled', 'disabled is available');
     equal(cls.focus, 'focus', 'focus is available');
     equal(cls.ready, 'ready', 'ready is available');
+    equal(cls.checked, 'checked', 'checked is available');
 
     var lang = uniform.options.lang;
     equal(lang.fileBtn, 'Upload', 'fileBtn is available');
     equal(lang.fileStatus, 'Please select a file...', 'fileStatus is available');
 
     var clsLength = getLength(uniform.options.cls);
-    ok(clsLength === 8, 'there are ' + clsLength + ' cls options');
+    ok(clsLength === 9, 'there are ' + clsLength + ' cls options');
 
     var langLength = getLength(uniform.options.lang);
     ok(langLength === 2, 'there are ' + clsLength + ' lang options');
@@ -253,3 +254,37 @@ test('change event is not triggered if click happened on already checked radio',
     fakeClick(radio.eq(0).parents('.uniform-radio')[0]); // trigger fake click because phantomjs does not bubble down to radio
     equal(counter, 0, 'change triggered only once');
 });
+
+test('checked class is set on initialization', function () {
+    var fixture = $('#qunit-fixture');
+    var uncheckedCheckbox = fixture.find('[name=check1]');
+    var checkedCheckbox = fixture.find('[name=check4]');
+    var uncheckedRadio = fixture.find('.not-a-form :radio:first');
+    var checkedRadio = fixture.find(':radio:checked:first');
+
+    equal(uncheckedCheckbox.parent().hasClass('uniform-checked'), false, 'unchecked checkbox has no class on init');
+    equal(checkedCheckbox.parent().hasClass('uniform-checked'), true, 'checked checkbox has class on init');
+    equal(uncheckedRadio.parent().hasClass('uniform-checked'), false, 'unchecked radio has no class on init');
+    equal(checkedRadio.parent().hasClass('uniform-checked'), true, 'checked radio has class on init');
+});
+
+test('checked class is set/unset when checkbox is selected', function () {
+    var fixture = $('#qunit-fixture');
+    var checkbox = fixture.find('[name=check1]');
+    checkbox.prop('checked', true).trigger('change');
+    equal(checkbox.parent().hasClass('uniform-checked'), true, 'checked class is set on change');
+    checkbox.prop('checked', false).trigger('change');
+    equal(checkbox.parent().hasClass('uniform-checked'), false, 'checked class is unset on change');
+});
+
+test('checked class is set/unset when radio is selected', function () {
+    var fixture = $('#qunit-fixture');
+    var radio1 = fixture.find('.form1 :radio').eq(0);
+    var radio2 = fixture.find('.form1 :radio').eq(1);
+    equal(radio1.is(':checked'), true, 'initially selected');
+    equal(radio2.is(':checked'), false, 'initially not selected');
+
+    radio2.prop('checked', true).trigger('change');
+    equal(radio1.parent().hasClass('uniform-checked'), false, 'no class on first radio after change');
+    equal(radio2.parent().hasClass('uniform-checked'), true, 'added class on second radio after change');
+});