Skip to content

Commit ceaee76

Browse files
arschmitzarschmitz
committed
Checkboxradio: change all classes to be prefixed with ui-checkboxradio
And simplify css
1 parent 7e49bba commit ceaee76

File tree

7 files changed

+75
-49
lines changed

7 files changed

+75
-49
lines changed

‎tests/unit/checkboxradio/checkboxradio_common.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ TestHelpers.commonWidgetTests( "checkboxradio", {
33
defaults: {
44
disabled: null,
55
label: null,
6-
icon: false,
6+
icon: true,
77
classes: {
8-
"ui-checkboxradio": null,
9-
"ui-checkbox": null,
10-
"ui-radio": null,
11-
"ui-checkbox-label": "ui-corner-all",
12-
"ui-radio-label": "ui-corner-all",
8+
"ui-checkboxradio": "",
9+
"ui-checkboxradio-label": "ui-corner-all",
10+
"ui-checkboxradio-radio-label": "",
1311
"ui-checkboxradio-icon": "ui-corner-all",
14-
"ui-radio-checked": null,
15-
"ui-checkbox-checked": null
12+
"ui-checkboxradio-checked": ""
1613
},
1714

1815
// Callbacks

‎tests/unit/checkboxradio/checkboxradio_core.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ test("Checkbox", function() {
1414
ok( !label.hasClass(".ui-button)") );
1515
input.checkboxradio();
1616
strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" );
17-
strictEqual( label.attr( "class" ), "ui-button ui-widget ui-checkbox-label ui-corner-all" );
17+
strictEqual( label.attr( "class" ), "ui-icon-beginning ui-button ui-widget" +
18+
" ui-checkboxradio-label ui-corner-all" );
1819
});
1920

2021
test("Radios", function() {

‎tests/unit/checkboxradio/checkboxradio_methods.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module( "Checkboxradio: methods" );
2121
strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
2222
checkbox.prop( "checked", true );
2323
checkbox.checkboxradio( "refresh" );
24-
strictEqual( widget.hasClass( "ui-checkbox-checked" ), true,
24+
strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
2525
"State updated based on checked property" );
2626
});
2727

@@ -82,7 +82,7 @@ module( "Checkboxradio: methods" );
8282
strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
8383
radio.prop( "checked", true );
8484
radio.checkboxradio( "refresh" );
85-
strictEqual( widget.hasClass( "ui-radio-checked" ), true,
85+
strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
8686
"State updated based on checked property" );
8787
});
8888

‎tests/unit/checkboxradio/checkboxradio_options.js‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module( "Checkboxradio: checkbox: options" );
6060

6161
expect( 9 );
6262

63-
checkbox.checkboxradio();
63+
checkbox.checkboxradio({ icon: false });
6464

6565
widget = checkbox.checkboxradio( "widget" );
6666

@@ -75,8 +75,8 @@ module( "Checkboxradio: checkbox: options" );
7575

7676
strictEqual( widget.find( "span" ).length, 1,
7777
"Label contains a span when created with icon:true" );
78-
strictEqual( widget.find( "span" ).attr( "class" ),
79-
"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
78+
strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
79+
"ui-icon-background.ui-icon-blank" ), true,
8080
"Icon span has proper classes when created not checked" );
8181

8282
checkbox.checkboxradio( "destroy" ).prop( "checked", true );
@@ -85,8 +85,8 @@ module( "Checkboxradio: checkbox: options" );
8585
icon: true
8686
});
8787

88-
strictEqual( widget.find( "span" ).attr( "class" ),
89-
"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
88+
strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
89+
"ui-icon-background.ui-icon-check" ), true,
9090
"Icon span has proper classes when created checked" );
9191

9292
checkbox.checkboxradio( "option", "icon", false );
@@ -96,8 +96,8 @@ module( "Checkboxradio: checkbox: options" );
9696

9797
checkbox.checkboxradio( "option", "icon", true );
9898

99-
strictEqual( widget.find( "span" ).attr( "class" ),
100-
"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
99+
strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
100+
"ui-icon-background.ui-icon-check" ), true,
101101
"Icon span has proper classes when option set to true and :is( checked )" );
102102

103103
checkbox.prop( "checked", false ).checkboxradio( "refresh" );
@@ -108,8 +108,8 @@ module( "Checkboxradio: checkbox: options" );
108108

109109
checkbox.checkboxradio( "option", "icon", true );
110110

111-
strictEqual( widget.find( "span" ).attr( "class" ),
112-
"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
111+
strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
112+
"ui-icon-background.ui-icon-blank" ), true,
113113
"Icon span has proper classes when option set to true and not checked" );
114114

115115
checkbox.checkboxradio( "destroy" );
@@ -118,6 +118,13 @@ module( "Checkboxradio: checkbox: options" );
118118
"Label does not contain a span after destroy when icon true" );
119119

