mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Dialog: Fixed #3648: Use new CSS framework.
- Removed .ui-dialog-container div. - Removed autoResize option.
This commit is contained in:
Scott González
parent
3af7184f03
commit
03f07556bd
@ -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);
|
||||
|
||||
|
||||
117
ui/ui.dialog.js
117
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();
|
||||
}
|
||||
@ -426,24 +411,32 @@ $.widget("ui.dialog", {
|
||||
},
|
||||
|
||||
_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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user