Dialog: Fixed #3648: Use new CSS framework.

- Removed .ui-dialog-container div.
- Removed autoResize option.

tests/dialog.js

@@ -8,7 +8,6 @@
 
 var defaults = {
 	autoOpen: true,
-	autoResize: true,
 	buttons: {},
 	closeOnEscape: true,
 	closeText: 'close',
@@ -252,31 +251,6 @@ test("autoOpen", function() {
 	el.remove();
 });
 
-test("autoResize", function() {
-	expect(2);
-
-	var actual,
-		before,
-		expected,
-		handle;
-
-	el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: false });
-		expected = { height: el.height() };
-		handle = $(".ui-resizable-se", dlg());
-		drag(handle, 50, 50);
-		actual = { height: el.height() };
-		same(actual, expected, '.dialog({ autoResize: false })');
-	el.remove();
-	el = $('<div>content<br>content<br>content<br>content<br>content</div>').dialog({ autoResize: true });
-		before = { width: el.width(), height: el.height() };
-		handle = $(".ui-resizable-se", dlg());
-		drag(handle, 50, 50);
-		expected = { width: before.width + 50, height: before.height + 50 };
-		actual = { width: el.width(), height: el.height() };
-		same(actual, expected, '.dialog({ autoResize: true })');
-	el.remove();
-});
-
 test("buttons", function() {
 	expect(17);
 

ui/ui.dialog.js

@@ -36,22 +36,44 @@ $.widget("ui.dialog", {
 		var self = this,
 			options = this.options,
 
-			uiDialogContent = this.element
+			title = options.title || ' ',
+			titleId = $.ui.dialog.getTitleId(this.element),
+
+			uiDialog = (this.uiDialog = $('<div/>'))
 				.appendTo(document.body)
+				.hide()
+				.addClass(
+					'ui-dialog ' +
+					'ui-widget ' +
+					'ui-widget-content ' +
+					'ui-corner-all ' +
+					options.dialogClass
+				)
+				.css({
+					position: 'absolute',
+					overflow: 'hidden',
+					zIndex: options.zIndex
+				})
+				// setting tabIndex makes the div focusable
+				// setting outline to 0 prevents a border on focus in Mozilla
+				.attr('tabIndex', -1).css('outline', 0).keydown(function(ev) {
+					(options.closeOnEscape && ev.keyCode
+						&& ev.keyCode == $.ui.keyCode.ESCAPE && self.close());
+				})
+				.attr({
+					role: 'dialog',
+					'aria-labelledby': titleId
+				})
+				.mouseup(function() {
+					self.moveToTop();
+				}),
+
+			uiDialogContent = this.element
 				.removeAttr('title')
 				.addClass(
 					'ui-dialog-content ' +
 					'ui-widget-content')
-				.wrap('<div></div>')
+				.appendTo(uiDialog),
-				.wrap('<div></div>'),
-
-			uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent())
-				.addClass('ui-dialog-container')
-				.css({
-					position: 'relative',
-					width: '100%',
-					height: '100%'
-				}),
 
 			uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
 				.addClass(
@@ -63,7 +85,7 @@ $.widget("ui.dialog", {
 				.mousedown(function() {
 					self.moveToTop();
 				})
-				.prependTo(uiDialogContainer),
+				.prependTo(uiDialog),
 
 			uiDialogTitlebarClose = $('<a href="#"/>')
 				.addClass(
@@ -96,54 +118,18 @@ $.widget("ui.dialog", {
 				.text(options.closeText)
 				.appendTo(uiDialogTitlebarClose),
 
-			title = options.title || '&nbsp;',
-			titleId = $.ui.dialog.getTitleId(this.element),
 			uiDialogTitle = $('<span/>')
 				.addClass('ui-dialog-title')
 				.attr('id', titleId)
 				.html(title)
 				.prependTo(uiDialogTitlebar),
 
-			uiDialog = (this.uiDialog = uiDialogContainer.parent())
-				.hide()
-				.addClass(
-					'ui-dialog ' +
-					'ui-widget ' +
-					'ui-widget-content ' +
-					'ui-corner-all'
-				)
-				.addClass(options.dialogClass)
-				.css({
-					position: 'absolute',
-					width: options.width,
-					height: options.height,
-					overflow: 'hidden',
-					zIndex: options.zIndex
-				})
-				// setting tabIndex makes the div focusable
-				// setting outline to 0 prevents a border on focus in Mozilla
-				.attr('tabIndex', -1).css('outline', 0).keydown(function(ev) {
-					(options.closeOnEscape && ev.keyCode
-						&& ev.keyCode == $.ui.keyCode.ESCAPE && self.close());
-				})
-				.attr({
-					role: 'dialog',
-					'aria-labelledby': titleId
-				})
-				.mouseup(function() {
-					self.moveToTop();
-				}),
-
 			uiDialogButtonPane = (this.uiDialogButtonPane = $('<div></div>'))
 				.addClass(
 					'ui-dialog-buttonpane ' +
 					'ui-widget-content ' +
 					'ui-helper-clearfix'
 				)
-				.css({
-					position: 'absolute',
-					bottom: 0
-				})
 				.appendTo(uiDialog);
 
 		uiDialogTitlebar.find("*").add(uiDialogTitlebar).disableSelection();
@@ -219,9 +205,9 @@ $.widget("ui.dialog", {
 
 		this.overlay = this.options.modal ? new $.ui.dialog.overlay(this) : null;
 		(this.uiDialog.next().length && this.uiDialog.appendTo('body'));
+		this._size();
 		this._position(this.options.position);
 		this.uiDialog.show(this.options.show);
-		(this.options.autoResize && this._size());
 		this.moveToTop(true);
 
 		// prevent tabbing out of modal dialogs
@@ -306,6 +292,7 @@ $.widget("ui.dialog", {
 
 		this.uiDialog.resizable({
 			cancel: '.ui-dialog-content',
+			alsoResize: '.ui-dialog-content',
 			helper: options.resizeHelper,
 			maxWidth: options.maxWidth,
 			maxHeight: options.maxHeight,
@@ -315,12 +302,10 @@ $.widget("ui.dialog", {
 				(options.resizeStart && options.resizeStart.apply(self.element[0], arguments));
 			},
 			resize: function() {
-				(options.autoResize && self._size.apply(self));
 				(options.resize && options.resize.apply(self.element[0], arguments));
 			},
 			handles: resizeHandles,
 			stop: function() {
-				(options.autoResize && self._size.apply(self));
 				(options.resizeStop && options.resizeStop.apply(self.element[0], arguments));
 				$.ui.dialog.overlay.resize();
 			}
@@ -426,24 +411,32 @@ $.widget("ui.dialog", {
 	},
 	
 	_size: function() {
-		var container = this.uiDialogContainer,
+		/* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
-			titlebar = this.uiDialogTitlebar,
+		 * divs will both have width and height set
-			content = this.element,
+		 */
-			tbMargin = (parseInt(content.css('margin-top'), 10) || 0)
-				+ (parseInt(content.css('margin-bottom'), 10) || 0),
-			lrMargin = (parseInt(content.css('margin-left'), 10) || 0)
-				+ (parseInt(content.css('margin-right'), 10) || 0);
-		content.height(container.height() - titlebar.outerHeight() - tbMargin);
-		content.width(container.width() - lrMargin);
-	}
 
+		// reset content sizing
+		this.element.css({
+			height: 0,
+			width: 'auto'
+		});
+		
+		// reset the wrapper sizing and determine the height of all of the
+		// non-content elements
+		var nonContentHeight = this.uiDialog.css({
+				height: 'auto',
+				width: this.options.width
+			})
+			.height();
+		
+		this.element.height(this.options.height - nonContentHeight);
+	}
 });
 
 $.extend($.ui.dialog, {
 	version: "@VERSION",
 	defaults: {
 		autoOpen: true,
-		autoResize: true,
 		bgiframe: false,
 		buttons: {},
 		closeOnEscape: true,