Skip to content

Commit 4657d02

Browse files
arschmitzarschmitz
committed
Controlgroup: add classes option
1 parent d2fc8e6 commit 4657d02

File tree

8 files changed

+184
-61
lines changed

8 files changed

+184
-61
lines changed

‎demos/controlgroup/default.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@
2020
<link rel="stylesheet" href="../demos.css">
2121
<script>
2222
$(function() {
23-
$( ".controlgroup" ).eq( 0 ).controlgroup()
24-
.end().eq( 1 ).controlgroup({
25-
"direction": "vertical"
26-
});
23+
$( "#insurance, #insurance-v" ).checkboxradio({ icon: true });
24+
$( ".controlgroup" ).controlgroup()
25+
$( ".controlgroup-vertical" ).controlgroup({
26+
"direction": "vertical"
27+
});
2728
});
2829
</script>
2930
<style>
@@ -72,7 +73,7 @@ <h1>Controlgroup</h1>
7273
<br/>
7374
<fieldset>
7475
<legend>Rental Car</legend>
75-
<div class="controlgroup-horizontal">
76+
<div class="controlgroup-vertical">
7677
<select>
7778
<option>Compact car</option>
7879
<option>Midsize car</option>
@@ -91,7 +92,6 @@ <h1>Controlgroup</h1>
9192
<button>Book Now!</button>
9293
</div>
9394
</fieldset>
94-
>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
9595
</div>
9696

9797
=======

‎demos/controlgroup/splitbutton.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@
3737
</style>
3838
</head>
3939
<body>
40-
<div class="demo-description">
41-
<p>A Controlgroup creating a split button</p>
42-
</div>
4340
<div class="widget">
4441
<h1>Split button</h1>
4542
<div class="controlgroup">

‎demos/controlgroup/toolbar.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
<option value="9">30px</option>
114114
<option value="10">36px</option>
115115
</select>
116-
<select id="hilitecolor">
116+
<select id="hilitecolor" title="Background color">
117117
<option value="white">Highlight: None</option>
118118
<option value="red">Highlight: Red</option>
119119
<option value="yellow">Highlight: Yellow</option>
@@ -124,7 +124,8 @@
124124
<option value="orange">Highlight: Orange</option>
125125
</select>
126126
<select id="forecolor">
127-
<option value="white">Font: None</option>
127+
<option value="black" selected>Font: Black</option>
128+
<option value="white">Font: White</option>
128129
<option value="red">Font: Red</option>
129130
<option value="yellow">Font: Yellow</option>
130131
<option value="green">Font: Green</option>

‎tests/unit/controlgroup/controlgroup.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,49 @@
5656
<option>Slow</option>
5757
</select>
5858
</div>
59+
<div class="controlgroup-custom-selector">
60+
<button style="display:none">Button with icon only</button>
61+
<select>
62+
<option>Fast</option>
63+
<option>Medium</option>
64+
<option>Slow</option>
65+
</select>
66+
<label for="checkbox-selector">Checkbox</label>
67+
<input type="checkbox" value="checkbox" id="checkbox-selector" />
68+
<select>
69+
<option>Fast</option>
70+
<option>Medium</option>
71+
<option>Slow</option>
72+
</select>
73+
<a href="#" class="button">Button with icon on the bottom</a>
74+
<select>
75+
<option>Fast</option>
76+
<option>Medium</option>
77+
<option>Slow</option>
78+
</select>
79+
</div>
80+
<div class="controlgroup-custom-widget">
81+
<button style="display:none">Button with icon only</button>
82+
<select>
83+
<option>Fast</option>
84+
<option>Medium</option>
85+
<option>Slow</option>
86+
</select>
87+
<div class="test"></div>
88+
<label for="checkbox-widget">Checkbox</label>
89+
<input type="checkbox" value="checkbox" id="checkbox-widget" />
90+
<select>
91+
<option>Fast</option>
92+
<option>Medium</option>
93+
<option>Slow</option>
94+
</select>
95+
<a href="#" class="button">Button with icon on the bottom</a>
96+
<select>
97+
<option>Fast</option>
98+
<option>Medium</option>
99+
<option>Slow</option>
100+
</select>
101+
</div>
59102
</div>
60103
</body>
61104
</html>

