Selectmenu: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html
index 618eea3d00a072849a8a0e93c81467ad5049240b..c9a399ad5482e20ecc45da84260278cc3b106f65 100644 (file)
--- a/tests/unit/selectmenu/selectmenu.html
+++ b/tests/unit/selectmenu/selectmenu.html
@@ -9,6 +9,7 @@
        <script src="../../../external/qunit/qunit.js"></script>
        <script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
        <script src="../testsuite.js"></script>
+       <script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
        <script>
        TestHelpers.loadResources({
                css: [ "core", "menu" , "selectmenu" ],

diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js
index cb8712e7b5abe0efff8575976f5de0d96c256fea..f741eaf27e0c502b0a9a8a760e7791b3b4dd00b8 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_common.js
+++ b/tests/unit/selectmenu/selectmenu_common.js
@@ -1,7 +1,10 @@
 TestHelpers.commonWidgetTests( "selectmenu", {
        defaults: {
                appendTo: null,
-               classes: {},
+               classes: {
+                       "ui-selectmenu-button-open": "ui-corner-top",
+                       "ui-selectmenu-button-closed": "ui-corner-all"
+               },
                disabled: null,
                icons: {
                        button: "ui-icon-triangle-1-s"

diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js
index 0a24318615fee6a82f285c5b0b34d18956397290..1116bd6049cbecaf290805b6faec4387ad50d0e9 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_core.js
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -2,6 +2,21 @@
 
 module( "selectmenu: core" );
 
+test( "markup structure", function( assert ) {
+       expect( 4 );
+
+       var element = $( "#files" ).selectmenu(),
+               button = element.selectmenu( "widget" ),
+               menu = element.selectmenu( "menuWidget" ),
+               menuWrap = menu.parent();
+
+       assert.hasClasses( button,
+               "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
+       assert.lacksClasses( button, "ui-selectmenu-button-open" );
+       assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
+       assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
+});
+
 asyncTest( "accessibility", function() {
        var wrappers, button, menu,
                element = $( "#speed" ).attr( "title", "A demo title" );

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index 9bd2d1016a76d1fe3a13f4b7358576d833ef6c3b..0d1354c6d791165dceae2aa53dace0b295b95853 100644 (file)
--- a/ui/selectmenu.js
+++ b/ui/selectmenu.js
@@ -39,6 +39,10 @@ return $.widget( "ui.selectmenu", {
        defaultElement: "<select>",
        options: {
                appendTo: null,
+               classes: {
+                       "ui-selectmenu-button-open": "ui-corner-top",
+                       "ui-selectmenu-button-closed": "ui-corner-all"
+               },
                disabled: null,
                icons: {
                        button: "ui-icon-triangle-1-s"
@@ -78,7 +82,8 @@ return $.widget( "ui.selectmenu", {
        },
 
        _drawButton: function() {
-               var that = this,
+               var icon,
+                       that = this,
                        item = this._parseOption(
                                this.element.find( "option:selected" ),
                                this.element[ 0 ].selectedIndex
@@ -98,7 +103,6 @@ return $.widget( "ui.selectmenu", {
 
                // Create button
                this.button = $( "<span>", {
-                       "class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
                        tabindex: this.options.disabled ? -1 : 0,
                        id: this.ids.button,
                        role: "combobox",
@@ -110,10 +114,11 @@ return $.widget( "ui.selectmenu", {
                })
                        .insertAfter( this.element );
 
-               $( "<span>", {
-                       "class": "ui-icon " + this.options.icons.button
-               })
-                       .prependTo( this.button );
+               this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
+                       "ui-widget ui-state-default" );
+
+               icon = $( "<span>" ).prependTo( this.button );
+               this._addClass( icon, null, "ui-icon " + this.options.icons.button );
 
                this.buttonItem = this._renderButtonItem( item )
                        .appendTo( this.button );
@@ -146,15 +151,16 @@ return $.widget( "ui.selectmenu", {
                });
 
                // Wrap menu
-               this.menuWrap = $( "<div>", {
-                       "class": "ui-selectmenu-menu ui-front"
-               })
-                       .append( this.menu )
-                       .appendTo( this._appendTo() );
+               this.menuWrap = $( "<div>" ).append( this.menu );
+               this._addClass( this.menuWrap, "ui-selectmenu-menu", "ui-front" );
+               this.menuWrap.appendTo( this._appendTo() );
 
                // Initialize menu widget
                this.menuInstance = this.menu
                        .menu({
+                               classes: {
+                                       "ui-menu": "ui-corner-bottom"
+                               },
                                role: "listbox",
                                select: function( event, ui ) {
                                        event.preventDefault();
@@ -184,11 +190,6 @@ return $.widget( "ui.selectmenu", {
                        })
                        .menu( "instance" );
 
-               // Adjust menu styles to dropdown
-               this.menu
-                       .addClass( "ui-corner-bottom" )
-                       .removeClass( "ui-corner-all" );
-
                // Don't close the menu on mouseleave
                this.menuInstance._off( this.menu, "mouseleave" );
 
@@ -258,7 +259,7 @@ return $.widget( "ui.selectmenu", {
                } else {
 
                        // Menu clears focus on close, reset focus to selected item
-                       this.menu.find( ".ui-state-active" ).removeClass( "ui-state-active" );
+                       this._removeClass( this.menu.find( ".ui-state-active" ), null, "ui-state-active" );
                        this.menuInstance.focus( null, this._getSelectedItem() );
                }
 
@@ -304,10 +305,10 @@ return $.widget( "ui.selectmenu", {
        },
 
        _renderButtonItem: function( item ) {
-               var buttonItem = $( "<span>", {
-                       "class": "ui-selectmenu-text"
-               });
+               var buttonItem = $( "<span>" );
+
                this._setText( buttonItem, item.label );
+               this._addClass( buttonItem, "ui-selectmenu-text" );
 
                return buttonItem;
        },
@@ -317,15 +318,18 @@ return $.widget( "ui.selectmenu", {
                        currentOptgroup = "";
 
                $.each( items, function( index, item ) {
+                       var li;
+
                        if ( item.optgroup !== currentOptgroup ) {
-                               $( "<li>", {
-                                       "class": "ui-selectmenu-optgroup ui-menu-divider" +
-                                               ( item.element.parent( "optgroup" ).prop( "disabled" ) ?
-                                                       " ui-state-disabled" :
-                                                       "" ),
+                               li = $( "<li>", {
                                        text: item.optgroup
-                               })
-                                       .appendTo( ul );
+                               });
+                               that._addClass( li, "ui-selectmenu-optgroup", "ui-menu-divider" +
+                                       ( item.element.parent( "optgroup" ).prop( "disabled" ) ?
+                                               " ui-state-disabled" :
+                                               "" ) );
+
+                               li.appendTo( ul );
 
                                currentOptgroup = item.optgroup;
                        }
@@ -345,7 +349,7 @@ return $.widget( "ui.selectmenu", {
                        });
 
                if ( item.disabled ) {
-                       li.addClass( "ui-state-disabled" );
+                       this._addClass( li, null, "ui-state-disabled" );
                }
                this._setText( wrapper, item.label );
 
@@ -542,9 +546,9 @@ return $.widget( "ui.selectmenu", {
 
        _setOption: function( key, value ) {
                if ( key === "icons" ) {
-                       this.button.find( "span.ui-icon" )
-                               .removeClass( this.options.icons.button )
-                               .addClass( value.button );
+                       var icon = this.button.find( "span.ui-icon" );
+                       this._removeClass( icon, null, this.options.icons.button )
+                               ._addClass( icon, null, value.button );
                }
 
                this._super( key, value );
@@ -555,9 +559,8 @@ return $.widget( "ui.selectmenu", {
 
                if ( key === "disabled" ) {
                        this.menuInstance.option( "disabled", value );
-                       this.button
-                               .toggleClass( "ui-state-disabled", value )
-                               .attr( "aria-disabled", value );
+                       this.button.attr( "aria-disabled", value );
+                       this._toggleClass( this.button, null, "ui-state-disabled", value );
 
                        this.element.prop( "disabled", value );
                        if ( value ) {
@@ -594,11 +597,17 @@ return $.widget( "ui.selectmenu", {
        },
 
        _toggleAttr: function() {
-               this.button
-                       .toggleClass( "ui-corner-top", this.isOpen )
-                       .toggleClass( "ui-corner-all", !this.isOpen )
-                       .attr( "aria-expanded", this.isOpen );
-               this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
+               this.button.attr( "aria-expanded", this.isOpen );
+
+               // We can't use two _toggleClass() calls here, because we need to make sure
+               // we always remove classes first and add them second, otherwise if both classes have the
+               // same theme class, it will be removed after we add it.
+               this._removeClass( this.button, "ui-selectmenu-button-" +
+                               ( this.isOpen ? "closed" : "open" ) )
+                       ._addClass( this.button, "ui-selectmenu-button-" +
+                               ( this.isOpen ? "open" : "closed" ) )
+                       ._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );
+
                this.menu.attr( "aria-hidden", !this.isOpen );
        },