diff options
| -rw-r--r-- | tests/unit/controlgroup/controlgroup.html | 21 | ||||
| -rw-r--r-- | tests/unit/controlgroup/core.js | 25 | ||||
| -rw-r--r-- | tests/unit/controlgroup/methods.js | 23 | ||||
| -rw-r--r-- | ui/widgets/controlgroup.js | 34 |
4 files changed, 94 insertions, 9 deletions
diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html index 9767381ac..9983232ec 100644 --- a/tests/unit/controlgroup/controlgroup.html +++ b/tests/unit/controlgroup/controlgroup.html @@ -36,6 +36,27 @@ <option>Slow</option> </select> </div> + <select id="select-sanatize"> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + <div class="controlgroup-pre"> + <select id="select-pre"> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + <button>Button with icon on the bottom</button> + </div> + <div class="controlgroup-refresh"> + <select id="select-refresh"> + <option>Fast</option> + <option>Medium</option> + <option>Slow</option> + </select> + <button>Button with icon on the bottom</button> + </div> </div> </body> </html> diff --git a/tests/unit/controlgroup/core.js b/tests/unit/controlgroup/core.js index c1b1556aa..205633594 100644 --- a/tests/unit/controlgroup/core.js +++ b/tests/unit/controlgroup/core.js @@ -74,4 +74,29 @@ QUnit.test( "selectmenu: controlgroupLabel", function( assert ) { assert.hasClasses( label.find( "span" ), "ui-controlgroup-label-contents" ); } ); +var assertSanatized = function( assert, initClasses, expectedClasses, message ) { + var selectmenu = $( "#select-sanatize" ).selectmenu({ + classes: { + "ui-selectmenu-button-open": initClasses + } + }).selectmenu( "instance" ); + var classes = { + "ui-selectmenu-button-open": "ui-corner-top" + }; + var result = $.ui.controlgroup.prototype._resolveClassesValues( classes, selectmenu ); + assert.deepEqual( result, { + "ui-selectmenu-button-open": expectedClasses + " ui-corner-top" + }, message ); +} + +QUnit.test( "_resolveClassesValues", function( assert ) { + assert.expect( 6 ); + assertSanatized( assert, "bar ui-corner-bottom", "bar", "Single Corner Class Removed end" ); + assertSanatized( assert, "ui-corner-bottom bar", "bar", "Single Corner Class Removed beginning" ); + assertSanatized( assert, "bar ui-corner-bottom ui-corner-left", "bar", "Multiple Corner Class Removed end" ); + assertSanatized( assert, "ui-corner-bottom ui-corner-left bar", "bar", "Multiple Corner Class Removed beginning" ); + assertSanatized( assert, "bar ui-corner-bottom ui-corner-left foo", "bar foo", "Multiple Corner Class Removed Middle" ); + assertSanatized( assert, "bar", "bar", "No corner Class" ); +} ); + } ); diff --git a/tests/unit/controlgroup/methods.js b/tests/unit/controlgroup/methods.js index 94f189747..9f1e4201e 100644 --- a/tests/unit/controlgroup/methods.js +++ b/tests/unit/controlgroup/methods.js @@ -148,4 +148,27 @@ $.each( tests, function( widget, html ) { } ); } ); +QUnit.test( "Child Classes Option: init", function( assert ) { + assert.expect( 1 ); + var selectmenu = $( "#select-pre" ).selectmenu( { + classes: { + "ui-selectmenu-button-closed": "test-class" + } + } ); + var controlgroup = $( ".controlgroup-pre" ).controlgroup(); + assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" ); +} ); + +QUnit.test( "Child Classes Option: refresh", function( assert ) { + assert.expect( 1 ); + var controlgroup = $( ".controlgroup-refresh" ).controlgroup(); + var selectmenu = $( "#select-refresh" ).selectmenu( { + classes: { + "ui-selectmenu-button-closed": "test-class" + } + } ); + controlgroup.controlgroup( "refresh" ); + assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" ); +} ); + } ); diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js index 1f0da070e..641a419ed 100644 --- a/ui/widgets/controlgroup.js +++ b/ui/widgets/controlgroup.js @@ -30,6 +30,7 @@ factory( jQuery ); } }( function( $ ) { +var removeClassRegex = /ui-corner-([a-z]){2,6}/g; return $.widget( "ui.controlgroup", { version: "@VERSION", @@ -107,15 +108,20 @@ return $.widget( "ui.controlgroup", { // Find instances of this widget inside controlgroup and init them that.element - .find( selector )[ widget ]( options ) + .find( selector ) .each( function() { var element = $( this ); + var instance = element[ widget ]( "instance" ); + if ( instance ) { + options.classes = that._resolveClassesValues( options.classes, instance ); + } + element[ widget ]( options ); // Store an instance of the controlgroup to be able to reference // from the outermost element for changing options and refresh var widgetElement = element[ widget ]( "widget" ); $.data( widgetElement[ 0 ], "ui-controlgroup-data", - element[ widget ]( "instance" ) ); + instance ? instance : element[ widget ]( "instance" ) ); childWidgets.push( widgetElement[ 0 ] ); } ); @@ -149,7 +155,7 @@ return $.widget( "ui.controlgroup", { classes: {} }; result.classes[ key ] = { - "middle": null, + "middle": "", "first": "ui-corner-" + ( direction ? "top" : "left" ), "last": "ui-corner-" + ( direction ? "bottom" : "right" ) }[ position ]; @@ -180,15 +186,15 @@ return $.widget( "ui.controlgroup", { width: direction ? "auto" : false, classes: { middle: { - "ui-selectmenu-button-open": null, - "ui-selectmenu-button-closed": null + "ui-selectmenu-button-open": "", + "ui-selectmenu-button-closed": "" }, first: { "ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ), "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" ) }, last: { - "ui-selectmenu-button-open": direction ? null : "ui-corner-tr", + "ui-selectmenu-button-open": direction ? "" : "ui-corner-tr", "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" ) } @@ -196,6 +202,15 @@ return $.widget( "ui.controlgroup", { }; }, + _resolveClassesValues: function( classes, instance ) { + $.each( classes, function( key ) { + var current = instance.options.classes[ key ] || ""; + current = current.replace( removeClassRegex, "" ).trim(); + classes[ key ] = ( current + " " + classes[ key ] ).replace( / +/g, " " ); + } ); + return classes; + }, + _setOption: function( key, value ) { if ( key === "direction" ) { this._removeClass( "ui-controlgroup-" + this.options.direction ); @@ -236,9 +251,10 @@ return $.widget( "ui.controlgroup", { var instance = children[ value ]().data( "ui-controlgroup-data" ); if ( instance && that[ "_" + instance.widgetName + "Options" ] ) { - instance.element[ instance.widgetName ]( - that[ "_" + instance.widgetName + "Options" ]( value ) - ); + var options = that[ "_" + instance.widgetName + "Options" ]( value ); + + options.classes = that._resolveClassesValues( options.classes, instance ); + instance.element[ instance.widgetName ]( options ); } else { that._updateCornerClass( children[ value ](), value ); } |