diff options
| -rw-r--r-- | tests/dialog.js | 26 | ||||
| -rw-r--r-- | ui/ui.dialog.js | 119 |
2 files changed, 56 insertions, 89 deletions
diff --git a/tests/dialog.js b/tests/dialog.js index 438db2e9d..aa91037c7 100644 --- a/tests/dialog.js +++ b/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); diff --git a/ui/ui.dialog.js b/ui/ui.dialog.js index 52c7c0942..e544e3e49 100644 --- a/ui/ui.dialog.js +++ b/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>') - .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 @@ $.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 || ' ', - 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(); } @@ -424,26 +409,34 @@ $.widget("ui.dialog", { $.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, |