Skip to content
Permalink
Browse files
Controlgroup: Don't remove existing classes classes
unless its a corner class

Fixes #14960
  • Loading branch information
arschmitz committed May 26, 2016
1 parent 83ec5e8 commit 04b670e6cc6b25ffe595c665ea86929f71f78b50
Showing with 94 additions and 9 deletions.
  1. +21 −0 tests/unit/controlgroup/controlgroup.html
  2. +25 −0 tests/unit/controlgroup/core.js
  3. +23 −0 tests/unit/controlgroup/methods.js
  4. +25 −9 ui/widgets/controlgroup.js
@@ -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>
@@ -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" );
} );

} );
@@ -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" );
} );

} );
@@ -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,22 +186,31 @@ 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" )
}

}[ position ]
};
},

_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 );
}

0 comments on commit 04b670e

Please sign in to comment.