Dialog: Style updates

Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 08:59:54 -04:00
parent 8336ba7b69
commit f8c2bbb0c8
9 changed files with 695 additions and 674 deletions

View File

@ -7,6 +7,7 @@ define( [
return $.extend( helper, {
drag: function( element, handle, dx, dy ) {
var d = element.dialog( "widget" );
//this mouseover is to work around a limitation in resizable
//TODO: fix resizable so handle doesn't require mouseover in order to be used
$( handle, d ).simulate( "mouseover" ).simulate( "drag", {
@ -30,6 +31,7 @@ return $.extend( helper, {
actualDY = offsetAfter.top - offsetBefore.top;
ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg );
},
// TODO switch back to checking the size of the .ui-dialog element (var d)
// once we switch to using box-sizing: border-box (#9845) that should work fine
// using the element's dimensions to avoid subpixel errors

View File

@ -226,12 +226,14 @@ asyncTest( "#8958: dialog can be opened while opening", function() {
$( "body" ).trigger( "focus" );
$( "#favorite-animal" )
// We focus the input to start the test. Once it receives focus, the
// dialog will open. Opening the dialog, will cause an element inside
// the dialog to gain focus, thus blurring the input.
.on( "focus", function() {
element.dialog( "open" );
} )
// When the input blurs, the dialog is in the process of opening. We
// try to open the dialog again, to make sure that dialogs properly
// handle a call to the open() method during the process of the dialog

View File

@ -444,6 +444,7 @@ test( "title", function() {
}
var element = $( "<div></div>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;"
// so we generate a non-breaking space for comparison
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
@ -471,6 +472,7 @@ test( "title", function() {
// Make sure attroperties are properly ignored - #5742 - .attr() might return a DOMElement
element = $( "<form><input name='title'></form>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;"
// so we get the text to normalize to the actual non-breaking space
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );

View File

@ -68,6 +68,7 @@ $.widget( "ui.dialog", {
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
@ -176,6 +177,7 @@ $.widget( "ui.dialog", {
this.element
.removeUniqueId()
.css( this.originalCss )
// Without detaching first, the following becomes really slow
.detach();
@ -186,6 +188,7 @@ $.widget( "ui.dialog", {
}
next = originalPosition.parent.children().eq( originalPosition.index );
// Don't try to place the dialog next to itself (#8613)
if ( next.length && next[ 0 ] !== this.element[ 0 ] ) {
next.before( this.element );
@ -290,6 +293,7 @@ $.widget( "ui.dialog", {
},
_focusTabbable: function() {
// Set focus to the first match:
// 1. An element that was focused previously
// 2. First element inside the dialog matching [autofocus]
@ -327,6 +331,7 @@ $.widget( "ui.dialog", {
}
event.preventDefault();
checkFocus.call( this );
// support: IE
// IE <= 8 doesn't prevent moving focus even with event.preventDefault()
// so we check again later
@ -337,6 +342,7 @@ $.widget( "ui.dialog", {
this.uiDialog = $( "<div>" )
.hide()
.attr( {
// Setting tabIndex makes the div focusable
tabIndex: -1,
role: "dialog"
@ -398,10 +404,12 @@ $.widget( "ui.dialog", {
"ui-dialog-titlebar", "ui-widget-header ui-helper-clearfix" );
this._on( this.uiDialogTitlebar, {
mousedown: function( event ) {
// Don't prevent click on close button (#8838)
// Focusing a dialog that is partially scrolled out of view
// causes the browser to scroll it into view, preventing the click event
if ( !$( event.target ).closest( ".ui-dialog-titlebar-close" ) ) {
// Dialog isn't getting focus when dragging (#8063)
this.uiDialog.trigger( "focus" );
}
@ -478,8 +486,10 @@ $.widget( "ui.dialog", {
props = $.isFunction( props ) ?
{ click: props, text: name } :
props;
// Default to a non-submitting button
props = $.extend( { type: "button" }, props );
// Change the context for the click callback to be the main element
click = props.click;
buttonOptions = {
@ -545,6 +555,7 @@ $.widget( "ui.dialog", {
var that = this,
options = this.options,
handles = options.resizable,
// .ui-resizable has position: relative defined in the stylesheet
// but dialogs have to use absolute or fixed positioning
position = this.uiDialog.css( "position" ),
@ -639,6 +650,7 @@ $.widget( "ui.dialog", {
},
_position: function() {
// Need to show the dialog to get the actual offset in the position plugin
var isVisible = this.uiDialog.is( ":visible" );
if ( !isVisible ) {
@ -695,6 +707,7 @@ $.widget( "ui.dialog", {
if ( key === "closeText" ) {
this.uiDialogTitlebarClose.button( {
// Ensure that we always pass a string
label: "" + value
} );
@ -716,6 +729,7 @@ $.widget( "ui.dialog", {
}
if ( key === "resizable" ) {
// currently resizable, becoming non-resizable
isResizable = uiDialog.is( ":data(ui-resizable)" );
if ( isResizable && !value ) {
@ -739,6 +753,7 @@ $.widget( "ui.dialog", {
},
_size: function() {
// If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
// divs will both have width and height set, so we need to reset them
var nonContentHeight, minContentHeight, maxContentHeight,