r1177 - in trunk: tests ui
Author: scott.gonzalez
Date: Thu Dec 18 19:05:01 2008
New Revision: 1177
Modified:
trunk/tests/dialog.js
trunk/ui/ui.dialog.js
Log:
Dialog: Fixed #3648: Use new CSS framework.
- Removed .ui-dialog-container div.
- Removed autoResize option.
Modified: trunk/tests/dialog.js
==============================================================================
--- trunk/tests/dialog.js (original)
+++ trunk/tests/dialog.js Thu Dec 18 19:05:01 2008
@@ -8,7 +8,6 @@
var defaults = {
autoOpen: true,
- autoResize: true,
buttons: {},
closeOnEscape: true,
closeText: 'close',
@@ -249,31 +248,6 @@
el = $('<div></div>').dialog({ autoOpen: true });
isOpen('.dialog({ autoOpen: true })');
- el.remove();
-});
-
-test("autoResize", function() {
- expect(2);
-
- var actual,
- before,
- expected,
- handle;
-
- el =
$('<div>content
content
content
content
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
content
content
content
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();
});
Modified: trunk/ui/ui.dialog.js
==============================================================================
--- trunk/ui/ui.dialog.js (original)
+++ trunk/ui/ui.dialog.js Thu Dec 18 19:05:01 2008
@@ -36,22 +36,44 @@
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>')
- .wrap('<div></div>'),
-
- uiDialogContainer = (this.uiDialogContainer = uiDialogContent.parent())
- .addClass('ui-dialog-container')
- .css({
- position: 'relative',
- width: '100%',
- height: '100%'
- }),
+ .appendTo(uiDialog),
uiDialogTitlebar = (this.uiDialogTitlebar = $('<div></div>'))
.addClass(
@@ -63,7 +85,7 @@
.mousedown(function() {
self.moveToTop();
})
- .prependTo(uiDialogContainer),
+ .prependTo(uiDialog),
uiDialogTitlebarClose = $('<a href="#"/>')
.addClass(
@@ -96,54 +118,18 @@
.text(options.closeText)
.appendTo(uiDialogTitlebarClose),
- title = options.title || ' ',
- 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 @@
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 @@
this.uiDialog.resizable({
cancel: '.ui-dialog-content',
+ alsoResize: '.ui-dialog-content',
helper: options.resizeHelper,
maxWidth: options.maxWidth,
maxHeight: options.maxHeight,
@@ -315,12 +302,10 @@
(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();
}
@@ -424,26 +409,34 @@
$.widget.prototype._setData.apply(this, arguments);
},
-
+
_size: function() {
- var container = this.uiDialogContainer,
- titlebar = this.uiDialogTitlebar,
- 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);
+ /* If the user has resized the dialog, the .ui-dialog
and .ui-dialog-content
+ * divs will both have width and height set
+ */
+
+ // 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,