Skip to content

Commit 40a9d1d

Browse files
arschmitzarschmitz
committed
Controlgroup: Inital commit of new widget
This widget replaces the buttonset widget
1 parent 6e2bbca commit 40a9d1d

File tree

19 files changed

+820
-101
lines changed

19 files changed

+820
-101
lines changed

‎demos/button/icons.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ <h1>Widget</h1>
4141
<button>Button with icon on the right</button>
4242
<button>Button with icon on the top</button>
4343
<button>Button with icon on the bottom</button>
44+
<button>Button with icon on the top</button>
4445
</div>
4546
<div class="css">
4647
<h1>CSS</h1>

‎demos/controlgroup/default.html

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,22 @@
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( ".controlgroup" ).eq( 0 ).controlgroup()
20-
.end().eq( 1 ).controlgroup({
21-
"direction": "vertical"
22-
});
19+
$( ".controlgroup" ).controlgroup()
20+
$( ".controlgroup-vertical" ).controlgroup({
21+
"direction": "vertical"
22+
});
2323
});
2424
</script>
2525
<style>
2626
.ui-controlgroup-vertical {
27-
width: 300px;
28-
}
29-
.ui-controlgroup-vertical select {
30-
width: 100%;
27+
width: 150px;
3128
}
3229
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
3330
text-align: center;
3431
}
3532
</style>
3633
</head>
3734
<body>
38-
<div class="demo-description">
39-
<p>A Controlgroup featuring various form controls</p>
40-
</div>
4135
<div class="widget">
4236
<h1>Controlgroup</h1>
4337
<fieldset>
@@ -64,7 +58,7 @@ <h1>Controlgroup</h1>
6458
<br/>
6559
<fieldset>
6660
<legend>Rental Car</legend>
67-
<div class="controlgroup-horizontal">
61+
<div class="controlgroup-vertical">
6862
<select>
6963
<option>Compact car</option>
7064
<option>Midsize car</option>
@@ -83,8 +77,9 @@ <h1>Controlgroup</h1>
8377
<button>Book Now!</button>
8478
</div>
8579
</fieldset>
86-
>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
8780
</div>
88-
81+
<div class="demo-description">
82+
<p>A controlgroup featuring various form controls. The first features a horizontal toolbar like orientation, the second is in a space saving vertical orientation for usages like mobile devices and panels.</p>
83+
</div>
8984
</body>
9085
</html>

‎demos/controlgroup/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery UI Checkboxradio Demos</title>
6+
<title>jQuery UI Controlgroup Demos</title>
77
</head>
88
<body>
99

‎demos/controlgroup/splitbutton.html

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,19 @@
1919
$( "select" ).selectmenu({
2020
classes: {
2121
"ui-selectmenu-button": "ui-button-icon-only"
22+
},
23+
change: function(){
24+
$( ".output" ).append( "<li>" + this.value + "</li>" );
2225
}
23-
}).selectmenu( "widget" ).removeClass( "ui-icon-end" );
24-
$( ".controlgroup" ).controlgroup();
25-
$( "select" ).on( "selectmenuchange", function(){
26-
alert( this.value );
2726
});
27+
$( ".controlgroup" ).controlgroup();
2828
$( "button" ).click(function() {
29-
alert( "Running the last action" );
29+
$( ".output" ).append( "<li>Running Last Action...</li>" );
3030
});
3131
});
3232
</script>
33-
<style>
34-
select {
35-
width: 2em;
36-
}
37-
</style>
3833
</head>
3934
<body>
40-
<div class="demo-description">
41-
<p>A Controlgroup creating a split button</p>
42-
</div>
4335
<div class="widget">
4436
<h1>Split button</h1>
4537
<div class="controlgroup">
@@ -50,9 +42,12 @@ <h1>Split button</h1>
5042
<option>Delete</option>
5143
</select>
5244
</div>
45+
<br/>
46+
<h3>Output:</h3>
47+
<ul class="output"></ul>
5348
</div>
5449
<div class="demo-description">
55-
<p>A Controlgroup creating a split button</p>
50+
<p>A controlgroup creating a split button, by combining a button and a selectmenu. We adjust the classes option on the selectmenu to show only the icon</p>
5651
</div>
5752
</body>
5853
</html>

‎demos/controlgroup/toolbar.html

Lines changed: 71 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@
1919
var iframe = $( "<iframe id='display' contenteditable='true'>" ),
2020
contents = iframe.appendTo( "body" );
2121

