Skip to content

Commit 4fb7351

Browse files
committed
Selectmenu: Add classes option
1 parent e0853bc commit 4fb7351

File tree

3 files changed

+61
-17
lines changed

3 files changed

+61
-17
lines changed

tests/unit/selectmenu/selectmenu_common.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
TestHelpers.commonWidgetTests( "selectmenu", {
22
defaults: {
33
appendTo: null,
4+
classes: {
5+
"ui-selectmenu-button": "",
6+
"ui-selectmenu-button-open": "ui-corner-top",
7+
"ui-selectmenu-button-closed": "ui-corner-all",
8+
"ui-selectmenu-text": "",
9+
"ui-selectmenu-menu": "",
10+
"ui-selectmenu-optgroup": "",
11+
"ui-selectmenu-open": ""
12+
},
413
disabled: null,
514
icons: {
615
button: "ui-icon-triangle-1-s"

tests/unit/selectmenu/selectmenu_core.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22

33
module( "selectmenu: core" );
44

5+
test( "markup structure", function() {
6+
var element = $( "#files" ).selectmenu(),
7+
button = element.selectmenu( "widget" ),
8+
menu = element.selectmenu( "menuWidget" ),
9+
menuWrap = menu.parent();
10+
11+
expect( 4 );
12+
ok( button.is( ".ui-selectmenu-button.ui-selectmenu-button-closed.ui-widget.ui-state-default" ),
13+
"button has proper classes" );
14+
ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" );
15+
16+
ok( menuWrap.hasClass( "ui-selectmenu-menu" ), "menu is .ui-selectmenu-menu" );
17+
ok( !menuWrap.hasClass( "ui-selectmenu-menu-open" ), "menu is not .ui-selectmenu-menu-open" );
18+
});
19+
520
asyncTest( "accessibility", function() {
621
var wrappers, button, menu,
722
element = $( "#speed" ).attr( "title", "A demo title" );

ui/selectmenu.js

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", {
3131
defaultElement: "<select>",
3232
options: {
3333
appendTo: null,
34+
classes: {
35+
"ui-selectmenu-button": "",
36+
"ui-selectmenu-button-open": "ui-corner-top",
37+
"ui-selectmenu-button-closed": "ui-corner-all",
38+
"ui-selectmenu-text": "",
39+
"ui-selectmenu-menu": "",
40+
"ui-selectmenu-optgroup": "",
41+
"ui-selectmenu-open": ""
42+
},
3443
disabled: null,
3544
icons: {
3645
button: "ui-icon-triangle-1-s"
@@ -87,7 +96,6 @@ return $.widget( "ui.selectmenu", {
8796

8897
// Create button
8998
this.button = $( "<span>", {
90-
"class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
9199
tabindex: this.options.disabled ? -1 : 0,
92100
id: this.ids.button,
93101
role: "combobox",
@@ -99,6 +107,9 @@ return $.widget( "ui.selectmenu", {
99107
})
100108
.insertAfter( this.element );
101109

110+
this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
111+
"ui-widget ui-state-default" );
112+
102113
$( "<span>", {
103114
"class": "ui-icon " + this.options.icons.button
104115
})
@@ -107,6 +118,8 @@ return $.widget( "ui.selectmenu", {
107118
this.buttonItem = this._renderButtonItem( item )
108119
.appendTo( this.button );
109120

121+
this._addClass( this.buttonItem, "ui-selectmenu-text" );
122+
110123
this._resizeButton();
111124

112125
this._on( this.button, this._buttonEvents );
@@ -139,9 +152,14 @@ return $.widget( "ui.selectmenu", {
139152
.append( this.menu )
140153
.appendTo( this._appendTo() );
141154

155+
this._addClass( this.menuWrap, "ui-selectmenu-menu", "ui-front" );
156+
142157
// Initialize menu widget
143158
this.menuInstance = this.menu
144159
.menu({
160+
classes: {
161+
"ui-menu": "ui-corner-bottom"
162+
},
145163
role: "listbox",
146164
select: function( event, ui ) {
147165
event.preventDefault();
@@ -171,11 +189,6 @@ return $.widget( "ui.selectmenu", {
171189
})
172190
.menu( "instance" );
173191

174-
// Adjust menu styles to dropdown
175-
this.menu
176-
.addClass( "ui-corner-bottom" )
177-
.removeClass( "ui-corner-all" );
178-
179192
// Don't close the menu on mouseleave
180193
this.menuInstance._off( this.menu, "mouseleave" );
181194

@@ -197,6 +210,7 @@ return $.widget( "ui.selectmenu", {
197210
this._getSelectedItem().data( "ui-selectmenu-item" )
198211
)
199212
);
213+
this._addClass( this.buttonItem, "ui-selectmenu-text" );
200214
if ( !this.options.width ) {
201215
this._resizeButton();
202216
}
@@ -282,9 +296,8 @@ return $.widget( "ui.selectmenu", {
282296
},
283297

284298
_renderButtonItem: function( item ) {
285-
var buttonItem = $( "<span>", {
286-
"class": "ui-selectmenu-text"
287-
});
299+
var buttonItem = $( "<span>" );
300+
288301
this._setText( buttonItem, item.label );
289302

290303
return buttonItem;
@@ -296,14 +309,13 @@ return $.widget( "ui.selectmenu", {
296309

297310
$.each( items, function( index, item ) {
298311
if ( item.optgroup !== currentOptgroup ) {
299-
$( "<li>", {
300-
"class": "ui-selectmenu-optgroup ui-menu-divider" +
301-
( item.element.parent( "optgroup" ).prop( "disabled" ) ?
302-
" ui-state-disabled" :
303-
"" ),
312+
var li = $( "<li>", {
304313
text: item.optgroup
305-
})
306-
.appendTo( ul );
314+
}).appendTo( ul );
315+
316+
that._addClass( li, "ui-selectmenu-optgroup", "ui-menu-divider" +
317+
( item.element.parent( "optgroup" ).prop( "disabled" ) ?
318+
" ui-state-disabled" : "" ) );
307319

308320
currentOptgroup = item.optgroup;
309321
}
@@ -498,6 +510,7 @@ return $.widget( "ui.selectmenu", {
498510
// Change native select element
499511
this.element[ 0 ].selectedIndex = item.index;
500512
this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) );
513+
this._addClass( this.buttonItem, "ui-selectmenu-text" );
501514
this._setAria( item );
502515
this._trigger( "select", event, { item: item } );
503516

@@ -576,7 +589,14 @@ return $.widget( "ui.selectmenu", {
576589
.toggleClass( "ui-corner-top", this.isOpen )
577590
.toggleClass( "ui-corner-all", !this.isOpen )
578591
.attr( "aria-expanded", this.isOpen );
579-
this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
592+
593+
this[ ( !this.isOpen ? "_add" : "_remove" ) + "Class" ]
594+
( this.button, "ui-selectmenu-button-closed" );
595+
this[ ( this.isOpen ? "_add" : "_remove" ) + "Class" ]
596+
( this.button, "ui-selectmenu-button-open" );
597+
this[ ( this.isOpen ? "_add" : "_remove" ) + "Class" ]
598+
( this.menuWrap, "ui-selectmenu-open" );
599+
580600
this.menu.attr( "aria-hidden", !this.isOpen );
581601
},
582602

0 commit comments

Comments
 (0)