Skip to content

Commit d2fc8e6

Browse files
arschmitzarschmitz
committed
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
1 parent ceaee76 commit d2fc8e6

File tree

16 files changed

+690
-29
lines changed

16 files changed

+690
-29
lines changed

‎demos/button/icons.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ <h1>Widget</h1>
3636
<button>Button with icon on the left</button>
3737
<button>Button with icon on the right</button>
3838
<button>Button with icon on the bottom</button>
39+
<button>Button with icon on the top</button>
3940
</div>
4041
<div class="css">
4142
<h1>CSS</h1>

‎demos/controlgroup/default.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<<<<<<< HEAD
56
<title>jQuery UI Controlgroup - Default Functionality</title>
7+
=======
8+
<title>jQuery UI Controlgroup - Default Funstionality</title>
9+
>>>>>>> 14168e2... Controlgroup: Inital commit of new widget
610
<link rel="stylesheet" href="../../themes/base/all.css">
711
<script src="../../external/jquery/jquery.js"></script>
812
<script src="../../ui/core.js"></script>
@@ -29,13 +33,17 @@
2933
.ui-controlgroup-vertical select {
3034
width: 100%;
3135
}
36+
<<<<<<< HEAD
3237
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
3338
text-align: center;
3439
}
40+
=======
41+
>>>>>>> 14168e2... Controlgroup: Inital commit of new widget
3542
</style>
3643
</head>
3744
<body>
3845
<div class="demo-description">
46+
<<<<<<< HEAD
3947
<p>A Controlgroup featuring various form controls</p>
4048
</div>
4149
<div class="widget">
@@ -86,5 +94,101 @@ <h1>Controlgroup</h1>
8694
>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
8795
</div>
8896

97+
=======
98+
<p>Some buttons with various combinations of text and icons.</p>
99+
</div>
100+
<div class="widget">
101+
<h1>Widget</h1>
102+
<div class="controlgroup">
103+
<button style="display:none">Button with icon only</button>
104+
<select>
105+
<option>Fast</option>
106+
<option>Medium</option>
107+
<option>Slow</option>
108+
</select>
109+
<label for="checkbox">Checkbox</label>
110+
<input type="checkbox" value="checkbox" id="checkbox" />
111+
<select>
112+
<option>Fast</option>
113+
<option>Medium</option>
114+
<option>Slow</option>
115+
</select>
116+
<button>Button with icon on the bottom</button>
117+
<select>
118+
<option>Fast</option>
119+
<option>Medium</option>
120+
<option>Slow</option>
121+
</select>
122+
</div>
123+
<br/>
124+
<div class="controlgroup">
125+
<button style="display:none">Button with icon only</button>
126+
<select>
127+
<option>Fast</option>
128+
<option>Medium</option>
129+
<option>Slow</option>
130+
</select>
131+
<label for="checkbox2">Checkbox</label>
132+
<input type="checkbox" value="checkbox2" id="checkbox2" />
133+
<select>
134+
<option>Fast</option>
135+
<option>Medium</option>
136+
<option>Slow</option>
137+
</select>
138+
<button>Button with icon on the bottom</button>
139+
<select>
140+
<option>Fast</option>
141+
<option>Medium</option>
142+
<option>Slow</option>
143+
</select>
144+
</div>
145+
</div>
146+
<div class="css">
147+
<h1>CSS</h1>
148+
<div class="ui-controlgroup">
149+
<button class="ui-button ui-widget ui-corner-left ui-button-icon-only" title="Button with icon only">
150+
<span class="ui-icon ui-icon-gear"></span>
151+
Button with icon only
152+
</button>
153+
<button class="ui-button ui-widget ui-icon-beginning">
154+
<span class="ui-icon ui-icon-triangle-1-w"></span>
155+
Button with icon on the left
156+
</button>
157+
<button class="ui-button ui-widget ui-icon-end">
158+
<span class="ui-icon ui-icon-triangle-1-e"></span>
159+
Button with icon on the right
160+
</button>
161+
<button class="ui-button ui-widget">
162+
Button with icon on bottom
163+
</button>
164+
<button class="ui-button ui-widget ui-corner-right">
165+
Button with icon on top
166+
</button>
167+
</div>
168+
<br/>
169+
<div class="ui-controlgroup ui-controlgroup-vertical">
170+
<button class="ui-button ui-widget ui-corner-top ui-button-icon-only" title="Button with icon only">
171+
<span class="ui-icon ui-icon-gear"></span>
172+
Button with icon only
173+
</button>
174+
<button class="ui-button ui-widget ui-icon-beginning">
175+
<span class="ui-icon ui-icon-triangle-1-w"></span>
176+
Button with icon on the left
177+
</button>
178+
<button class="ui-button ui-widget ui-icon-end">
179+
<span class="ui-icon ui-icon-triangle-1-e"></span>
180+
Button with icon on the right
181+
</button>
182+
<button class="ui-button ui-widget ui-icon-bottom">
183+
<span class="ui-icon ui-icon-triangle-1-s"></span>
184+
Button with icon on bottom
185+
</button>
186+
<button class="ui-button ui-widget ui-corner-bottom ui-icon-top">
187+
<span class="ui-icon ui-icon-triangle-1-n"></span>
188+
Button with icon on top
189+
</button>
190+
</div>
191+
</div>
192+
>>>>>>> 14168e2... Controlgroup: Inital commit of new widget
89193
</body>
90194
</html>

