Skip to content

Commit 3048549

Browse files
arschmitzarschmitz
committed
Checkboxradio: inital commit of new widget
1 parent 3fd0b77 commit 3048549

File tree

15 files changed

+1019
-2
lines changed

15 files changed

+1019
-2
lines changed

‎demos/checkboxradio/default.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/checkboxradio.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "input" ).checkboxradio();
15+
});
16+
</script>
17+
</head>
18+
<body>
19+
<div class="widget">
20+
<h1>Checkbox and radio button widgets</h1>
21+
<h2>Checkbox</h2>
22+
23+
<label for="checkbox-1">Checkbox</label>
24+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
25+
<label>Checkbox nested in label
26+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
27+
</label>
28+
<h2>Radio Group</h2>
29+
30+
<label for="radio-1">One</label>
31+
<input type="radio" name="radio-1" id="radio-1">
32+
<label>Two
33+
<input type="radio" name="radio-1" id="radio-2">
34+
</label>
35+
<input type="radio" name="radio-1" id="radio-3">
36+
<label for="radio-3">Three</label>
37+
</div>
38+
39+
<div class="demo-description">
40+
<p>Examples of the markup that can be used with checkboxs and radio buttons.</p>
41+
</div>
42+
</body>
43+
</html>

‎demos/checkboxradio/icon.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Icon functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../ui/core.js"></script>
9+
<script src="../../ui/widget.js"></script>
10+
<script src="../../ui/checkboxradio.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "input" ).checkboxradio({
15+
icon: true
16+
});
17+
});
18+
</script>
19+
</head>
20+
<body>
21+
<div class="widget">
22+
<h1>Checkbox and radio button widgets</h1>
23+
<h2>Checkbox</h2>
24+
25+
<label for="checkbox-1">Checkbox</label>
26+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
27+
<label>Checkbox nested in label
28+
<input type="checkbox" name="checkbox-1" id="checkbox-1">
29+
</label>
30+
<h2>Radio Group</h2>
31+
32+
<label for="radio-1">One</label>
33+
<input type="radio" name="radio-1" id="radio-1">
34+
<label>Two
35+
<input type="radio" name="radio-1" id="radio-2">
36+
</label>
37+
<input type="radio" name="radio-1" id="radio-3">
38+
<label for="radio-3">Three</label>
39+
</div>
40+
41+
<div class="demo-description">
42+
<p>Examples of the markup that can be used with checkboxs and radio buttons.</p>
43+
</div>
44+
</body>
45+
</html>

‎tests/unit/checkboxradio/checkboxradio.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Checkboxradio Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script>
13+
TestHelpers.loadResources({
14+
css: [ "core", "ui.button", "ui.checkboxradio" ],
15+
js: [
16+
"ui/core.js",
17+
"ui/widget.js",
18+
"ui/checkboxradio.js"
19+
]
20+
});
21+
</script>
22+
23+
<script src="checkboxradio_common.js"></script>
24+
<script src="checkboxradio_core.js"></script>
25+
<script src="checkboxradio_methods.js"></script>
26+
<script src="checkboxradio_options.js"></script>
27+
<script src="../swarminject.js"></script>
28+
</head>
29+
<body>
30+
31+
<div id="qunit"></div>
32+
<div id="qunit-fixture">
33+
34+
<div id="radio0">
35+
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
36+
<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
37+
<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
38+
</div>
39+
<form>
40+
<div id="radio1" style="margin-top: 2em;">
41+
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
42+
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
43+
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
44+
</div>
45+
</form>
46+
<form>
47+
<div id="radio2" style="margin-top: 2em;">
48+
<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
49+
<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
50+
<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
51+
</div>
52+
</form>
53+
<form>
54+
<div id="radio3">
55+
<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
56+
<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
57+
<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
58+
</div>
59+
</form>
60+
61+
<input type="checkbox" id="check"><label for="check">Toggle</label>
62+
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
63+
<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
64+
<input type="checkbox" id="checkbox-method-refresh"/>
65+
<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
66+
<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
67+
<label for="checkbox-method-disable">checkbox refresh</label>
68+
<input type="checkbox" class="foo" id="checkbox-method-disable"/>
69+
70+
<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
71+
<input type="radio" id="radio-method-refresh"/>
72+
<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
73+
<input type="radio" class="foo" id="radio-method-destroy"/>
74+
<label for="radio-method-disable">radio refresh</label>
75+
<input type="radio" class="foo" id="radio-method-disable"/>
76+
77+
<label for="checkbox-option-disabled">checkbox disabled</label>
78+
<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
79+
<label for="checkbox-option-icon">checkbox icon</label>
80+
<input type="checkbox" class="foo" id="checkbox-option-icon"/>
81+
<label for="checkbox-option-label">checkbox label</label>
82+
<input type="checkbox" class="foo" id="checkbox-option-label"/>
83+
</div>
84+
</body>
85+
</html>

‎tests/unit/checkboxradio/checkboxradio_common.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
TestHelpers.commonWidgetTests( "checkboxradio", {
2+
defaults: {
3+
disabled: null,
4+
label: null,
5+
icon: false,
6+
7+
// Callbacks
8+
create: null
9+
}
10+
});

