Skip to content

Commit c192d40

Browse files
arschmitzarschmitz
committed
Widget: Add classes option and _add/_remove/_toggleClass methods
Fixes #7053 Closes gh-1411
1 parent 4959c81 commit c192d40

File tree

20 files changed

+272
-15
lines changed

20 files changed

+272
-15
lines changed

‎tests/unit/accordion/accordion_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "accordion", {
22
defaults: {
33
active: 0,
44
animate: {},
5+
classes: {},
56
collapsible: false,
67
disabled: false,
78
event: "click",

‎tests/unit/autocomplete/autocomplete_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "autocomplete", {
22
defaults: {
33
appendTo: null,
44
autoFocus: false,
5+
classes: {},
56
delay: 300,
67
disabled: false,
78
messages: {

‎tests/unit/button/button_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
TestHelpers.commonWidgetTests( "button", {
22
defaults: {
3+
classes: {},
34
disabled: null,
45
icons: {
56
primary: null,

‎tests/unit/dialog/dialog_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "dialog", {
33
appendTo: "body",
44
autoOpen: true,
55
buttons: [],
6+
classes: {},
67
closeOnEscape: true,
78
closeText: "Close",
89
disabled: false,

‎tests/unit/draggable/draggable_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "draggable", {
33
appendTo: "parent",
44
axis: false,
55
cancel: "input,textarea,button,select,option",
6+
classes: {},
67
connectToSortable: false,
78
containment: false,
89
cursor: "auto",

‎tests/unit/droppable/droppable_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "droppable", {
33
accept: "*",
44
activeClass: false,
55
addClasses: true,
6+
classes: {},
67
disabled: false,
78
greedy: false,
89
hoverClass: false,

‎tests/unit/menu/menu_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
TestHelpers.commonWidgetTests( "menu", {
22
defaults: {
3+
classes: {},
34
disabled: false,
45
icons: {
56
submenu: "ui-icon-caret-1-e"

‎tests/unit/progressbar/progressbar_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
TestHelpers.commonWidgetTests( "progressbar", {
22
defaults: {
3+
classes: {},
34
disabled: false,
45
max: 100,
56
value: 0,

‎tests/unit/resizable/resizable_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "resizable", {
77
aspectRatio: false,
88
autoHide: false,
99
cancel: "input,textarea,button,select,option",
10+
classes: {},
1011
containment: false,
1112
delay: 0,
1213
disabled: false,

‎tests/unit/selectable/selectable_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests("selectable", {
33
appendTo: "body",
44
autoRefresh: true,
55
cancel: "input,textarea,button,select,option",
6+
classes: {},
67
delay: 0,
78
disabled: false,
89
distance: 0,

‎tests/unit/selectmenu/selectmenu_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
TestHelpers.commonWidgetTests( "selectmenu", {
22
defaults: {
33
appendTo: null,
4+
classes: {},
45
disabled: null,
56
icons: {
67
button: "ui-icon-triangle-1-s"

‎tests/unit/slider/slider_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "slider", {
22
defaults: {
33
animate: false,
44
cancel: "input,textarea,button,select,option",
5+
classes: {},
56
delay: 0,
67
disabled: false,
78
distance: 0,

‎tests/unit/sortable/sortable_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "sortable", {
33
appendTo: "parent",
44
axis: false,
55
cancel: "input,textarea,button,select,option",
6+
classes: {},
67
connectWith: false,
78
containment: false,
89
cursor: "auto",

‎tests/unit/spinner/spinner_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
TestHelpers.commonWidgetTests( "spinner", {
22
defaults: {
3+
classes: {},
34
culture: null,
45
disabled: false,
56
icons: {

‎tests/unit/tabs/tabs_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
TestHelpers.commonWidgetTests( "tabs", {
22
defaults: {
33
active: null,
4+
classes: {},
45
collapsible: false,
56
disabled: false,
67
event: "click",

‎tests/unit/tooltip/tooltip_common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
TestHelpers.commonWidgetTests( "tooltip", {
22
defaults: {
3+
classes: {},
34
content: function() {},
45
disabled: false,
56
hide: true,

‎tests/unit/widget/widget.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<script src="../../../external/qunit/qunit.js"></script>
1010
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
1111
<script src="../testsuite.js"></script>
12+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
1213
<script>
1314
TestHelpers.loadResources({
1415
css: [ "core" ],
@@ -21,6 +22,7 @@
2122
<script src="widget_core.js"></script>
2223
<script src="widget_extend.js"></script>
2324
<script src="widget_animation.js"></script>
25+
<script src="widget_classes.js"></script>
2426

2527
<script src="../swarminject.js"></script>
2628
</head>

‎tests/unit/widget/widget_classes.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
(function( $ ) {
2+
3+
module( "widget factory classes", {
4+
setup: function() {
5+
$.widget( "ui.classesWidget", {
6+
options: {
7+
classes: {
8+
"ui-classes-widget": "ui-theme-widget",
9+
"ui-classes-element": "ui-theme-element ui-theme-element-2"
10+
}
11+
},
12+
_create: function() {
13+
this.span = $( "<span>" )
14+
.appendTo( this.element );
15+
16+
this.element.wrap( "<div>" );
17+
18+
this.wrapper = this.element.parent();
19+
20+
this._addClass( "ui-classes-element", "ui-core-element" )
21+
._addClass( "ui-classes-element-2" )
22+
._addClass( null, "ui-core-element-null" )
23+
._addClass( this.span, null, "ui-core-span-null" )
24+
._addClass( this.span, "ui-classes-span", "ui-core-span" )
25+
._addClass( this.wrapper, "ui-classes-widget" );
26+
27+
},
28+
toggleClasses: function( bool ) {
29+
this._toggleClass( "ui-classes-element", "ui-core-element", bool )
30+
._toggleClass( "ui-classes-element-2", null, bool )
31+
._toggleClass( null, "ui-core-element-null", bool )
32+
._toggleClass( this.span, null, "ui-core-span-null", bool )
33+
._toggleClass( this.span, "ui-classes-span", "ui-core-span", bool )
34+
._toggleClass( this.wrapper, "ui-classes-widget", null, bool );
35+
},
36+
removeClasses: function() {
37+
this._removeClass( "ui-classes-element", "ui-core-element" )
38+
._removeClass( "ui-classes-element-2" )
39+
._removeClass( null, "ui-core-element-null" )
40+
._removeClass( this.span, null, "ui-core-span-null" )
41+
._removeClass( this.span, "ui-classes-span", "ui-core-span" )
42+
._removeClass( this.wrapper, "ui-classes-widget" );
43+
},
44+
_destroy: function() {
45+
this.span.remove();
46+
this.element.unwrap();
47+
}
48+
});
49+
},
50+
teardown: function() {
51+
delete $.ui.classesWidget;
52+
delete $.fn.classesWidget;
53+
}
54+
});
55+
56+
function elementHasClasses( widget, method, assert ) {
57+
var toggle = method === "toggle" ? ( ", true" ) : "";
58+
59+
assert.hasClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
60+
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
61+
assert.hasClasses( widget, "ui-classes-element-2",
62+
"_" + method + "Class works with ( keys, null" + toggle + " )" );
63+
assert.hasClasses( widget, "ui-core-element-null",
64+
"_" + method + "Class works with ( null, extra" + toggle + " )" );
65+
assert.hasClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
66+
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
67+
assert.hasClasses( widget.find( "span" ), "ui-classes-span ui-core-span",
68+
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
69+
assert.hasClasses( widget.find( "span" ), "ui-core-span-null",
70+
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
71+
}
72+
function elementLacksClasses( widget, method, assert ) {
73+
var toggle = method === "toggle" ? ( ", false" ) : "";
74+
75+
assert.lacksClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
76+
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
77+
assert.lacksClasses( widget, "ui-classes-element-2",
78+
"_" + method + "Class works with ( keys, null" + toggle + " )" );
79+
assert.lacksClasses( widget, "ui-core-element-null",
80+
"_" + method + "Class works with ( null, extra" + toggle + " )" );
81+
assert.lacksClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
82+
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
83+
assert.lacksClasses( widget.find( "span" ), "ui-classes-span ui-core-span",
84+
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
85+
assert.lacksClasses( widget.find( "span" ), "ui-core-span-null",
86+
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
87+
}
88+
89+
test( ".option() - classes setter", function( assert ) {
90+
expect( 11 );
91+
92+
var testWidget = $.ui.classesWidget();
93+
94+
elementHasClasses( testWidget.element, "add", assert );
95+
96+
testWidget.option({
97+
classes: {
98+
"ui-classes-span": "custom-theme-span",
99+
"ui-classes-widget": "ui-theme-widget custom-theme-widget",
100+
"ui-classes-element": "ui-theme-element-2"
101+
}
102+
});
103+
104+
assert.lacksClasses( testWidget.element, "ui-theme-element",
105+
"Removing a class from the value removes the class" );
106+
107+
testWidget.option( "classes.ui-classes-element", "" );
108+
assert.hasClasses( testWidget.element, "ui-classes-element",
109+
"Setting to empty value leaves structure class" );
110+
assert.lacksClasses( testWidget.element, "ui-theme-element-2",
111+
"Setting empty value removes previous value classes" );
112+
assert.hasClasses( testWidget.span, "ui-classes-span custom-theme-span",
113+
"Adding a class to an empty value works as expected" );
114+
assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget",
115+
"Appending a class to the current value works as expected" );
116+
});
117+
118+
test( ".destroy() - class removal", function() {
119+
expect( 1 );
120+
121+
domEqual( "#widget", function() {
122+
$( "#widget" ).classesWidget().classesWidget( "destroy" );
123+
});
124+
});
125+
126+
test( "._add/_remove/_toggleClass()", function( assert ) {
127+
expect( 24 );
128+
129+
var widget = $( "#widget" ).classesWidget();
130+
131+
elementHasClasses( widget, "add", assert );
132+
133+
widget.classesWidget( "toggleClasses", false );
134+
elementLacksClasses( widget, "toggle", assert );
135+
136+
widget.classesWidget( "toggleClasses", true );
137+
elementHasClasses( widget, "toggle", assert );
138+
139+
widget.classesWidget( "removeClasses" );
140+
elementLacksClasses( widget, "remove", assert );
141+
});
142+
143+
}( jQuery ) );

‎tests/unit/widget/widget_core.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ test( "merge multiple option arguments", function() {
227227
$.widget( "ui.testWidget", {
228228
_create: function() {
229229
deepEqual( this.options, {
230+
classes: {},
230231
create: null,
231232
disabled: false,
232233
option1: "value1",
@@ -281,6 +282,7 @@ test( "._getCreateOptions()", function() {
281282
},
282283
_create: function() {
283284
deepEqual( this.options, {
285+
classes: {},
284286
create: null,
285287
disabled: false,
286288
option1: "override1",
@@ -485,10 +487,11 @@ test( ".option() - getter", function() {
485487

486488
options = div.testWidget( "option" );
487489
deepEqual( options, {
490+
baz: 5,
491+
classes: {},
488492
create: null,
489493
disabled: false,
490494
foo: "bar",
491-
baz: 5,
492495
qux: [ "quux", "quuux" ]
493496
}, "full options hash returned" );
494497
options.foo = "notbar";

0 commit comments

Comments
 (0)