Checkboxradio: updates based on new classes api

Author: arschmitz

tests/unit/checkboxradio/checkboxradio_common.js

@@ -5,11 +5,8 @@ TestHelpers.commonWidgetTests( "checkboxradio", {
 		label: null,
 		icon: true,
 		classes: {
-			"ui-checkboxradio": "",
 			"ui-checkboxradio-label": "ui-corner-all",
-			"ui-checkboxradio-radio-label": "",
-			"ui-checkboxradio-icon": "ui-corner-all",
-			"ui-checkboxradio-checked": ""
+			"ui-checkboxradio-icon": "ui-corner-all"
 		},
 
 		// Callbacks

tests/unit/checkboxradio/checkboxradio_core.js

@@ -13,9 +13,10 @@ test("Checkbox", function() {
 	ok( input.is( ":visible" ) );
 	ok( !label.hasClass(".ui-button)") );
 	input.checkboxradio();
-	strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" );
-	strictEqual( label.attr( "class" ), "ui-icon-beginning ui-button ui-widget" +
-		" ui-checkboxradio-label ui-corner-all" );
+	equal( input.is( ".ui-helper-hidden-accessible.ui-checkboxradio" ), true,
+		"Input has proper classes" );
+	equal( label.is( ".ui-icon-beginning.ui-button.ui-widget.ui-checkboxradio-label.ui-corner-all" ),
+		true, "Label has proper classes" );
 });
 
 test("Radios", function() {

ui/checkboxradio.js

@@ -24,11 +24,7 @@
 	}
 }(function( $ ) {
 
-var baseClasses = "ui-button ui-widget",
-	typeClasses = "ui-state-focus ui-radio-label ui-checkbox-label ui-state-active " +
-	"ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom ui-checkboxradio-radio-checked " +
-	"ui-checkboxradio-checkbox-checked",
-	formResetHandler = function() {
+var formResetHandler = function() {
 		var form = $( this );
 		setTimeout(function() {
 			form.find( ".ui-checkboxradio" ).checkboxradio( "refresh" );
@@ -59,11 +55,8 @@ $.widget( "ui.checkboxradio", {
 		label: null,
 		icon: true,
 		classes: {
-			"ui-checkboxradio": "",
 			"ui-checkboxradio-label": "ui-corner-all",
-			"ui-checkboxradio-radio-label": "",
-			"ui-checkboxradio-icon": "ui-corner-all",
-			"ui-checkboxradio-checked": ""
+			"ui-checkboxradio-icon": "ui-corner-all"
 		}
 	},
 
@@ -110,10 +103,10 @@ $.widget( "ui.checkboxradio", {
 		this._on({
 			"change": "_toggleClasses",
 			"focus": function() {
-				this.label.addClass( "ui-state-focus ui-visual-focus" );
+				this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
 			},
 			"blur": function() {
-				this.label.removeClass( "ui-state-focus ui-visual-focus" );
+				this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
 			}
 		});
 	},
@@ -171,18 +164,15 @@ $.widget( "ui.checkboxradio", {
 
 		this._setOption( "disabled", this.options.disabled );
 		this._updateIcon( checked );
-		this.element.addClass( "ui-helper-hidden-accessible " +
-			this._classes( "ui-checkboxradio" ) );
+		this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible " );
 
-		this.label.addClass( baseClasses + " " + this._classes( "ui-checkboxradio-label" ) );
+		this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
 
 		if ( this.type === "radio" ) {
-			this.label.addClass( "ui-checkboxradio-radio-label" );
+			this._addClass( this.label, "ui-checkboxradio-radio-label" );
 		}
-
 		if ( checked ) {
-			this.label.addClass( this._classes( "ui-checkboxradio-checked" ) +
-				" ui-state-active" );
+			this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
 		}
 		if ( this.options.label && this.options.label !== this.originalLabel ) {
 			this.label.html( this.icon ? this.icon : "" ).append( this.options.label );
@@ -197,53 +187,29 @@ $.widget( "ui.checkboxradio", {
 
 	_toggleClasses: function() {
 		var checked = this.element[ 0 ].checked;
-		this.label.toggleClass( this._classes( "ui-checkboxradio-checked" ) +
-			" ui-state-active", checked );
+		this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
 		if ( this.options.icon && this.type === "checkbox" ) {
-			this.icon
-				.toggleClass( "ui-icon-check", checked )
-				.toggleClass( "ui-icon-blank", !checked );
+			this._toggleClass( this.icon, null, "ui-icon-check", checked )
+				._toggleClass( this.icon, null, "ui-icon-blank", !checked );
 		}
 		if ( this.type === "radio" ) {
 			radioGroup( this.element[0] )
 				.not( this.element )
-				.map(function() {
-					return $( this ).checkboxradio( "widget" )[ 0 ];
-				})
-				.removeClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ) );
+				.each( function(){
+					var instance = $( this ).checkboxradio( "instance" );
+
+					if ( instance ) {
+						instance._removeClass( instance.label,
+							"ui-checkboxradio-checked", "ui-state-active" );
+					}
+				});
 		}
 	},
 
 	_destroy: function() {
-		this.label.removeClass( this._classes( "ui-checkboxradio-radio-label ui-checkboxradio-label" ) + " " +
-			baseClasses + " " + typeClasses );
 		if ( this.icon ) {
 			this.icon.remove();
 		}
-		this.element.removeClass( this._classes( "ui-checkboxradio" ) +
-			" ui-helper-hidden-accessible" );
-	},
-
-	_elementsFromClassKey: function( classKey ) {
-		var parts = classKey.split( "-" ),
-			checkedType = parts[ 2 ] === this.type || parts[ 2 ] === undefined,
-			checkedClass = parts[ 3 ] === "checked" || this.element[ 0 ].checked;
-		switch ( classKey ) {
-			case "ui-checkboxradio":
-			case "ui-checkboxradio-radio-label":
-			case "ui-checkboxradio-label":
-			case "ui-checkboxradio-checked":
-				if ( checkedType && checkedClass ) {
-					return this.label;
-				}
-				return $();
-			case "ui-checkboxradio-icon":
-				if ( this.icon ) {
-					return this.icon;
-				}
-				return $();
-		}
-		return this._superApply( arguments );
 	},
 
 	_setOption: function( key, value ) {
@@ -253,8 +219,8 @@ $.widget( "ui.checkboxradio", {
 		}
 		this._super( key, value );
 		if ( key === "disabled" ) {
-			this.label.toggleClass( "ui-state-disabled", !!value );
-			this.element[ 0 ].disabled =  !!value;
+			this._toggleClass( this.label, null, "ui-state-disabled", value );
+			this.element[ 0 ].disabled =  value;
 			return;
 		}
 		if ( key === "label" && value === null ) {
@@ -264,11 +230,10 @@ $.widget( "ui.checkboxradio", {
 	},
 
 	_updateIcon: function( checked ) {
-		var toAdd = this._classes( "ui-checkboxradio-icon" ) +
-		" ui-icon ui-icon-background ";
+		var toAdd = "ui-icon ui-icon-background ";
 
 		if ( this.options.icon ) {
-			this.label.addClass( "ui-icon-beginning" );
+			this._addClass( this.label, null, "ui-icon-beginning" );
 			if ( !this.icon ) {
 				this.icon = $( "<span>" );
 			}
@@ -278,9 +243,10 @@ $.widget( "ui.checkboxradio", {
 			} else {
 				toAdd += "ui-icon-blank";
 			}
-			this.icon.addClass( toAdd ).appendTo( this.label );
+			this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
+			this.icon.appendTo( this.label );
 		} else if ( this.icon !== undefined ) {
-			this.label.removeClass( "ui-icon-beginning" );
+			this._removeClass( this.label, null, "ui-icon-beginning" );
 			this.icon.remove();
 			delete this.icon;
 		}
@@ -290,8 +256,7 @@ $.widget( "ui.checkboxradio", {
 		var checked = this.element[ 0 ].checked,
 			isDisabled = this.element[ 0 ].disabled;
 		this._updateIcon( checked );
-		this.label.toggleClass( "ui-state-active " +
-			this._classes( "ui-checkboxradio-checked" ), checked );
+		this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
 		if ( this.options.label !== null ) {
 			this.label.contents().not( this.element.add( this.icon ) ).remove();
 			this.label.append( this.options.label );