‎tests/unit/controlgroup/controlgroup_common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ TestHelpers.commonWidgetTests( "controlgroup", {
88
},
99
direction: "horizontal",
1010
excludeInvisible: true,
11+
classes: {
12+
"ui-controlgroup": "",
13+
"ui-controlgroup-horizontal": "",
14+
"ui-controlgroup-vertical": ""
15+
},
1116

1217
// Callbacks
1318
create: null

‎tests/unit/controlgroup/controlgroup_options.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,39 @@ test( "items", function() {
5252
expect( 2 );
5353
});
5454

55+
test( "items: custom selector", function() {
56+
var element = $( ".controlgroup-custom-selector" ).controlgroup({
57+
items: {
58+
"button": ".button"
59+
}
60+
});
61+
strictEqual( element.children( ".ui-button" ).length, 5,
62+
"Correct child widgets are called when custom selector used" );
63+
expect( 1 );
64+
});
65+
66+
$.widget( "ui.test", {
67+
_create: function (){
68+
this.element.addClass( "ui-test ui-button" );
69+
},
70+
refresh: function() {
71+
return;
72+
}
73+
});
74+
test( "items: custom widget", function() {
75+
var element = $( ".controlgroup-custom-widget" ).controlgroup({
76+
items: {
77+
"test": ".test"
78+
}
79+
});
80+
81+
strictEqual( element.children( ".ui-button" ).length, 7,
82+
"Correct child widgets are called when custom selector used" );
83+
strictEqual( element.children( ".ui-test" ).length, 1,
84+
"Custom widget called" );
85+
expect( 2 );
86+
});
87+
5588
test( "excludeInvisible", function() {
5689
var element = $( ".controlgroup" ).controlgroup(),
5790
buttons = element.children( ".ui-button" );

‎themes/base/controlgroup.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111

1212

1313
.ui-controlgroup > .ui-button {
14-
margin-left: -2px;
15-
margin-right: -1px;
14+
margin-left: -.14em;
15+
margin-right: -.14em;
1616
}
1717
.ui-controlgroup.ui-controlgroup-vertical > .ui-button {
1818
display: block;
1919
width: 100%;
20-
margin-top: -1px;
21-
margin-bottom: -1px;
20+
margin-top: 0;
21+
margin-bottom: 0;
2222
text-align: left;
2323
}
2424
.ui-controlgroup-vertical label.ui-button {

‎ui/controlgroup.js

Lines changed: 90 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -35,52 +35,19 @@ $.widget( "ui.controlgroup", {
3535
"selectmenu": "select"
3636
},
3737
direction: "horizontal",
38-
excludeInvisible: true
38+
excludeInvisible: true,
39+
classes: {
40+
"ui-controlgroup": "",
41+
"ui-controlgroup-horizontal": "",
42+
"ui-controlgroup-vertical": ""
43+
}
3944
},
4045

4146
_create: function() {
4247
this._enhance();
43-
this._on( this.element, {
44-
"selectmenuopen": "_handleSelectmenuOpen",
45-
"selectmenuclose": "_handleSelectmenuClose"
46-
});
47-
},
48-
49-
_handleSelectmenuOpen: function( event ) {
50-
var target = $( event.target ),
51-
widget = target.selectmenu ( "widget" ),
52-
vertical = this.options.direction === "vertical";
53-
if ( widget[ 0 ] !== this.first[ 0 ] || !vertical ) {
54-
widget.removeClass( "ui-corner-top" );
55-
}
56-
if ( vertical && widget[ 0 ] === this.last[ 0 ] ) {
57-
widget.removeClass( "ui-corner-bottom" );
58-
}
59-
if ( widget[ 0 ] === this.first[ 0 ] ) {
60-
widget.removeClass( "ui-corner-left" )
61-
.addClass( "ui-corner-" + ( vertical ? "top" : "tl" ) );
62-
}
63-
if ( widget[ 0 ] === this.last[ 0 ] ) {
64-
widget.removeClass( "ui-corner-right" )
65-
.addClass( vertical ? "" : "ui-corner-tr" );
66-
}
67-
},
68-
69-
_handleSelectmenuClose: function( event ) {
70-
var target = $( event.target ),
71-
widget = target.selectmenu ( "widget" ),
72-
vertical = this.options.direction === "vertical";
73-
widget.removeClass( "ui-corner-all" );
74-
if ( widget[ 0 ] === this.first[ 0 ] ) {
75-
widget.removeClass( "ui-corner-left" )
76-
.addClass( "ui-corner-" + ( vertical ? "top" : "left" ) );
77-
}
78-
if ( widget[ 0 ] === this.last[ 0 ] ) {
79-
widget.removeClass( "ui-corner-right" )
80-
.addClass( vertical ? "ui-corner-bottom" : "ui-corner-right" );
81-
}
8248
},
8349

50+
// To support enhanced option in jQuery mobile we isolate dom manipulation here
8451
_enhance: function() {
8552
this.element.attr( "role", "toolbar" );
8653
this.refresh();
@@ -89,20 +56,75 @@ $.widget( "ui.controlgroup", {
8956
_destroy: function() {
9057
this._callChildMethod( "destroy" );
9158
this.element.removeAttr( "role" );
92-
this.element.removeClass( "ui-controlgroup ui-selectmenu-vertical ui-controlgroup-horizontal" )
93-
.children().removeClass( "ui-corner-all ui-corner-top" +
59+
this.element.removeClass(
60+
this._classes( "ui-controlgroup ui-controlgroup-vertical ui-controlgroup-horizontal" )
61+
).children().removeClass( "ui-corner-all ui-corner-top" +
9462
" ui-corner-bottom ui-corner-left ui-corner-tl ui-corner-tr" );
9563
},
9664

9765
_callChildMethod: function( method, filter ) {
9866
var that = this;
9967
$.each( this.options.items, function( widget, selector ) {
68+
var options = {};
69+
switch ( widget ) {
70+
case "button":
71+
options.classes = {
72+
"ui-button": null
73+
};
74+
break;
75+
case "checkboxradio":
76+
options.classes = {
77+
"ui-checkbox-label": null,
78+
"ui-radio-label": null
79+
};
80+
break;
81+
case "selectmenu":
82+
options.classes = {
83+
"ui-selectmenu-button-open": null,
84+
"ui-selectmenu-button-closed": null
85+
};
86+
break;
87+
}
10088
if ( $.fn[ widget ] && selector ) {
101-
that.element.children( selector ).not( filter )[ widget ]( method );
89+
that.element.children( selector ).not( filter )[ widget ]( method ?
90+
method : options );
10291
}
10392
});
10493
},
10594

95+
_button_options: function() {
96+
return {
97+
classes: {
98+
"ui-button": ""
99+
}
100+
};
101+
},
102+
103+
_checkboxradio_options: function() {
104+
return {
105+
classes: {
106+
"ui-checkbox-label": "",
107+
"ui-radio-label": ""
108+
}
109+
};
110+
},
111+
112+
_selectmenu_options: function() {
113+
return {
114+
classes: {
115+
"ui-selectmenu-button-open": "",
116+
"ui-selectmenu-button-closed": ""
117+
}
118+
};
119+
},
120+
121+
_elementsFromClassKey: function( classKey ) {
122+
if ( this.options.direction !== classKey.split( "-" )[ 2 ] ) {
123+
return $();
124+
}
125+
return this._superApply( arguments );
126+
},
127+
106128
_setOption: function( key, value ) {
107129
var original = this.options[ key ];
108130

@@ -120,8 +142,11 @@ $.widget( "ui.controlgroup", {
120142
},
121143

122144
refresh: function() {
123-
var vertical = ( this.options.direction === "vertical" );
124-
this.element.addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction );
145+
var firstClasses = {},
146+
lastClasses = {},
147+
vertical = ( this.options.direction === "vertical" );
148+
this.element.addClass( this._classes( "ui-controlgroup ui-controlgroup-" +
149+
this.options.direction ) );
125150
this._callChildMethod( undefined );
126151
this.visible = this.element.children( ".ui-button" ).removeClass( function(index, css) {
127152
return ( css.match( /ui-corner-[a-z]*/g ) || [] ).join( " " );
@@ -131,7 +156,26 @@ $.widget( "ui.controlgroup", {
131156
.addClass( "ui-corner-" + ( vertical ? "top" : "left" ) );
132157
this.last = this.visible.filter( ":last" )
133158
.addClass( "ui-corner-" + ( vertical ? "bottom" : "right" ) );
134-
this.element.find( this.options.items.selectmenu ).selectmenu( "refresh" );
159+
if ( $.ui.selectmenu ) {
160+
if ( this.first.is( ".ui-selectmenu-button" ) && !vertical ) {
161+
firstClasses[ "ui-selectmenu-button-open" ] = "ui-corner-tl";
162+
firstClasses[ "ui-selectmenu-button-closed" ] = "ui-corner-left";
163+
$( "#" + this.first.attr( "id" ).replace( /-button/, "" ) )
164+
.selectmenu( "option", "classes", firstClasses );
165+
}
166+
if ( this.last.is( ".ui-selectmenu-button" ) ) {
167+
if ( vertical ) {
168+
lastClasses[ "ui-selectmenu-button-open" ] = null;
169+
lastClasses[ "ui-selectmenu-button-closed" ] = "ui-corner-bottom";
170+
} else {
171+
lastClasses[ "ui-selectmenu-button-open" ] = "ui-corner-tr";
172+
lastClasses[ "ui-selectmenu-button-closed" ] = "ui-corner-right";
173+
}
174+
$( "#" + this.last.attr( "id" ).replace( /-button/, "" ) )
175+
.selectmenu( "option", "classes", lastClasses );
176+
}
177+
this.element.find( this.options.items.selectmenu ).selectmenu( "refresh" );
178+
}
135179
this._callChildMethod( "refresh" );
136180

137181
}

0 commit comments

Comments
 (0)