‎demos/controlgroup/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99

1010
<ul>
1111
<li><a href="default.html">Default functionality</a></li>
12+
<<<<<<< HEAD
1213
<li><a href="splitbutton.html">Split Button</a></li>
14+
=======
15+
>>>>>>> c21dcbd... Controlgroup: Updating last refrences from buttonset to controlgroup
1316
<li><a href="toolbar.html">Toolbar</a></li>
1417
</ul>
1518

‎demos/controlgroup/toolbar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
<pre id="input">
143143
The Rime of the Ancient Mariner (text of 1834)
144144
BY SAMUEL TAYLOR COLERIDGE
145-
Argument
145+
Argument
146146

147147
How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
148148
and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and

‎demos/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<li><a href="autocomplete/">autocomplete</a></li>
1313
<li><a href="button/">button</a></li>
1414
<li><a href="checkboxradio/">checkboxradio</a></li>
15+
<li><a href="controlgroup/">controlgroup</a></li>
1516
<li><a href="datepicker/">datepicker</a></li>
1617
<li><a href="dialog/">dialog</a></li>
1718
<li><a href="draggable/">draggable</a></li>

‎demos/tooltip/video-player.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<script src="../../ui/position.js"></script>
1111
<script src="../../ui/tooltip.js"></script>
1212
<script src="../../ui/button.js"></script>
13+
<script src="../../ui/controlgroup.js"></script>
1314
<script src="../../ui/menu.js"></script>
1415
<script src="../../ui/effect.js"></script>
1516
<script src="../../ui/effect-blind.js"></script>
@@ -78,8 +79,10 @@
7879
notify( button );
7980
});
8081
});
81-
$( ".set" ).buttonset({
82-
items: "button"
82+
$( ".set" ).controlgroup({
83+
items: {
84+
"button" : "button"
85+
}
8386
});
8487

8588
$( "button.menu" )

‎tests/unit/controlgroup/controlgroup.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Controlgroup 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", "button", "menu", "selectmenu", "checkboxradio", "controlgroup" ],
15+
js: [
16+
"ui/core.js",
17+
"ui/widget.js",
18+
"ui/button.js",
19+
"ui/menu.js",
20+
"ui/position.js",
21+
"ui/selectmenu.js",
22+
"ui/checkboxradio.js",
23+
"ui/controlgroup.js",
24+
]
25+
});
26+
</script>
27+
28+
<script src="controlgroup_common.js"></script>
29+
<script src="controlgroup_methods.js"></script>
30+
<script src="controlgroup_core.js"></script>
31+
<script src="controlgroup_options.js"></script>
32+
<script src="../swarminject.js"></script>
33+
</head>
34+
<body>
35+
36+
<div id="qunit"></div>
37+
<div id="qunit-fixture">
38+
<div class="controlgroup">
39+
<button style="display:none">Button with icon only</button>
40+
<select>
41+
<option>Fast</option>
42+
<option>Medium</option>
43+
<option>Slow</option>
44+
</select>
45+
<label for="checkbox">Checkbox</label>
46+
<input type="checkbox" value="checkbox" id="checkbox" />
47+
<select>
48+
<option>Fast</option>
49+
<option>Medium</option>
50+
<option>Slow</option>
51+
</select>
52+
<button>Button with icon on the bottom</button>
53+
<select>
54+
<option>Fast</option>
55+
<option>Medium</option>
56+
<option>Slow</option>
57+
</select>
58+
</div>
59+
</div>
60+
</body>
61+
</html>

