forms - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+0.6.0 / 2014-05-03
+==================
+ * Add fieldsetClasses, legendClasses, and labelClasses
+
 0.5.0 / 2014-05-01
@@ -2,0 +6,0 @@ ==================

lib/render.js

@@ -11,4 +11,13 @@ /*jslint node: true */
         if (field.widget.type === 'multipleCheckbox' || field.widget.type === 'multipleRadio') {
-            var fieldset = tag('fieldset', {}, [
-                tag('legend', {}, field.labelText(name)),
+            var fieldsetAttrs = { classes: [] };
+            if (opt.fieldsetClasses) {
+                fieldsetAttrs.classes = fieldsetAttrs.classes.concat(opt.fieldsetClasses);
+            }
+            var legendAttrs = { classes: [] };
+            if (opt.legendClasses) {
+                legendAttrs.classes = legendAttrs.classes.concat(opt.legendClasses);
+            }
+
+            var fieldset = tag('fieldset', fieldsetAttrs, [
+                tag('legend', legendAttrs, field.labelText(name)),
                 opt.errorAfterField ? '' : errorHTML,
@@ -15,0 +24,0 @@ field.widget.toHTML(name, field),

lib/widgets.js

@@ -151,2 +151,3 @@ /*jslint node: true */
         classes: opt.classes,
+        labelClasses: opt.labelClasses,
         type: 'multipleCheckbox'
@@ -171,3 +172,3 @@ };
             // label element
-            html += tag('label', {'for': id}, f.choices[k]);
+            html += tag('label', {'for': id, classes: w.labelClasses}, f.choices[k]);
 
@@ -198,2 +199,3 @@ return html;
         classes: opt.classes,
+        labelClasses: opt.labelClasses,
         type: 'multipleRadio'
@@ -217,3 +219,3 @@ };
             // label element
-            html += tag('label', {for: id}, f.choices[k]);
+            html += tag('label', {'for': id, classes: w.labelClasses}, f.choices[k]);
 
@@ -220,0 +222,0 @@ return html;

package.json

@@ -6,3 +6,3 @@ {
     "author": "Caolan McMahon",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "repository": {
@@ -9,0 +9,0 @@ "type": "git",

README.md

@@ -275,2 +275,4 @@ # Forms <sup>[![Version Badge][9]][8]</sup>
 * errorAfterField - if true, the error message will be displayed after the field, rather than before.
+* fieldsetClasses - for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldset
+* legendClasses - for widgets with a fieldset (multipleRadio and multipleCheckbox), set classes for the fieldset's legend
 
@@ -336,2 +338,3 @@ #### field.parse(rawdata)
 * classes - Custom classes to add to the rendered widget
+* labelClasses - Custom classes to add to the choices label when applicable (multipleRadio and multipleCheckbox)
 * type - A string representing the widget type, e.g. 'text' or 'checkbox'
@@ -338,0 +341,0 @@

test/test-render.js

@@ -85,3 +85,5 @@ /*jslint node: true */
                 choices: {one: 'item one'},
-                widget: forms.widgets.multipleCheckbox()
+                widget: forms.widgets.multipleCheckbox(),
+                legendClasses: ['test1', 'test2'],
+                fieldsetClasses: ['test3', 'test4']
             })
@@ -92,4 +94,4 @@ });
             '<' + tag + ' class="field">' +
-                '<fieldset>' +
-                    '<legend>Fieldname</legend>' +
+                '<fieldset class="test3 test4">' +
+                    '<legend class="test1 test2">Fieldname</legend>' +
                     '<input type="checkbox" name="fieldname" id="id_fieldname_one" value="one" />' +
@@ -107,3 +109,5 @@ '<label for="id_fieldname_one">item one</label>' +
                 choices: {one: 'item one'},
-                widget: forms.widgets.multipleRadio()
+                widget: forms.widgets.multipleRadio(),
+                legendClasses: ['test1', 'test2'],
+                fieldsetClasses: ['test3', 'test4']
             })
@@ -114,4 +118,4 @@ });
             '<' + tag + ' class="field">' +
-                '<fieldset>' +
-                    '<legend>Fieldname</legend>' +
+                '<fieldset class="test3 test4">' +
+                    '<legend class="test1 test2">Fieldname</legend>' +
                     '<input type="radio" name="fieldname" id="id_fieldname_one" value="one" />' +
@@ -118,0 +122,0 @@ '<label for="id_fieldname_one">item one</label>' +

test/test-widgets.js

@@ -135,7 +135,7 @@ /*jslint node: true */
 test('multipleCheckbox', function (t) {
-    var w = forms.widgets.multipleCheckbox(),
-        field = {
-            choices: {one: 'Item one', two: 'Item two', three: 'Item three'},
-            value: 'two'
-        };
+    var w = forms.widgets.multipleCheckbox();
+    var field = {
+        choices: {one: 'Item one', two: 'Item two', three: 'Item three'},
+        value: 'two'
+    };
     t.equal(
@@ -151,2 +151,17 @@ w.toHTML('name', field),
     t.equal(forms.widgets.multipleCheckbox().type, 'multipleCheckbox');
+
+    t.test('label classes', function (st) {
+        var w = forms.widgets.multipleCheckbox({labelClasses: ['test1', 'test2', 'test3']});
+        t.equal(
+            w.toHTML('name', field),
+            '<input type="checkbox" name="name" id="id_name_one" value="one" />' +
+            '<label for="id_name_one" class="test1 test2 test3">Item one</label>' +
+            '<input type="checkbox" name="name" id="id_name_two" value="two" checked="checked" />' +
+            '<label for="id_name_two" class="test1 test2 test3">Item two</label>' +
+            '<input type="checkbox" name="name" id="id_name_three" value="three" />' +
+            '<label for="id_name_three" class="test1 test2 test3">Item three</label>'
+        );
+        st.end();
+    });
+
     t.end();
@@ -190,2 +205,17 @@ });
     t.equal(forms.widgets.multipleRadio().type, 'multipleRadio');
+
+    t.test('label classes', function (st) {
+        var w = forms.widgets.multipleRadio({labelClasses: ['test1', 'test2', 'test3']});
+        st.equal(
+            w.toHTML('name', field),
+            '<input type="radio" name="name" id="id_name_one" value="one" />' +
+            '<label for="id_name_one" class="test1 test2 test3">Item one</label>' +
+            '<input type="radio" name="name" id="id_name_two" value="two" checked="checked" />' +
+            '<label for="id_name_two" class="test1 test2 test3">Item two</label>' +
+            '<input type="radio" name="name" id="id_name_three" value="three" />' +
+            '<label for="id_name_three" class="test1 test2 test3">Item three</label>'
+        );
+        st.end();
+    });
+
     t.end();
@@ -192,0 +222,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143458

increased by1.73%

Lines of code

3494

increased by1.16%

Number of lines in readme file

369

increased by0.82%

Worsened metrics

Number of package files

26

decreased by-3.7%

No dependency changes