‎tests/unit/checkboxradio/checkboxradio_core.js

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
* checkboxradio_core.js
3+
*/
4+
5+
6+
(function($) {
7+
8+
module("Checkboxradio: core");
9+
test("Checkbox", function() {
10+
expect( 4 );
11+
var input = $("#check"),
12+
label = $("label[for=check]");
13+
ok( input.is( ":visible" ) );
14+
ok( !label.hasClass(".ui-button)") );
15+
input.checkboxradio();
16+
strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" );
17+
strictEqual( label.attr( "class" ), "ui-button ui-widget ui-corner-all ui-checkbox-label" );
18+
});
19+
20+
test("Radios", function() {
21+
expect( 4 );
22+
var inputs = $("#radio0 input"),
23+
labels = $("#radio0 label");
24+
ok( inputs.is(":visible") );
25+
ok( labels.is(":not(.ui-button)") );
26+
inputs.checkboxradio();
27+
ok( inputs.is(".ui-helper-hidden-accessible") );
28+
ok( labels.is(".ui-button") );
29+
});
30+
31+
function assert(noForm, form1, form2) {
32+
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
33+
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
34+
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
35+
}
36+
37+
test("radio groups", function() {
38+
expect( 12 );
39+
$("input[type=radio]").checkboxradio();
40+
assert(":eq(0)", ":eq(1)", ":eq(2)");
41+
42+
// click outside of forms
43+
$("#radio0 .ui-button:eq(1)").simulate("click");
44+
assert(":eq(1)", ":eq(1)", ":eq(2)");
45+
46+
// click in first form
47+
$("#radio1 .ui-button:eq(0)").simulate("click");
48+
assert(":eq(1)", ":eq(0)", ":eq(2)");
49+
50+
// click in second form
51+
$("#radio2 .ui-button:eq(0)").simulate("click");
52+
assert(":eq(1)", ":eq(0)", ":eq(0)");
53+
});
54+
55+
asyncTest( "Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
56+
expect( 2 );
57+
var check = $( "#check" ).checkboxradio(),
58+
label = $( "label[for='check']" );
59+
ok( !label.is( ".ui-state-focus" ) );
60+
check.focus();
61+
setTimeout(function() {
62+
ok( label.is( ".ui-state-focus" ) );
63+
start();
64+
});
65+
});
66+
67+
// TODO: simulated click events don't behave like real click events in IE
68+
// remove this when simulate properly simulates this
69+
// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
70+
if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
71+
asyncTest( "Ensure checked after single click on checkbox label button", function() {
72+
expect( 2 );
73+
74+
$( "#check2" ).checkboxradio().change( function() {
75+
var label = $( this ).checkboxradio( "widget" );
76+
ok( this.checked, "checked ok" );
77+
78+
// The following test is commented out for now because with new markup we are trying to avoid aria
79+
//ok( lbl.attr("aria-pressed") === "true", "aria ok" );
80+
ok( label.hasClass( "ui-state-active" ), "ui-state-active ok" );
81+
});
82+
83+
// Support: Opera
84+
// Opera doesn't trigger a change event when this is done synchronously.
85+
// This seems to be a side effect of another test, but until that can be
86+
// tracked down, this delay will have to do.
87+
setTimeout(function() {
88+
$( "#check2" ).checkboxradio( "widget" ).simulate( "click" );
89+
start();
90+
}, 1 );
91+
});
92+
}
93+
test( "Checkbox creation that requires a matching label does not find label in all cases", function() {
94+
expect( 5 );
95+
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
96+
group.find( "input[type=checkbox]" ).checkboxradio();
97+
ok( group.find( "label" ).is( ".ui-button" ) );
98+
99+
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
100+
group.filter( "input[type=checkbox]" ).checkboxradio();
101+
ok( group.filter( "label" ).is( ".ui-button" ) );
102+
103+
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
104+
group.find( "input[type=checkbox]" ).checkboxradio();
105+
ok( group.filter( "label" ).is( ".ui-button" ) );
106+
107+
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
108+
group.find( "input[type=checkbox]" ).checkboxradio();
109+
ok( group.find( "label" ).is( ".ui-button" ) );
110+
111+
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
112+
group.filter( "input[type=checkbox]" ).checkboxradio();
113+
ok( group.find( "label" ).is( ".ui-button" ) );
114+
});
115+
116+
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {
117+
expect( 2 );
118+
var form = $( "<form>" +
119+
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
120+
"</form>" ),
121+
checkbox = form.find( "input[type=checkbox]" ).checkboxradio();
122+
123+
checkbox.prop( "checked", false ).checkboxradio( "refresh" );
124+
ok( !checkbox.checkboxradio( "widget" ).hasClass( "ui-state-active" ) );
125+
126+
form.get( 0 ).reset();
127+
128+
setTimeout(function() {
129+
ok( checkbox.checkboxradio( "widget" ).hasClass( "ui-state-active" ));
130+
start();
131+
}, 1 );
132+
});
133+
test( "Checkbox label selector works for ids with \":\"", function() {
134+
expect( 1 );
135+
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
136+
group.find( "input" ).checkboxradio();
137+
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
138+
});
139+
140+
})(jQuery);

0 commit comments

Comments
 (0)