120120
});
121+
function getLabelText( label, element ) {
122+
var text = "";
123+
label.contents().not( element ).each( function() {
124+
text += ( this.nodeType === 3 ) ? $( this ).text() : "";
125+
});
126+
return text;
127+
}
121128
test( "options: label", function() {
122129
var checkbox = $( "#checkbox-option-label" ),
123130
widget;
@@ -130,7 +137,7 @@ module( "Checkboxradio: checkbox: options" );
130137

131138
strictEqual( checkbox.checkboxradio( "option", "label" ),
132139
"checkbox label", "When no value passed on create text from dom is used for option" );
133-
strictEqual( widget.contents().not( this.element ),
140+
strictEqual( getLabelText( widget, checkbox ),
134141
"checkbox label", "When no value passed on create text from dom is used in dom" );
135142

136143
checkbox.checkboxradio( "destroy" );
@@ -141,7 +148,7 @@ module( "Checkboxradio: checkbox: options" );
141148

142149
strictEqual( checkbox.checkboxradio( "option", "label" ),
143150
"foo", "When value is passed on create value is used for option" );
144-
strictEqual( widget.contents().not( this.element ),
151+
strictEqual( getLabelText( widget, checkbox ),
145152
"foo", "When value is passed on create value is used in dom" );
146153

147154
checkbox.checkboxradio( "destroy" );
@@ -151,21 +158,21 @@ module( "Checkboxradio: checkbox: options" );
151158

152159
strictEqual( checkbox.checkboxradio( "option", "label" ),
153160
"foo", "When null is passed on create text from dom is used for option" );
154-
strictEqual( widget.contents().not( this.element ),
161+
strictEqual( getLabelText( widget, checkbox ),
155162
"foo", "When null is passed on create text from dom is used in dom" );
156163

157164
checkbox.checkboxradio( "option", "label", "bar" );
158165

159166
strictEqual( checkbox.checkboxradio( "option", "label" ),
160167
"bar", "When value is passed value is used for option" );
161-
strictEqual( widget.contents().not( this.element ),
168+
strictEqual( getLabelText( widget, checkbox ),
162169
"bar", "When value is passed value is used in dom" );
163170

164171
checkbox.checkboxradio( "option", "label", null );
165172

166173
strictEqual( checkbox.checkboxradio( "option", "label" ),
167174
"bar", "When null is passed text from dom is used for option" );
168-
strictEqual( widget.contents().not( this.element ),
175+
strictEqual( getLabelText( widget, checkbox ),
169176
"bar", "When null is passed text from dom is used in dom" );
170177

171178
});

‎themes/base/checkboxradio.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@
99
* http://api.jqueryui.com/checkboxradio/#theming
1010
*/
1111

12-
.ui-checkbox {
13-
display: none;
14-
}
15-
.ui-checkbox-label .ui-icon-background {
12+
.ui-checkboxradio-label .ui-icon-background {
1613
border-radius: .12em;
1714
border: none;
1815
}
19-
.ui-radio-label .ui-icon.ui-icon-background {
16+
.ui-checkboxradio-radio-label .ui-icon-background {
2017
width: 16px;
2118
height: 16px;
2219
border-radius: 1em;
@@ -26,8 +23,8 @@
2623
background-color: rgba( 0, 0, 0, .3 );
2724
opacity: .3;
2825
}
29-
.ui-radio-label.ui-radio-checked .ui-icon,
30-
.ui-radio-label.ui-radio-checked:hover .ui-icon {
26+
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
27+
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
3128
background-image: none;
3229
background-color: #fff;
3330
width: 8px;

‎ui/button.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ $.widget( "ui.button", {
5757

5858
_getCreateOptions: function() {
5959
var disabled,
60-
options = {};
60+
options = this._super() || {};
6161

6262
this.isInput = this.element.is( "input" );
6363
this.originalLabel = this.isInput ? this.element.val() : this.element.html();
@@ -232,7 +232,7 @@ $.widget( "ui.button", {
232232
});
233233

234234
// DEPRECATED
235-
if ( $.uiBackCompat ) {
235+
if ( $.uiBackCompat === false ) {
236236

237237
// Text and Icons options
238238
$.widget( "ui.button", $.ui.button, {

‎ui/checkboxradio.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626

2727
var baseClasses = "ui-button ui-widget",
2828
typeClasses = "ui-state-focus ui-radio-label ui-checkbox-label ui-state-active " +
29-
"ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom ui-radio-checked ui-checkbox-checked",
29+
"ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom ui-checkboxradio-radio-checked " +
30+
"ui-checkboxradio-checkbox-checked",
3031
formResetHandler = function() {
3132
var form = $( this );
3233
setTimeout(function() {
@@ -62,21 +63,18 @@ $.widget( "ui.checkboxradio", {
6263
icon: false,
6364
>>>>>>> db16c96... Checkboxradio: add classes option
6465
classes: {
65-
"ui-checkboxradio": null,
66-
"ui-checkbox": null,
67-
"ui-radio": null,
68-
"ui-checkbox-label": "ui-corner-all",
69-
"ui-radio-label": "ui-corner-all",
66+
"ui-checkboxradio": "",
67+
"ui-checkboxradio-label": "ui-corner-all",
68+
"ui-checkboxradio-radio-label": "",
7069
"ui-checkboxradio-icon": "ui-corner-all",
71-
"ui-radio-checked": null,
72-
"ui-checkbox-checked": null
70+
"ui-checkboxradio-checked": ""
7371
}
7472
},
7573

7674
_getCreateOptions: function() {
7775
var disabled,
7876
that = this,
79-
options = {};
77+
options = this._super() || {};
8078

8179
this._readLabel();
8280

@@ -180,10 +178,14 @@ $.widget( "ui.checkboxradio", {
180178
this.element.addClass( "ui-helper-hidden-accessible " +
181179
this._classes( "ui-checkboxradio" ) );
182180

183-
this.label.addClass( baseClasses + " " + this._classes( "ui-" + this.type + "-label" ) );
181+
this.label.addClass( baseClasses + " " + this._classes( "ui-checkboxradio-label" ) );
182+
183+
if ( this.type === "radio" ) {
184+
this.label.addClass( "ui-checkboxradio-radio-label" );
185+
}
184186

185187
if ( checked ) {
186-
this.label.addClass( this._classes( "ui-" + this.type + "-checked" ) +
188+
this.label.addClass( this._classes( "ui-checkboxradio-checked" ) +
187189
" ui-state-active" );
188190
}
189191
if ( this.options.label && this.options.label !== this.originalLabel ) {
@@ -199,7 +201,7 @@ $.widget( "ui.checkboxradio", {
199201

200202
_toggleClasses: function() {
201203
var checked = this.element.is( ":checked" );
202-
this.label.toggleClass( this._classes( "ui-" + this.type + "-checked" ) +
204+
this.label.toggleClass( this._classes( "ui-checkboxradio-checked" ) +
203205
" ui-state-active", checked );
204206
if ( this.options.icon && this.type === "checkbox" ) {
205207
this.icon
@@ -212,12 +214,12 @@ $.widget( "ui.checkboxradio", {
212214
.map(function() {
213215
return $( this ).checkboxradio( "widget" )[ 0 ];
214216
})
215-
.removeClass( "ui-state-active " + this._classes( "ui-radio-checked" ) );
217+
.removeClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ) );
216218
}
217219
},
218220

219221
_destroy: function() {
220-
this.label.removeClass( this._classes( "ui-radio-label ui-checkbox-label" ) + " " +
222+
this.label.removeClass( this._classes( "ui-checkboxradio-radio-label ui-checkboxradio-label" ) + " " +
221223
baseClasses + " " + typeClasses );
222224
if ( this.icon ) {
223225
this.icon.remove();
@@ -226,6 +228,28 @@ $.widget( "ui.checkboxradio", {
226228
" ui-helper-hidden-accessible" );
227229
},
228230

231+
_elementsFromClassKey: function( classKey ) {
232+
var parts = classKey.split( "-" ),
233+
checkedType = parts[ 2 ] === this.type || parts[ 2 ] === undefined,
234+
checkedClass = parts[ 3 ] === "checked" || this.element.is( ":checked" );
235+
switch ( classKey ) {
236+
case "ui-checkboxradio":
237+
case "ui-checkboxradio-radio-label":
238+
case "ui-checkboxradio-label":
239+
case "ui-checkboxradio-checked":
240+
if ( checkedType && checkedClass ) {
241+
return this.label;
242+
}
243+
return $();
244+
case "ui-checkboxradio-icon":
245+
if ( this.icon ) {
246+
return this.icon;
247+
}
248+
return $();
249+
}
250+
return this._superApply( arguments );
251+
},
252+
229253
_setOption: function( key, value ) {
230254
var original;
231255
if ( key === "label" && value === null ) {
@@ -270,7 +294,7 @@ $.widget( "ui.checkboxradio", {
270294
var checked = this.element.is( ":checked" ),
271295
isDisabled = this.element.is( ":disabled" );
272296
this._updateIcon( checked );
273-
this.label.toggleClass( "ui-state-active " + this._classes( "ui-" + this.type + "-checked" ), checked );
297+
this.label.toggleClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ), checked );
274298
if ( this.options.label !== null ) {
275299
this.label.contents().not( this.element.add( this.icon ) ).remove();
276300
this.label.append( this.options.label );

0 commit comments

Comments
 (0)