22-
// Firefox and IE require us to wait for next tick before interacting with the iframe
22+
// Support: Firefox <= 36, IE <= 11
23+
// These browsers require us to wait for next tick before interacting with the iframe
2324
setTimeout(function(){
2425

25-
contents = contents.contents()
26+
contents = contents.contents();
2627
contents[ 0 ].designMode = "On";
2728
contents[ 0 ].contenteditable = true;
2829
contents.find( "body" ).append( $( "#input" ).clone().attr( "id", "output" ) );
@@ -43,7 +44,7 @@
4344
contents[ 0 ].execCommand( this.id );
4445
});
4546
$( "#fontsize, #forecolor, #hilitecolor, #backcolor, #fontname" ).on( "change selectmenuchange", function() {
46-
contents[ 0 ].execCommand( this.id ,false, $( this ).val() );
47+
contents[ 0 ].execCommand( this.id, false, $( this ).val() );
4748
});
4849
$( ".toolbar" ).controlgroup();
4950
$( "#zoom" ).on( "selectmenuchange", function() {
@@ -57,7 +58,7 @@
5758
</script>
5859
<style>
5960
#zoom, #fontsize {
60-
min-width:75px;
61+
min-width: 75px;
6162
}
6263
#input {
6364
display: none;
@@ -74,75 +75,72 @@
7475
</style>
7576
</head>
7677
<body>
77-
<div class="demo-description">
78-
<p>A sample editor toolbar</p>
79-
<p>Highlight text and edit it using the buttons and dropdowns in the toolbar</p>
80-
</div>
81-
<div class="toolbar">
82-
<button id="print">Print</button>
83-
<button id="undo">Undo</button>
84-
<button id="redo">Redo</button>
85-
<select id="zoom">
86-
<option>50%</option>
87-
<option>75%</option>
88-
<option>90%</option>
89-
<option selected>100%</option>
90-
<option>125%</option>
91-
<option>150%</option>
92-
<option>200%</option>
93-
</select>
94-
<select id="fontname">
95-
<option>Arial</option>
96-
<option>Comic Sans MS</option>
97-
<option>Courier New</option>
98-
<option>Georgia</option>
99-
<option>Impact</option>
100-
<option selected>Lucida Grande</option>
101-
<option>Times New Roman</option>
102-
<option>Verdana</option>
103-
</select>
104-
<select id="fontsize">
105-
<option value="1">8px</option>
106-
<option value="2">9px</option>
107-
<option value="3" selected>10px</option>
108-
<option value="4">11px</option>
109-
<option value="5">12px</option>
110-
<option value="6">14px</option>
111-
<option value="7">18px</option>
112-
<option value="8">24px</option>
113-
<option value="9">30px</option>
114-
<option value="10">36px</option>
115-
</select>
116-
<select id="hilitecolor">
117-
<option value="white">Highlight: None</option>
118-
<option value="red">Highlight: Red</option>
119-
<option value="yellow">Highlight: Yellow</option>
120-
<option value="green">Highlight: Green</option>
121-
<option value="blue">Highlight: Blue</option>
122-
<option value="grey">Highlight: Grey</option>
123-
<option value="purple">Highlight: Purple</option>
124-
<option value="orange">Highlight: Orange</option>
125-
</select>
126-
<select id="forecolor">
127-
<option value="white">Font: None</option>
128-
<option value="red">Font: Red</option>
129-
<option value="yellow">Font: Yellow</option>
130-
<option value="green">Font: Green</option>
131-
<option value="blue">Font: Blue</option>
132-
<option value="#ccc">Font: Grey</option>
133-
<option value="purple">Font: Purple</option>
134-
<option value="orange">Font: Orange</option>
135-
</select>
136-
<button id="bold">B</button>
137-
<button id="italic">I</button>
138-
<button id="underline">U</button>
78+
<div class="toolbar">
79+
<button id="print">Print</button>
80+
<button id="undo">Undo</button>
81+
<button id="redo">Redo</button>
82+
<select id="zoom">
83+
<option>50%</option>
84+
<option>75%</option>
85+
<option>90%</option>
86+
<option selected>100%</option>
87+
<option>125%</option>
88+
<option>150%</option>
89+
<option>200%</option>
90+
</select>
91+
<select id="fontname">
92+
<option>Arial</option>
93+
<option>Comic Sans MS</option>
94+
<option>Courier New</option>
95+
<option>Georgia</option>
96+
<option>Impact</option>
97+
<option selected>Lucida Grande</option>
98+
<option>Times New Roman</option>
99+
<option>Verdana</option>
100+
</select>
101+
<select id="fontsize">
102+
<option value="1">8px</option>
103+
<option value="2">9px</option>
104+
<option value="3" selected>10px</option>
105+
<option value="4">11px</option>
106+
<option value="5">12px</option>
107+
<option value="6">14px</option>
108+
<option value="7">18px</option>
109+
<option value="8">24px</option>
110+
<option value="9">30px</option>
111+
<option value="10">36px</option>
112+
</select>
113+
<select id="hilitecolor" title="Background color">
114+
<option value="white">Highlight: None</option>
115+
<option value="red">Highlight: Red</option>
116+
<option value="yellow">Highlight: Yellow</option>
117+
<option value="green">Highlight: Green</option>
118+
<option value="blue">Highlight: Blue</option>
119+
<option value="grey">Highlight: Grey</option>
120+
<option value="purple">Highlight: Purple</option>
121+
<option value="orange">Highlight: Orange</option>
122+
</select>
123+
<select id="forecolor">
124+
<option value="black" selected>Font: Black</option>
125+
<option value="white">Font: White</option>
126+
<option value="red">Font: Red</option>
127+
<option value="yellow">Font: Yellow</option>
128+
<option value="green">Font: Green</option>
129+
<option value="blue">Font: Blue</option>
130+
<option value="#ccc">Font: Grey</option>
131+
<option value="purple">Font: Purple</option>
132+
<option value="orange">Font: Orange</option>
133+
</select>
134+
<button id="bold">B</button>
135+
<button id="italic">I</button>
136+
<button id="underline">U</button>
139137

140-
</div>
141-
<br/><br/>
138+
</div>
139+
<br/><br/>
142140
<pre id="input">
143141
The Rime of the Ancient Mariner (text of 1834)
144142
BY SAMUEL TAYLOR COLERIDGE
145-
Argument
143+
Argument
146144

147145
How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
148146
and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and
@@ -252,5 +250,9 @@
252250
Why look'st thou so?'—With my cross-bow
253251
I shot the ALBATROSS.
254252
</pre>
253+
<div class="demo-description">
254+
<p>A sample editor toolbar</p>
255+
<p>Highlight text and edit it using the buttons and dropdowns in the toolbar</p>
256+
</div>
255257
</body>
256258
</html>

‎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 & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636
</style>
3737
<script src="../../external/requirejs/require.js"></script>
38-
<script src="../bootstrap.js" data-modules="button menu effect effect-blind">
38+
<script src="../bootstrap.js" data-modules="button controlgroup menu effect effect-blind">
3939
function notify( input ) {
4040
var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() );
4141
$( "<div>" )
@@ -70,8 +70,10 @@
7070
notify( button );
7171
});
7272
});
73-
$( ".set" ).buttonset({
74-
items: "button"
73+
$( ".set" ).controlgroup({
74+
items: {
75+
"button" : "button"
76+
}
7577
});
7678

7779
$( "button.menu" )

‎tests/unit/controlgroup/common.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
define( [
2+
"lib/common",
3+
"ui/controlgroup",
4+
"ui/checkboxradio",
5+
"ui/selectmenu",
6+
"ui/button"
7+
], function( common ) {
8+
9+
common.testWidget( "controlgroup", {
10+
defaults: {
11+
disabled: null,
12+
items: {
13+
"button": "input[type=button], input[type=submit], input[type=reset], button, a",
14+
"checkboxradio": "input[type='checkbox'], input[type='radio']",
15+
"selectmenu": "select"
16+
},
17+
direction: "horizontal",
18+
excludeInvisible: true,
19+
classes: {},
20+
21+
// Callbacks
22+
create: null
23+
}
24+
});
25+
26+
} );

‎tests/unit/controlgroup/controlgroup.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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="../../../external/requirejs/require.js"></script>
8+
<script src="../../lib/css.js" data-modules="core button checboxradio selectmenu controlgroup"></script>
9+
<script src="../../lib/bootstrap.js" data-modules="common core methods options"></script>
10+
</head>
11+
<body>
12+
13+
<div id="qunit"></div>
14+
<div id="qunit-fixture">
15+
<div class="controlgroup">
16+
<button style="display:none">Button with icon only</button>
17+
<select>
18+
<option>Fast</option>
19+
<option>Medium</option>
20+
<option>Slow</option>
21+
</select>
22+
<label for="checkbox">Checkbox</label>
23+
<input type="checkbox" value="checkbox" id="checkbox" />
24+
<select>
25+
<option>Fast</option>
26+
<option>Medium</option>
27+
<option>Slow</option>
28+
</select>
29+
<div class="test"></div>
30+
<button>Button with icon on the bottom</button>
31+
<select>
32+
<option>Fast</option>
33+
<option>Medium</option>
34+
<option>Slow</option>
35+
</select>
36+
</div>
37+
</div>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)