‎tests/unit/controlgroup/controlgroup_common.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
TestHelpers.commonWidgetTests( "controlgroup", {
2+
defaults: {
3+
disabled: null,
4+
items: {
5+
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
6+
"checkboxradio": "input[type='checkbox'], input[type='radio']",
7+
"selectmenu": "select"
8+
},
9+
direction: "horizontal",
10+
excludeInvisible: true,
11+
12+
// Callbacks
13+
create: null
14+
}
15+
});

‎tests/unit/controlgroup/controlgroup_core.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
module( "Controlgroup: Core" );
2+
3+
function hasCornerClass( className, element ) {
4+
if ( className ) {
5+
return element.hasClass( className );
6+
}
7+
8+
return element.attr( "class" ).match( /ui-corner/g );
9+
}
10+
11+
test( "selectmenu: open/close corners", function() {
12+
expect( 1 );
13+
var element = $( ".controlgroup" ).controlgroup(),
14+
selects = element.find( "select" ),
15+
selectButton = selects.eq( 0 ).selectmenu( "widget" );
16+
17+
expect( 12 );
18+
19+
selects.eq( 0 ).selectmenu( "open" );
20+
21+
strictEqual( selectButton.hasClass( "ui-corner-tl" ), true,
22+
"Horizontal: First selectmenu gets ui-corner-tl when opened" );
23+
24+
selects.eq( 0 ).selectmenu( "close" );
25+
26+
strictEqual( selectButton.hasClass( "ui-corner-left" ), true,
27+
"Horizontal: First selectmenu gets ui-corner-left when closed" );
28+
29+
selectButton = selects.eq( 1 ).selectmenu( "widget" );
30+
31+
selects.eq( 1 ).selectmenu( "open" );
32+
33+
strictEqual( !!hasCornerClass( false, selectButton ), false,
34+
"Horizontal: Middle selectmenu does not get corner class when opened" );
35+
36+
selects.eq( 1 ).selectmenu( "close" );
37+
38+
strictEqual( !!hasCornerClass( false, selectButton ), false,
39+
"Horizontal: Middle selectmenu does not get corner class when closed" );
40+
41+
selectButton = selects.eq( 2 ).selectmenu( "widget" );
42+
43+
selects.eq( 2 ).selectmenu( "open" );
44+
45+
strictEqual( selectButton.hasClass( "ui-corner-tr" ), true,
46+
"Horizontal: Last selectmenu gets ui-corner-tr when opened" );
47+
48+
selects.eq( 2 ).selectmenu( "close" );
49+
50+
strictEqual( selectButton.hasClass( "ui-corner-right" ), true,
51+
"Horizontal: Last selectmenu gets ui-corner-right when closed" );
52+
53+
element.controlgroup( "option", "direction", "vertical" );
54+
selectButton = selects.eq( 0 ).selectmenu( "widget" );
55+
56+
selects.eq( 0 ).selectmenu( "open" );
57+
58+
strictEqual( selectButton.hasClass( "ui-corner-top" ), true,
59+
"vertical: First selectmenu gets ui-corner-top when opened" );
60+
61+
selects.eq( 0 ).selectmenu( "close" );
62+
63+
strictEqual( selectButton.hasClass( "ui-corner-top" ), true,
64+
"vertical: First selectmenu gets ui-corner-top when closed" );
65+
66+
selectButton = selects.eq( 1 ).selectmenu( "widget" );
67+
68+
selects.eq( 1 ).selectmenu( "open" );
69+
70+
strictEqual( !!hasCornerClass( false, selectButton ), false,
71+
"vertical: Middle selectmenu does not get corner class when opened" );
72+
73+
selects.eq( 1 ).selectmenu( "close" );
74+
75+
strictEqual( !!hasCornerClass( false, selectButton ), false,
76+
"vertical: Middle selectmenu does not get corner class when closed" );
77+
78+
selectButton = selects.eq( 2 ).selectmenu( "widget" );
79+
80+
selects.eq( 2 ).selectmenu( "open" );
81+
82+
strictEqual( !!hasCornerClass( false, selectButton ), false,
83+
"vertical: Last selectmenu does not get corner class when opened" );
84+
85+
selects.eq( 2 ).selectmenu( "close" );
86+
87+
strictEqual( selectButton.hasClass( "ui-corner-bottom" ), true,
88+
"vertical: Last selectmenu gets ui-corner-bottom when closed" );
89+
});

0 commit comments

Comments
 (0)