Dialog: Add classes option

Ref #7053
Ref gh-1411

tests/unit/dialog/dialog.html

@@ -5,10 +5,14 @@
 	<title>jQuery UI Dialog Test Suite</title>
 
 	<script src="../../jquery.js"></script>
+	<script>
+	$.uiBackCompat = false;
+	</script>
 	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
 	<script>
 	TestHelpers.loadResources({
 		css: [ "core", "dialog" ],

tests/unit/dialog/dialog_common.js

@@ -3,11 +3,13 @@ TestHelpers.commonWidgetTests( "dialog", {
 		appendTo: "body",
 		autoOpen: true,
 		buttons: [],
-		classes: {},
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
 		closeOnEscape: true,
 		closeText: "Close",
 		disabled: false,
-		dialogClass: "",
 		draggable: true,
 		height: "auto",
 		hide: null,

tests/unit/dialog/dialog_common_deprecated.js

@@ -0,0 +1,47 @@
+TestHelpers.commonWidgetTests( "dialog", {
+	defaults: {
+		appendTo: "body",
+		autoOpen: true,
+		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
+		closeOnEscape: true,
+		closeText: "close",
+		dialogClass: "",
+		disabled: false,
+		draggable: true,
+		height: "auto",
+		hide: null,
+		maxHeight: null,
+		maxWidth: null,
+		minHeight: 150,
+		minWidth: 150,
+		modal: false,
+		position: {
+			my: "center",
+			at: "center",
+			of: window,
+			collision: "fit",
+			using: $.ui.dialog.prototype.options.position.using
+		},
+		resizable: true,
+		show: null,
+		title: null,
+		width: 300,
+
+		// callbacks
+		beforeClose: null,
+		close: null,
+		create: null,
+		drag: null,
+		dragStart: null,
+		dragStop: null,
+		focus: null,
+		open: null,
+		resize: null,
+		resizeStart: null,
+		resizeStop: null
+	}
+});

tests/unit/dialog/dialog_core.js

@@ -7,11 +7,60 @@
 // TODO add teardown callback to remove dialogs
 module("dialog: core");
 
+test( "markup structure", function( assert ) {
+	expect( 11 );
+
+	var element = $( "<div>" ).dialog({
+			buttons: [ {
+				text: "Ok",
+				click: $.noop
+			} ]
+		}),
+		widget = element.dialog( "widget" ),
+		titlebar = widget.find( ".ui-dialog-titlebar" ),
+		title = titlebar.find( ".ui-dialog-title" ),
+		close = titlebar.find( ".ui-dialog-titlebar-close" ),
+		buttonpane = widget.find( ".ui-dialog-buttonpane" ),
+		buttonset = widget.find( ".ui-dialog-buttonset" ),
+		buttons = buttonset.find( ".ui-button" );
+
+	assert.hasClasses( widget, "ui-dialog ui-dialog-buttons ui-widget ui-widget-content" );
+	assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
+	equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
+	assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
+	equal( close.length, 1, "Titlebar has exactly one close button" );
+	equal( title.length, 1, "Titlebar has exactly one title" );
+	assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
+	assert.hasClasses( buttonpane, "ui-dialog-buttonpane ui-widget-content" );
+	equal( buttonpane.length, 1, "Dialog has exactly one buttonpane" );
+	equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" );
+	equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" );
+
+});
+
+test( "markup structure - no buttons", function( assert ) {
+	expect( 7 );
+
+	var element = $( "<div>" ).dialog(),
+		widget = element.dialog( "widget" ),
+		titlebar = widget.find( ".ui-dialog-titlebar" ),
+		title = titlebar.find( ".ui-dialog-title" ),
+		close = titlebar.find( ".ui-dialog-titlebar-close" );
+
+	assert.hasClasses( widget, "ui-dialog ui-widget ui-widget-content" );
+	assert.hasClasses( titlebar, "ui-dialog-titlebar ui-widget-header" );
+	equal( titlebar.length, 1, "Dialog has exactly one titlebar" );
+	assert.hasClasses( close, "ui-dialog-titlebar-close ui-widget" );
+	equal( close.length, 1, "Titlebar has exactly one close button" );
+	equal( title.length, 1, "Titlebar has exactly one title" );
+	assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
+});
+
 test("title id", function() {
 	expect(1);
 
 	var titleId,
-		element = $("<div></div>").dialog();
+		element = $("<div>").dialog();
 
 	titleId = element.dialog("widget").find(".ui-dialog-title").attr("id");
 	ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id");
@@ -21,7 +70,7 @@ test("title id", function() {
 test( "ARIA", function() {
 	expect( 4 );
 
-	var element = $( "<div></div>" ).dialog(),
+	var element = $( "<div>" ).dialog(),
 		wrapper = element.dialog( "widget" );
 	equal( wrapper.attr( "role" ), "dialog", "dialog role" );
 	equal( wrapper.attr( "aria-labelledby" ), wrapper.find( ".ui-dialog-title" ).attr( "id" ) );

tests/unit/dialog/dialog_deprecated.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Dialog Test Suite</title>
+
+	<script src="../../jquery.js"></script>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		css: [ "core", "dialog" ],
+		js: [
+			"ui/core.js",
+			"ui/widget.js",
+			"ui/position.js",
+			"ui/mouse.js",
+			"ui/draggable.js",
+			"ui/resizable.js",
+			"ui/button.js",
+			"ui/effect.js",
+			"ui/effect-blind.js",
+			"ui/effect-clip.js",
+			"ui/effect-explode.js",
+			"ui/dialog.js"
+		]
+	});
+	</script>
+
+	<script src="dialog_common_derecated.js"></script>
+	<script src="dialog_core.js"></script>
+	<script src="dialog_events.js"></script>
+	<script src="dialog_methods.js"></script>
+	<script src="dialog_options.js"></script>
+	<script src="dialog_deprecated.js"></script>
+	<script src="dialog_test_helpers.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+	<div id="dialog1"></div>
+	<div id="dialog2"></div>
+	<div id="form-dialog" title="Profile Information">
+		<!-- create a spacer to ensure there's enough space to scroll -->
+		<div style="height: 250px;">...</div>
+		<fieldset>
+			<legend>Please share some personal information</legend>
+			<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+			<label for="favorite-color">Your favorite color</label><input id="favorite-color">
+		</fieldset>
+		<div role="group" aria-describedby="section2">
+			<p id="section2">Some more (optional) information</p>
+			<label for="favorite-food">Favorite food</label><input id="favorite-food">
+		</div>
+	</div>
+	<div class="wrap" id="wrap1"></div>
+	<div class="wrap" id="wrap2"></div>
+</div>
+</body>
+</html>

tests/unit/dialog/dialog_deprecated.js

@@ -0,0 +1,28 @@
+(function( $ ) {
+
+module( "dialog (deprecated): options" );
+
+test( "dialogClass", function() {
+	expect( 6 );
+
+	var element = $( "<div>" ).dialog(),
+		widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), false, "dialogClass not specified. class not added" );
+	element.remove();
+
+	element = $( "<div>" ).dialog({ dialogClass: "foo" });
+	widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), true, "dialogClass in init, foo class added" );
+	element.dialog( "option", "dialogClass", "foobar" );
+	equal( widget.is( ".foo" ), false, "dialogClass changed, previous one was removed" );
+	equal( widget.is( ".foobar" ), true, "dialogClass changed, new one was added" );
+	element.remove();
+
+	element = $( "<div>" ).dialog({ dialogClass: "foo bar" });
+	widget = element.dialog( "widget" );
+	equal( widget.is( ".foo" ), true, "dialogClass in init, two classes. foo class added" );
+	equal( widget.is( ".bar" ), true, "dialogClass in init, two classes. bar class added" );
+	element.remove();
+});
+
+})( jQuery );

tests/unit/dialog/dialog_options.js

@@ -224,26 +224,6 @@ test("closeText", function() {
 	element.remove();
 });
 
-test("dialogClass", function() {
-	expect( 6 );
-
-	var element = $("<div></div>").dialog();
-		equal(element.dialog("widget").is(".foo"), false, "dialogClass not specified. foo class added");
-	element.remove();
-
-	element = $("<div></div>").dialog({ dialogClass: "foo" });
-		equal(element.dialog("widget").is(".foo"), true, "dialogClass in init. foo class added");
-	element.dialog( "option", "dialogClass", "foobar" );
-		equal( element.dialog("widget").is(".foo"), false, "dialogClass changed, previous one was removed" );
-		equal( element.dialog("widget").is(".foobar"), true, "dialogClass changed, new one was added" );
-	element.remove();
-
-	element = $("<div></div>").dialog({ dialogClass: "foo bar" });
-		equal(element.dialog("widget").is(".foo"), true, "dialogClass in init, two classes. foo class added");
-		equal(element.dialog("widget").is(".bar"), true, "dialogClass in init, two classes. bar class added");
-	element.remove();
-});
-
 test("draggable", function() {
 	expect(4);
 

ui/dialog.js

@@ -37,15 +37,18 @@
 	}
 }(function( $ ) {
 
-return $.widget( "ui.dialog", {
+$.widget( "ui.dialog", {
 	version: "@VERSION",
 	options: {
 		appendTo: "body",
 		autoOpen: true,
 		buttons: [],
+		classes: {
+			"ui-dialog": "ui-corner-all",
+			"ui-dialog-titlebar": "ui-corner-all"
+		},
 		closeOnEscape: true,
 		closeText: "Close",
-		dialogClass: "",
 		draggable: true,
 		hide: null,
 		height: "auto",
@@ -122,9 +125,10 @@ return $.widget( "ui.dialog", {
 		this.element
 			.show()
 			.removeAttr( "title" )
-			.addClass( "ui-dialog-content ui-widget-content" )
 			.appendTo( this.uiDialog );
 
+		this._addClass( "ui-dialog-content", "ui-widget-content" );
+
 		this._createTitlebar();
 		this._createButtonPane();
 
@@ -163,7 +167,6 @@ return $.widget( "ui.dialog", {
 
 		this.element
 			.removeUniqueId()
-			.removeClass( "ui-dialog-content ui-widget-content" )
 			.css( this.originalCss )
 			// Without detaching first, the following becomes really slow
 			.detach();
@@ -336,8 +339,6 @@ return $.widget( "ui.dialog", {
 
 	_createWrapper: function() {
 		this.uiDialog = $("<div>")
-			.addClass( "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front " +
-				this.options.dialogClass )
 			.hide()
 			.attr({
 				// Setting tabIndex makes the div focusable
@@ -346,6 +347,7 @@ return $.widget( "ui.dialog", {
 			})
 			.appendTo( this._appendTo() );
 
+		this._addClass( this.uiDialog, "ui-dialog", "ui-widget ui-widget-content ui-front" );
 		this._on( this.uiDialog, {
 			keydown: function( event ) {
 				if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
@@ -395,9 +397,9 @@ return $.widget( "ui.dialog", {
 	_createTitlebar: function() {
 		var uiDialogTitle;
 
-		this.uiDialogTitlebar = $( "<div>" )
+		this.uiDialogTitlebar = $( "<div>" );
-			.addClass( "ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" )
+		this._addClass( this.uiDialogTitlebar,
-			.prependTo( this.uiDialog );
+			"ui-dialog-titlebar", "ui-widget-header ui-helper-clearfix" );
 		this._on( this.uiDialogTitlebar, {
 			mousedown: function( event ) {
 				// Don't prevent click on close button (#8838)
@@ -421,8 +423,9 @@ return $.widget( "ui.dialog", {
 				},
 				text: false
 			})
-			.addClass( "ui-dialog-titlebar-close" )
 			.appendTo( this.uiDialogTitlebar );
+
+		this._addClass( this.uiDialogTitlebarClose, "ui-dialog-titlebar-close" );
 		this._on( this.uiDialogTitlebarClose, {
 			click: function( event ) {
 				event.preventDefault();
@@ -430,12 +433,12 @@ return $.widget( "ui.dialog", {
 			}
 		});
 
-		uiDialogTitle = $( "<span>" )
+		uiDialogTitle = $( "<span>" ).uniqueId().prependTo( this.uiDialogTitlebar );
-			.uniqueId()
+		this._addClass( uiDialogTitle, "ui-dialog-title" );
-			.addClass( "ui-dialog-title" )
-			.prependTo( this.uiDialogTitlebar );
 		this._title( uiDialogTitle );
 
+		this.uiDialogTitlebar.prependTo( this.uiDialog );
+
 		this.uiDialog.attr({
 			"aria-labelledby": uiDialogTitle.attr( "id" )
 		});
@@ -449,12 +452,13 @@ return $.widget( "ui.dialog", {
 	},
 
 	_createButtonPane: function() {
-		this.uiDialogButtonPane = $( "<div>" )
+		this.uiDialogButtonPane = $( "<div>" );
-			.addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" );
+		this._addClass( this.uiDialogButtonPane, "ui-dialog-buttonpane",
+			"ui-widget-content ui-helper-clearfix" );
 
 		this.uiButtonSet = $( "<div>" )
-			.addClass( "ui-dialog-buttonset" )
 			.appendTo( this.uiDialogButtonPane );
+		this._addClass( this.uiButtonSet, "ui-dialog-buttonset" );
 
 		this._createButtons();
 	},
@@ -468,7 +472,7 @@ return $.widget( "ui.dialog", {
 		this.uiButtonSet.empty();
 
 		if ( $.isEmptyObject( buttons ) || ($.isArray( buttons ) && !buttons.length) ) {
-			this.uiDialog.removeClass( "ui-dialog-buttons" );
+			this._removeClass( this.uiDialog, "ui-dialog-buttons" );
 			return;
 		}
 
@@ -494,7 +498,7 @@ return $.widget( "ui.dialog", {
 				.button( buttonOptions )
 				.appendTo( that.uiButtonSet );
 		});
-		this.uiDialog.addClass( "ui-dialog-buttons" );
+		this._addClass( this.uiDialog, "ui-dialog-buttons" );
 		this.uiDialogButtonPane.appendTo( this.uiDialog );
 	},
 
@@ -514,7 +518,7 @@ return $.widget( "ui.dialog", {
 			handle: ".ui-dialog-titlebar",
 			containment: "document",
 			start: function( event, ui ) {
-				$( this ).addClass( "ui-dialog-dragging" );
+				that._addClass( $( this ), "ui-dialog-dragging" );
 				that._blockFrames();
 				that._trigger( "dragStart", event, filteredUi( ui ) );
 			},
@@ -531,7 +535,7 @@ return $.widget( "ui.dialog", {
 						"top" + (top >= 0 ? "+" : "") + top,
 					of: that.window
 				};
-				$( this ).removeClass( "ui-dialog-dragging" );
+				that._removeClass( $( this ), "ui-dialog-dragging" );
 				that._unblockFrames();
 				that._trigger( "dragStop", event, filteredUi( ui ) );
 			}
@@ -568,7 +572,7 @@ return $.widget( "ui.dialog", {
 			minHeight: this._minHeight(),
 			handles: resizeHandles,
 			start: function( event, ui ) {
-				$( this ).addClass( "ui-dialog-resizing" );
+				that._addClass( $( this ), "ui-dialog-resizing" );
 				that._blockFrames();
 				that._trigger( "resizeStart", event, filteredUi( ui ) );
 			},
@@ -588,7 +592,7 @@ return $.widget( "ui.dialog", {
 						"top" + (top >= 0 ? "+" : "") + top,
 					of: that.window
 				};
-				$( this ).removeClass( "ui-dialog-resizing" );
+				that._removeClass( $( this ), "ui-dialog-resizing" );
 				that._unblockFrames();
 				that._trigger( "resizeStop", event, filteredUi( ui ) );
 			}
@@ -676,12 +680,6 @@ return $.widget( "ui.dialog", {
 		var isDraggable, isResizable,
 			uiDialog = this.uiDialog;
 
-		if ( key === "dialogClass" ) {
-			uiDialog
-				.removeClass( this.options.dialogClass )
-				.addClass( value );
-		}
-
 		if ( key === "disabled" ) {
 			return;
 		}
@@ -850,8 +848,9 @@ return $.widget( "ui.dialog", {
 		}
 
 		this.overlay = $( "<div>" )
-			.addClass( "ui-widget-overlay ui-front" )
 			.appendTo( this._appendTo() );
+
+		this._addClass( this.overlay, null, "ui-widget-overlay ui-front" );
 		this._on( this.overlay, {
 			mousedown: "_keepFocus"
 		});
@@ -881,4 +880,30 @@ return $.widget( "ui.dialog", {
 	}
 });
 
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for dialogClass option
+	$.widget( "ui.dialog", $.ui.dialog, {
+		options: {
+			dialogClass: ""
+		},
+		_createWrapper: function() {
+			this._super();
+			this.uiDialog.addClass( this.options.dialogClass );
+		},
+		_setOption: function( key, value ) {
+			if ( key === "dialogClass" ) {
+				this.uiDialog
+					.removeClass( this.options.dialogClass )
+					.addClass( value );
+			}
+			this._superApply( arguments );
+		}
+	});
+}
+
+return $.ui.dialog;
+
 }));