Skip to content

Commit fa5cbaf

Browse files
arschmitzarschmitz
committed
All: Example of _addClass _removeClass implementation
1 parent 4e860dc commit fa5cbaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+800
-189
lines changed

‎demos/autocomplete/combobox.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@
5858
source: $.proxy( this, "_source" )
5959
})
6060
.tooltip({
61-
tooltipClass: "ui-state-highlight"
61+
classes: {
62+
"ui-tooltip": "ui-state-highlight"
63+
}
6264
});
6365

6466
this._on( this.input, {

‎tests/unit/accordion/accordion_common.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@ TestHelpers.commonWidgetTests( "accordion", {
22
defaults: {
33
active: 0,
44
animate: {},
5+
classes: {
6+
"ui-accordion": "",
7+
"ui-accordion-header": "ui-corner-top",
8+
"ui-accordion-header-active": "",
9+
"ui-accordion-header-collapsed": "ui-corner-all",
10+
"ui-accordion-content": "ui-corner-bottom",
11+
"ui-accordion-content-active": "",
12+
"ui-accordion-header-icon": "",
13+
"ui-accordion-icons": ""
14+
},
515
collapsible: false,
616
disabled: false,
717
event: "click",

‎tests/unit/accordion/accordion_core.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,23 @@ module( "accordion: core", setupTeardown() );
77

88
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
99
test( "markup structure: " + type, function() {
10-
expect( 4 );
11-
var element = $( selector ).accordion();
12-
ok( element.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
13-
equal( element.find( ".ui-accordion-header" ).length, 3,
10+
expect( 8 );
11+
var element = $( selector ).accordion(),
12+
headers = element.find( ".ui-accordion-header" ),
13+
panels = element.find( ".ui-accordion-content" );
14+
15+
ok( element.is( ".ui-accordion.ui-widget" ), "main has proper classes" );
16+
ok( headers.hasClass( "ui-corner-top" ), "header is .ui-corner-top" );
17+
ok( !headers.eq( 0 ).hasClass( "ui-corner-all" ), "open header is not .ui-corner-all" );
18+
ok( headers.eq( 1 ).hasClass( "ui-corner-all" ), "closed header is .ui-corner-all" );
19+
ok( headers.next().is( ".ui-accordion-content.ui-widget-content.ui-corner-bottom" ),
20+
"panel has proper classes" );
21+
22+
equal( headers.length, 3,
1423
".ui-accordion-header elements exist, correct number" );
15-
equal( element.find( ".ui-accordion-content" ).length, 3,
24+
equal( panels.length, 3,
1625
".ui-accordion-content elements exist, correct number" );
17-
deepEqual( element.find( ".ui-accordion-header" ).next().get(),
18-
element.find( ".ui-accordion-content" ).get(),
26+
deepEqual( headers.next().get(), panels.get(),
1927
"content panels come immediately after headers" );
2028
});
2129
});

‎tests/unit/accordion/accordion_methods.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,17 @@ var equalHeight = TestHelpers.accordion.equalHeight,
77
module( "accordion: methods", setupTeardown() );
88

99
test( "destroy", function() {
10-
expect( 1 );
10+
expect( 2 );
1111
domEqual( "#list1", function() {
1212
$( "#list1" ).accordion().accordion( "destroy" );
1313
});
14+
15+
// Animate
16+
domEqual( "#list1", function() {
17+
$( "#list1" ).accordion()
18+
.accordion( "option", "active", 1 )
19+
.accordion( "destroy" );
20+
});
1421
});
1522

1623
test( "enable/disable", function() {

‎tests/unit/autocomplete/autocomplete_common.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", {
22
defaults: {
33
appendTo: null,
44
autoFocus: false,
5+
classes: {
6+
"ui-autocomplete": "",
7+
"ui-autocomplete-input": "",
8+
"ui-autocomplete-loading": ""
9+
},
510
delay: 300,
611
disabled: false,
712
messages: {

‎tests/unit/autocomplete/autocomplete_core.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22

33
module( "autocomplete: core" );
44

5+
test( "markup structure", function() {
6+
expect( 2 );
7+
var element = $( "#autocomplete" ).autocomplete(),
8+
menu = element.autocomplete( "widget" );
9+
10+
ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" );
11+
ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" );
12+
});
13+
514
test( "prevent form submit on enter when menu is active", function() {
615
expect( 2 );
716
var event,

‎tests/unit/dialog/dialog.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>jQuery UI Dialog Test Suite</title>
66

77
<script src="../../jquery.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
811
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
912
<script src="../../../external/qunit/qunit.js"></script>
1013
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

‎tests/unit/dialog/dialog_common.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,22 @@ TestHelpers.commonWidgetTests( "dialog", {
33
appendTo: "body",
44
autoOpen: true,
55
buttons: [],
6+
classes: {
7+
"ui-dialog": "ui-corner-all",
8+
"ui-dialog-content": "",
9+
"ui-dialog-titlebar": "ui-corner-all",
10+
"ui-dialog-titlebar-close": "",
11+
"ui-dialog-title": "",
12+
"ui-dialog-buttons": "",
13+
"ui-dialog-buttonpane": "",
14+
"ui-dialog-buttonset": "",
15+
"ui-dialog-dragging": "",
16+
"ui-dialog-resizing": "",
17+
"ui-widget-overlay": ""
18+
},
619
closeOnEscape: true,
720
closeText: "Close",
821
disabled: false,
9-
dialogClass: "",
1022
draggable: true,
1123
height: "auto",
1224
hide: null,

‎tests/unit/dialog/dialog_common_deprecated.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
TestHelpers.commonWidgetTests( "dialog", {
2+
defaults: {
3+
appendTo: "body",
4+
autoOpen: true,
5+
buttons: [],
6+
classes: {
7+
"ui-dialog": "ui-corner-all",
8+
"ui-dialog-content": "",
9+
"ui-dialog-titlebar": "ui-corner-all",
10+
"ui-dialog-titlebar-close": "",
11+
"ui-dialog-title": "",
12+
"ui-dialog-buttons": "",
13+
"ui-dialog-buttonpane": "",
14+
"ui-dialog-buttonset": "",
15+
"ui-dialog-dragging": "",
16+
"ui-dialog-resizing": "",
17+
"ui-widget-overlay": ""
18+
},
19+
closeOnEscape: true,
20+
closeText: "close",
21+
dialogClass: "",
22+
disabled: false,
23+
draggable: true,
24+
height: "auto",
25+
hide: null,
26+
maxHeight: null,
27+
maxWidth: null,
28+
minHeight: 150,
29+
minWidth: 150,
30+
modal: false,
31+
position: {
32+
my: "center",
33+
at: "center",
34+
of: window,
35+
collision: "fit",
36+
using: $.ui.dialog.prototype.options.position.using
37+
},
38+
resizable: true,
39+
show: null,
40+
title: null,
41+
width: 300,
42+
43+
// callbacks
44+
beforeClose: null,
45+
close: null,
46+
create: null,
47+
drag: null,
48+
dragStart: null,
49+
dragStop: null,
50+
focus: null,
51+
open: null,
52+
resize: null,
53+
resizeStart: null,
54+
resizeStop: null
55+
}
56+
});

‎tests/unit/dialog/dialog_core.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,37 @@
77
// TODO add teardown callback to remove dialogs
88
module("dialog: core");
99

10+
test( "markup structure", function() {
11+
expect( 7 );
12+
var element = $("<div></div>").dialog({
13+
buttons: [{
14+
text: "Ok",
15+
click: $.noop
16+
}]
17+
}),
18+
widget = element.dialog( "widget" ),
19+
titlebar = widget.find( ".ui-dialog-titlebar" ),
20+
close = titlebar.find( "button" ),
21+
buttonpane = widget.find( ".ui-dialog-buttonpane" );
22+
23+
ok( widget.is( ".ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-dialog-buttons" ),
24+
"Widget has proper classes" );
25+
26+
ok( titlebar.is( ".ui-dialog-titlebar.ui-corner-all.ui-widget-header"),
27+
"Titlebar has proper classes");
28+
29+
ok( titlebar.find( ".ui-dialog-title" ).length, "Title is .ui-dialog-title" );
30+
31+
ok( close.hasClass( "ui-dialog-titlebar-close" ), "Close button is .ui-dialog-titlebar-close" );
32+
33+
ok( element.is( ".ui-dialog-content.ui-widget-content" ), "Element is .ui-widget-content" );
34+
35+
ok( buttonpane.is( ".ui-dialog-buttonpane.ui-widget-content" ),
36+
"Buttonpane is .ui-widget-content" );
37+
ok( buttonpane.find( ".ui-dialog-buttonset" ).length, "buttonset is .ui-dialog-buttonset" );
38+
39+
});
40+
1041
test("title id", function() {
1142
expect(1);
1243

‎tests/unit/dialog/dialog_deprecated.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Dialog Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script>
13+
TestHelpers.loadResources({
14+
css: [ "core", "dialog" ],
15+
js: [
16+
"ui/core.js",
17+
"ui/widget.js",
18+
"ui/position.js",
19+
"ui/mouse.js",
20+
"ui/draggable.js",
21+
"ui/resizable.js",
22+
"ui/button.js",
23+
"ui/effect.js",
24+
"ui/effect-blind.js",
25+
"ui/effect-clip.js",
26+
"ui/effect-explode.js",
27+
"ui/dialog.js"
28+
]
29+
});
30+
</script>
31+
32+
<script src="dialog_common_derecated.js"></script>
33+
<script src="dialog_core.js"></script>
34+
<script src="dialog_events.js"></script>
35+
<script src="dialog_methods.js"></script>
36+
<script src="dialog_options.js"></script>
37+
<script src="dialog_deprecated.js"></script>
38+
<script src="dialog_test_helpers.js"></script>
39+
40+
<script src="../swarminject.js"></script>
41+
</head>
42+
<body>
43+
44+
<div id="qunit"></div>
45+
<div id="qunit-fixture">
46+
<div id="dialog1"></div>
47+
<div id="dialog2"></div>
48+
<div id="form-dialog" title="Profile Information">
49+
<!-- create a spacer to ensure there's enough space to scroll -->
50+
<div style="height: 250px;">...</div>
51+
<fieldset>
52+
<legend>Please share some personal information</legend>
53+
<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
54+
<label for="favorite-color">Your favorite color</label><input id="favorite-color">
55+
</fieldset>
56+
<div role="group" aria-describedby="section2">
57+
<p id="section2">Some more (optional) information</p>
58+
<label for="favorite-food">Favorite food</label><input id="favorite-food">
59+
</div>
60+
</div>
61+
<div class="wrap" id="wrap1"></div>
62+
<div class="wrap" id="wrap2"></div>
63+
</div>
64+
</body>
65+
</html>

‎tests/unit/dialog/dialog_deprecated.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/*
2+
* dialog_deprecated.js
3+
*/
4+
(function( $ ) {
5+
6+
module( "dialog (deprecated): options" );
7+
8+
test( "dialogClass", function() {
9+
expect( 6 );
10+
11+
var element = $( "<div></div>" ).dialog(),
12+
widget = element.dialog( "widget" );
13+
equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" );
14+
element.remove();
15+
16+
element = $( "<div></div>" ).dialog({ dialogClass: "foo" });
17+
widget = element.dialog( "widget" );
18+
equal( widget.is( ".foo" ), true, "dialogClass in init. foo class added");
19+
element.dialog( "option", "dialogClass", "foobar" );
20+
equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" );
21+
equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" );
22+
element.remove();
23+
24+
element = $( "<div></div>" ).dialog({ dialogClass: "foo bar" });
25+
widget = element.dialog( "widget" );
26+
equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" );
27+
equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" );
28+
element.remove();
29+
});
30+
31+
})( jQuery );

‎tests/unit/dialog/dialog_options.js

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -224,26 +224,6 @@ test("closeText", function() {
224224
element.remove();
225225
});
226226

227-
test("dialogClass", function() {
228-
expect( 6 );
229-
230-
var element = $("<div></div>").dialog();
231-
equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added");
232-
element.remove();
233-
234-
element = $("<div></div>").dialog({ dialogClass: "foo" });
235-
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added");
236-
element.dialog( "option", "dialogClass", "foobar" );
237-
equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" );
238-
equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" );
239-
element.remove();
240-
241-
element = $("<div></div>").dialog({ dialogClass: "foo bar" });
242-
equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added");
243-
equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added");
244-
element.remove();
245-
});
246-
247227
test("draggable", function() {
248228
expect(4);
249229

‎tests/unit/menu/menu_common.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
TestHelpers.commonWidgetTests( "menu", {
22
defaults: {
3+
classes: {
4+
"ui-menu": "",
5+
"ui-menu-icons": "",
6+
"ui-menu-icon": "",
7+
"ui-menu-item": "",
8+
"ui-menu-item-wrapper": "",
9+
"ui-menu-divider": ""
10+
},
311
disabled: false,
412
icons: {
513
submenu: "ui-icon-caret-1-e"

‎tests/unit/menu/menu_core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module( "menu: core" );
55
test( "markup structure", function() {
66
expect( 6 );
77
var element = $( "#menu1" ).menu();
8-
ok( element.hasClass( "ui-menu" ), "main element is .ui-menu" );
8+
ok( element.hasClass( "ui-menu" ), "main element has proper classes" );
99
element.children().each(function( index ) {
1010
ok( $( this ).hasClass( "ui-menu-item" ), "child " + index + " is .ui-menu-item" );
1111
});

‎tests/unit/progressbar/progressbar_common.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
TestHelpers.commonWidgetTests( "progressbar", {
22
defaults: {
3+
classes: {
4+
"ui-progressbar": "ui-corner-all",
5+
"ui-progressbar-value": "ui-corner-left",
6+
"ui-progressbar-overlay": "",
7+
"ui-progressbar-indeterminate": "",
8+
"ui-progressbar-complete": "ui-corner-right"
9+
},
310
disabled: false,
411
max: 100,
512
value: 0,

0 commit comments

Comments
 (0)