library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dialog: Style updates

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/dialog/common-deprecated.js
View File

@ -49,6 +49,6 @@ common.testWidget( "dialog", {
resizeStart: null, resizeStart: null,
resizeStop: null resizeStop: null
} }
}); } );
} ); } );

2
tests/unit/dialog/common.js
View File

@ -48,6 +48,6 @@ common.testWidget( "dialog", {
resizeStart: null, resizeStart: null,
resizeStop: null resizeStop: null
} }
}); } );
} ); } );

108
tests/unit/dialog/core.js
View File

@ -4,17 +4,17 @@ define( [
], function( $ ) { ], function( $ ) {
// TODO add teardown callback to remove dialogs // TODO add teardown callback to remove dialogs
module("dialog: core"); module( "dialog: core" );
test( "markup structure", function( assert ) { test( "markup structure", function( assert ) {
expect( 11 ); expect( 11 );
var element = $( "<div>" ).dialog({ var element = $( "<div>" ).dialog( {
buttons: [ { buttons: [ {
text: "Ok", text: "Ok",
click: $.noop click: $.noop
} ] } ]
}), } ),
widget = element.dialog( "widget" ), widget = element.dialog( "widget" ),
titlebar = widget.find( ".ui-dialog-titlebar" ), titlebar = widget.find( ".ui-dialog-titlebar" ),
title = titlebar.find( ".ui-dialog-title" ), title = titlebar.find( ".ui-dialog-title" ),
@ -35,7 +35,7 @@ test( "markup structure", function( assert ) {
equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" ); equal( buttonset.length, 1, "Buttonpane has exactly one buttonset" );
equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" ); equal( buttons.length, 1, "Buttonset contains exactly 1 button when created with 1" );
}); } );
test( "markup structure - no buttons", function( assert ) { test( "markup structure - no buttons", function( assert ) {
expect( 7 ); expect( 7 );
@ -53,18 +53,18 @@ test( "markup structure - no buttons", function( assert ) {
equal( close.length, 1, "Titlebar has exactly one close button" ); equal( close.length, 1, "Titlebar has exactly one close button" );
equal( title.length, 1, "Titlebar has exactly one title" ); equal( title.length, 1, "Titlebar has exactly one title" );
assert.hasClasses( element, "ui-dialog-content ui-widget-content" ); assert.hasClasses( element, "ui-dialog-content ui-widget-content" );
}); } );
test("title id", function() { test( "title id", function() {
expect(1); expect( 1 );
var titleId, var titleId,
element = $("<div>").dialog(); element = $( "<div>" ).dialog();
titleId = element.dialog("widget").find(".ui-dialog-title").attr("id"); titleId = element.dialog( "widget" ).find( ".ui-dialog-title" ).attr( "id" );
ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id"); ok( /ui-id-\d+$/.test( titleId ), "auto-numbered title id" );
element.remove(); element.remove();
}); } );
test( "ARIA", function() { test( "ARIA", function() {
expect( 4 ); expect( 4 );
@ -76,26 +76,26 @@ test( "ARIA", function() {
equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" ); equal( wrapper.attr( "aria-describedby" ), element.attr( "id" ), "aria-describedby added" );
element.remove(); element.remove();
element = $("<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>").dialog(); element = $( "<div><div aria-describedby='section2'><p id='section2'>descriotion</p></div></div>" ).dialog();
equal( element.dialog( "widget" ).attr( "aria-describedby" ), null, "no aria-describedby added, as already present in markup" ); equal( element.dialog( "widget" ).attr( "aria-describedby" ), null, "no aria-describedby added, as already present in markup" );
element.remove(); element.remove();
}); } );
test("widget method", function() { test( "widget method", function() {
expect( 1 ); expect( 1 );
var dialog = $("<div>").appendTo("#qunit-fixture").dialog(); var dialog = $( "<div>" ).appendTo( "#qunit-fixture" ).dialog();
deepEqual(dialog.parent()[0], dialog.dialog("widget")[0]); deepEqual( dialog.parent()[ 0 ], dialog.dialog( "widget" )[ 0 ] );
dialog.remove(); dialog.remove();
}); } );
asyncTest( "focus tabbable", function() { asyncTest( "focus tabbable", function() {
expect( 8 ); expect( 8 );
var element, var element,
options = { options = {
buttons: [{ buttons: [ {
text: "Ok", text: "Ok",
click: $.noop click: $.noop
}] } ]
}; };
function checkFocus( markup, options, testFn, next ) { function checkFocus( markup, options, testFn, next ) {
@ -106,23 +106,23 @@ asyncTest( "focus tabbable", function() {
$( "body" ).trigger( "focus" ); $( "body" ).trigger( "focus" );
element = $( markup ).dialog( options ); element = $( markup ).dialog( options );
setTimeout(function() { setTimeout( function() {
testFn(function done() { testFn( function done() {
element.remove(); element.remove();
setTimeout( next ); setTimeout( next );
}); } );
}); } );
} }
function step1() { function step1() {
checkFocus( "<div><input><input></div>", options, function( done ) { checkFocus( "<div><input><input></div>", options, function( done ) {
var input = element.find( "input:last" ).trigger( "focus" ).trigger( "blur" ); var input = element.find( "input:last" ).trigger( "focus" ).trigger( "blur" );
element.dialog( "instance" )._focusTabbable(); element.dialog( "instance" )._focusTabbable();
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, input[ 0 ], equal( document.activeElement, input[ 0 ],
"1. an element that was focused previously." ); "1. an element that was focused previously." );
done(); done();
}); } );
}, step2 ); }, step2 );
} }
@ -164,10 +164,10 @@ asyncTest( "focus tabbable", function() {
checkFocus( "<div>text</div>", { autoOpen: false }, function( done ) { checkFocus( "<div>text</div>", { autoOpen: false }, function( done ) {
element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide(); element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
element.dialog( "open" ); element.dialog( "open" );
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" ); equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" );
done(); done();
}); } );
}, step7 ); }, step7 );
} }
@ -177,17 +177,17 @@ asyncTest( "focus tabbable", function() {
{ {
open: function() { open: function() {
var inputs = $( this ).find( "input" ); var inputs = $( this ).find( "input" );
inputs.last().on( "keydown",function( event ) { inputs.last().on( "keydown", function( event ) {
event.preventDefault(); event.preventDefault();
inputs.first().trigger( "focus" ); inputs.first().trigger( "focus" );
}); } );
} }
}, },
function( done ) { function( done ) {
var inputs = element.find( "input" ); var inputs = element.find( "input" );
equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" ); equal( document.activeElement, inputs[ 1 ], "Focus starts on second input" );
inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); inputs.last().simulate( "keydown", { keyCode: $.ui.keyCode.TAB } );
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, inputs[ 0 ], equal( document.activeElement, inputs[ 0 ],
"Honor preventDefault, allowing custom focus management" ); "Honor preventDefault, allowing custom focus management" );
done(); done();
@ -198,19 +198,19 @@ asyncTest( "focus tabbable", function() {
} }
step1(); step1();
}); } );
test( "#7960: resizable handles below modal overlays", function() { test( "#7960: resizable handles below modal overlays", function() {
expect( 1 ); expect( 1 );
var resizable = $( "<div>" ).resizable(), var resizable = $( "<div>" ).resizable(),
dialog = $( "<div>" ).dialog({ modal: true }), dialog = $( "<div>" ).dialog( { modal: true } ),
resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ), resizableZindex = parseInt( resizable.find( ".ui-resizable-handle" ).css( "zIndex" ), 10 ),
overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 ); overlayZindex = parseInt( $( ".ui-widget-overlay" ).css( "zIndex" ), 10 );
ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" ); ok( resizableZindex < overlayZindex, "Resizable handles have lower z-index than modal overlay" );
dialog.dialog( "destroy" ); dialog.dialog( "destroy" );
}); } );
asyncTest( "Prevent tabbing out of dialogs", function() { asyncTest( "Prevent tabbing out of dialogs", function() {
expect( 3 ); expect( 3 );
@ -219,13 +219,13 @@ asyncTest( "Prevent tabbing out of dialogs", function() {
inputs = element.find( "input" ); inputs = element.find( "input" );
// Remove close button to test focus on just the two buttons // Remove close button to test focus on just the two buttons
element.dialog( "widget" ).find( ".ui-button").remove(); element.dialog( "widget" ).find( ".ui-button" ).remove();
function checkTab() { function checkTab() {
equal( document.activeElement, inputs[ 0 ], "Tab key event moved focus within the modal" ); equal( document.activeElement, inputs[ 0 ], "Tab key event moved focus within the modal" );
// Check shift tab // Check shift tab
$( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true }); $( document.activeElement ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB, shiftKey: true } );
setTimeout( checkShiftTab ); setTimeout( checkShiftTab );
} }
@ -237,27 +237,27 @@ asyncTest( "Prevent tabbing out of dialogs", function() {
} }
inputs[ 1 ].focus(); inputs[ 1 ].focus();
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, inputs[ 1 ], "Focus set on second input" ); equal( document.activeElement, inputs[ 1 ], "Focus set on second input" );
inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB }); inputs.eq( 1 ).simulate( "keydown", { keyCode: $.ui.keyCode.TAB } );
setTimeout( checkTab ); setTimeout( checkTab );
}); } );
}); } );
asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() { asyncTest( "#9048: multiple modal dialogs opened and closed in different order", function() {
expect( 1 ); expect( 1 );
$( "#dialog1, #dialog2" ).dialog({ autoOpen: false, modal:true }); $( "#dialog1, #dialog2" ).dialog( { autoOpen: false, modal:true } );
$( "#dialog1" ).dialog( "open" ); $( "#dialog1" ).dialog( "open" );
$( "#dialog2" ).dialog( "open" ); $( "#dialog2" ).dialog( "open" );
$( "#dialog1" ).dialog( "close" ); $( "#dialog1" ).dialog( "close" );
setTimeout(function() { setTimeout( function() {
$( "#dialog2" ).dialog( "close" ); $( "#dialog2" ).dialog( "close" );
$( "#favorite-animal" ).trigger( "focus" ); $( "#favorite-animal" ).trigger( "focus" );
ok( true, "event handlers cleaned up (no errors thrown)" ); ok( true, "event handlers cleaned up (no errors thrown)" );
start(); start();
}); } );
}); } );
asyncTest( "interaction between overlay and other dialogs", function() { asyncTest( "interaction between overlay and other dialogs", function() {
$.widget( "ui.testWidget", $.ui.dialog, { $.widget( "ui.testWidget", $.ui.dialog, {
@ -265,11 +265,11 @@ asyncTest( "interaction between overlay and other dialogs", function() {
modal: true, modal: true,
autoOpen: false autoOpen: false
} }
}); } );
expect( 2 ); expect( 2 );
var first = $( "<div><input id='input-1'></div>" ).dialog({ var first = $( "<div><input id='input-1'></div>" ).dialog( {
modal: true modal: true
}), } ),
firstInput = first.find( "input" ), firstInput = first.find( "input" ),
second = $( "<div><input id='input-2'></div>" ).testWidget(), second = $( "<div><input id='input-2'></div>" ).testWidget(),
secondInput = second.find( "input" ); secondInput = second.find( "input" );
@ -280,18 +280,18 @@ asyncTest( "interaction between overlay and other dialogs", function() {
$( "body" ).trigger( "focus" ); $( "body" ).trigger( "focus" );
// Wait for the modal to init // Wait for the modal to init
setTimeout(function() { setTimeout( function() {
second.testWidget( "open" ); second.testWidget( "open" );
// Simulate user tabbing from address bar to an element outside the dialog // Simulate user tabbing from address bar to an element outside the dialog
$( "#favorite-animal" ).trigger( "focus" ); $( "#favorite-animal" ).trigger( "focus" );
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, secondInput[ 0 ] ); equal( document.activeElement, secondInput[ 0 ] );
// Last active dialog must receive focus // Last active dialog must receive focus
firstInput.trigger( "focus" ); firstInput.trigger( "focus" );
$( "#favorite-animal" ).trigger( "focus" ); $( "#favorite-animal" ).trigger( "focus" );
setTimeout(function() { setTimeout( function() {
equal( document.activeElement, firstInput[ 0 ] ); equal( document.activeElement, firstInput[ 0 ] );
// Cleanup // Cleanup
@ -300,9 +300,9 @@ asyncTest( "interaction between overlay and other dialogs", function() {
delete $.ui.testWidget; delete $.ui.testWidget;
delete $.fn.testWidget; delete $.fn.testWidget;
start(); start();
}); } );
}); } );
}); } );
}); } );
} ); } );

6
tests/unit/dialog/deprecated.js
View File

@ -13,7 +13,7 @@ test( "dialogClass", function( assert ) {
assert.lacksClasses( widget, "foo", "dialogClass not specified. class not added" ); assert.lacksClasses( widget, "foo", "dialogClass not specified. class not added" );
element.remove(); element.remove();
element = $( "<div>" ).dialog({ dialogClass: "foo" }); element = $( "<div>" ).dialog( { dialogClass: "foo" } );
widget = element.dialog( "widget" ); widget = element.dialog( "widget" );
assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" ); assert.hasClasses( widget, "foo", "dialogClass in init, foo class added" );
element.dialog( "option", "dialogClass", "foobar" ); element.dialog( "option", "dialogClass", "foobar" );
@ -21,10 +21,10 @@ test( "dialogClass", function( assert ) {
assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" ); assert.hasClasses( widget, "foobar", "dialogClass changed, new one was added" );
element.remove(); element.remove();
element = $( "<div>" ).dialog({ dialogClass: "foo bar" }); element = $( "<div>" ).dialog( { dialogClass: "foo bar" } );
widget = element.dialog( "widget" ); widget = element.dialog( "widget" );
assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." ); assert.hasClasses( widget, "foo bar", "dialogClass in init, two classes." );
element.remove(); element.remove();
}); } );
} ); } );

496
tests/unit/dialog/events.js
View File

@ -4,75 +4,75 @@ define( [
"ui/widgets/dialog" "ui/widgets/dialog"
], function( $, testHelper ) { ], function( $, testHelper ) {
module("dialog: events"); module( "dialog: events" );
test("open", function() { test( "open", function() {
expect(13); expect( 13 );
var element = $("<div></div>"); var element = $( "<div></div>" );
element.dialog({ element.dialog( {
open: function(ev, ui) { open: function( ev, ui ) {
ok(element.dialog( "instance" )._isOpen, "interal _isOpen flag is set"); ok( element.dialog( "instance" )._isOpen, "interal _isOpen flag is set" );
ok(true, "autoOpen: true fires open callback"); ok( true, "autoOpen: true fires open callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogopen", "event type in callback"); equal( ev.type, "dialogopen", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
} }
}); } );
element.remove(); element.remove();
element = $("<div></div>"); element = $( "<div></div>" );
element.dialog({ element.dialog( {
autoOpen: false, autoOpen: false,
open: function(ev, ui) { open: function( ev, ui ) {
ok(true, ".dialog('open') fires open callback"); ok( true, ".dialog('open') fires open callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogopen", "event type in callback"); equal( ev.type, "dialogopen", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
} }
}).on("dialogopen", function(ev, ui) { } ).on( "dialogopen", function( ev, ui ) {
ok(element.dialog( "instance" )._isOpen, "interal _isOpen flag is set"); ok( element.dialog( "instance" )._isOpen, "interal _isOpen flag is set" );
ok(true, "dialog('open') fires open event"); ok( true, "dialog('open') fires open event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
deepEqual(ui, {}, "ui hash in event"); deepEqual( ui, {}, "ui hash in event" );
}); } );
element.dialog("open"); element.dialog( "open" );
element.remove(); element.remove();
}); } );
test( "focus", function() { test( "focus", function() {
expect( 5 ); expect( 5 );
var element, other; var element, other;
element = $("#dialog1").dialog({ element = $( "#dialog1" ).dialog( {
autoOpen: false autoOpen: false
}); } );
other = $("#dialog2").dialog({ other = $( "#dialog2" ).dialog( {
autoOpen: false autoOpen: false
}); } );
element.one( "dialogopen", function() { element.one( "dialogopen", function() {
ok( true, "open, just once" ); ok( true, "open, just once" );
}); } );
element.one( "dialogfocus", function() { element.one( "dialogfocus", function() {
ok( true, "focus on open" ); ok( true, "focus on open" );
}); } );
other.dialog( "open" ); other.dialog( "open" );
element.one( "dialogfocus", function() { element.one( "dialogfocus", function() {
ok( true, "when opening and already open and wasn't on top" ); ok( true, "when opening and already open and wasn't on top" );
}); } );
other.dialog( "open" ); other.dialog( "open" );
element.dialog( "open" ); element.dialog( "open" );
element.one( "dialogfocus", function() { element.one( "dialogfocus", function() {
ok( true, "when calling moveToTop and wasn't on top" ); ok( true, "when calling moveToTop and wasn't on top" );
}); } );
other.dialog( "moveToTop" ); other.dialog( "moveToTop" );
element.dialog( "moveToTop" ); element.dialog( "moveToTop" );
element.on( "dialogfocus", function() { element.on( "dialogfocus", function() {
ok( true, "when mousedown anywhere on the dialog and it wasn't on top" ); ok( true, "when mousedown anywhere on the dialog and it wasn't on top" );
}); } );
other.dialog( "moveToTop" ); other.dialog( "moveToTop" );
element.trigger( "mousedown" ); element.trigger( "mousedown" );
@ -82,289 +82,289 @@ test( "focus", function() {
element.trigger( "mousedown" ); element.trigger( "mousedown" );
element.add( other ).remove(); element.add( other ).remove();
}); } );
test("dragStart", function() { test( "dragStart", function() {
expect(9); expect( 9 );
var handle, var handle,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
dragStart: function(ev, ui) { dragStart: function( ev, ui ) {
ok(true, "dragging fires dragStart callback"); ok( true, "dragging fires dragStart callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogdragstart", "event type in callback"); equal( ev.type, "dialogdragstart", "event type in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
} }
}).on("dialogdragstart", function(ev, ui) { } ).on( "dialogdragstart", function( ev, ui ) {
ok(true, "dragging fires dialogdragstart event"); ok( true, "dragging fires dialogdragstart event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
}); } );
handle = $(".ui-dialog-titlebar", element.dialog("widget")); handle = $( ".ui-dialog-titlebar", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
test("drag", function() { test( "drag", function() {
expect(9); expect( 9 );
var handle, var handle,
hasDragged = false, hasDragged = false,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
drag: function(ev, ui) { drag: function( ev, ui ) {
if (!hasDragged) { if ( !hasDragged ) {
ok(true, "dragging fires drag callback"); ok( true, "dragging fires drag callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogdrag", "event type in callback"); equal( ev.type, "dialogdrag", "event type in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
hasDragged = true; hasDragged = true;
} }
} }
}).one("dialogdrag", function(ev, ui) { } ).one( "dialogdrag", function( ev, ui ) {
ok(true, "dragging fires dialogdrag event"); ok( true, "dragging fires dialogdrag event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
}); } );
handle = $(".ui-dialog-titlebar", element.dialog("widget")); handle = $( ".ui-dialog-titlebar", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
test("dragStop", function() { test( "dragStop", function() {
expect(9); expect( 9 );
var handle, var handle,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
dragStop: function(ev, ui) { dragStop: function( ev, ui ) {
ok(true, "dragging fires dragStop callback"); ok( true, "dragging fires dragStop callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogdragstop", "event type in callback"); equal( ev.type, "dialogdragstop", "event type in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
} }
}).on("dialogdragstop", function(ev, ui) { } ).on( "dialogdragstop", function( ev, ui ) {
ok(true, "dragging fires dialogdragstop event"); ok( true, "dragging fires dialogdragstop event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.offset !== undefined, "ui.offset in callback"); ok( ui.offset !== undefined, "ui.offset in callback" );
}); } );
handle = $(".ui-dialog-titlebar", element.dialog("widget")); handle = $( ".ui-dialog-titlebar", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
test("resizeStart", function() { test( "resizeStart", function() {
expect(13); expect( 13 );
var handle, var handle,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
resizeStart: function(ev, ui) { resizeStart: function( ev, ui ) {
ok(true, "resizing fires resizeStart callback"); ok( true, "resizing fires resizeStart callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogresizestart", "event type in callback"); equal( ev.type, "dialogresizestart", "event type in callback" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
} }
}).on("dialogresizestart", function(ev, ui) { } ).on( "dialogresizestart", function( ev, ui ) {
ok(true, "resizing fires dialogresizestart event"); ok( true, "resizing fires dialogresizestart event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
}); } );
handle = $(".ui-resizable-se", element.dialog("widget")); handle = $( ".ui-resizable-se", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
test("resize", function() { test( "resize", function() {
expect(13); expect( 13 );
var handle, var handle,
hasResized = false, hasResized = false,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
resize: function(ev, ui) { resize: function( ev, ui ) {
if (!hasResized) { if ( !hasResized ) {
ok(true, "resizing fires resize callback"); ok( true, "resizing fires resize callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogresize", "event type in callback"); equal( ev.type, "dialogresize", "event type in callback" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
hasResized = true; hasResized = true;
} }
} }
}).one("dialogresize", function(ev, ui) { } ).one( "dialogresize", function( ev, ui ) {
ok(true, "resizing fires dialogresize event"); ok( true, "resizing fires dialogresize event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
}); } );
handle = $(".ui-resizable-se", element.dialog("widget")); handle = $( ".ui-resizable-se", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
test("resizeStop", function() { test( "resizeStop", function() {
expect(13); expect( 13 );
var handle, var handle,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
resizeStop: function(ev, ui) { resizeStop: function( ev, ui ) {
ok(true, "resizing fires resizeStop callback"); ok( true, "resizing fires resizeStop callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogresizestop", "event type in callback"); equal( ev.type, "dialogresizestop", "event type in callback" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
} }
}).on("dialogresizestop", function(ev, ui) { } ).on( "dialogresizestop", function( ev, ui ) {
ok(true, "resizing fires dialogresizestop event"); ok( true, "resizing fires dialogresizestop event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
ok(ui.originalPosition !== undefined, "ui.originalPosition in callback"); ok( ui.originalPosition !== undefined, "ui.originalPosition in callback" );
ok(ui.originalSize !== undefined, "ui.originalSize in callback"); ok( ui.originalSize !== undefined, "ui.originalSize in callback" );
ok(ui.position !== undefined, "ui.position in callback"); ok( ui.position !== undefined, "ui.position in callback" );
ok(ui.size !== undefined, "ui.size in callback"); ok( ui.size !== undefined, "ui.size in callback" );
}); } );
handle = $(".ui-resizable-se", element.dialog("widget")); handle = $( ".ui-resizable-se", element.dialog( "widget" ) );
testHelper.drag(element, handle, 50, 50); testHelper.drag( element, handle, 50, 50 );
element.remove(); element.remove();
}); } );
asyncTest("close", function() { asyncTest( "close", function() {
expect(14); expect( 14 );
var element = $("<div></div>").dialog({ var element = $( "<div></div>" ).dialog( {
close: function(ev, ui) { close: function( ev, ui ) {
ok(true, ".dialog('close') fires close callback"); ok( true, ".dialog('close') fires close callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogclose", "event type in callback"); equal( ev.type, "dialogclose", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
} }
}).on("dialogclose", function(ev, ui) { } ).on( "dialogclose", function( ev, ui ) {
ok(true, ".dialog('close') fires dialogclose event"); ok( true, ".dialog('close') fires dialogclose event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
deepEqual(ui, {}, "ui hash in event"); deepEqual( ui, {}, "ui hash in event" );
}); } );
element.dialog("close"); element.dialog( "close" );
element.remove(); element.remove();
// Close event with an effect // Close event with an effect
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
hide: 10, hide: 10,
close: function(ev, ui) { close: function( ev, ui ) {
ok(true, ".dialog('close') fires close callback"); ok( true, ".dialog('close') fires close callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogclose", "event type in callback"); equal( ev.type, "dialogclose", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
start(); start();
} }
}).on("dialogclose", function(ev, ui) { } ).on( "dialogclose", function( ev, ui ) {
ok(true, ".dialog('close') fires dialogclose event"); ok( true, ".dialog('close') fires dialogclose event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
deepEqual(ui, {}, "ui hash in event"); deepEqual( ui, {}, "ui hash in event" );
}); } );
element.dialog("close"); element.dialog( "close" );
}); } );
test("beforeClose", function() { test( "beforeClose", function() {
expect(14); expect( 14 );
var element = $("<div></div>").dialog({ var element = $( "<div></div>" ).dialog( {
beforeClose: function(ev, ui) { beforeClose: function( ev, ui ) {
ok(true, ".dialog('close') fires beforeClose callback"); ok( true, ".dialog('close') fires beforeClose callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogbeforeclose", "event type in callback"); equal( ev.type, "dialogbeforeclose", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
return false; return false;
} }
}); } );
element.dialog("close"); element.dialog( "close" );
ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); ok( element.dialog( "widget" ).is( ":visible" ), "beforeClose callback should prevent dialog from closing" );
element.remove(); element.remove();
element = $("<div></div>").dialog(); element = $( "<div></div>" ).dialog();
element.dialog("option", "beforeClose", function(ev, ui) { element.dialog( "option", "beforeClose", function( ev, ui ) {
ok(true, ".dialog('close') fires beforeClose callback"); ok( true, ".dialog('close') fires beforeClose callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.type, "dialogbeforeclose", "event type in callback"); equal( ev.type, "dialogbeforeclose", "event type in callback" );
deepEqual(ui, {}, "ui hash in callback"); deepEqual( ui, {}, "ui hash in callback" );
return false; return false;
}); } );
element.dialog("close"); element.dialog( "close" );
ok( element.dialog("widget").is(":visible"), "beforeClose callback should prevent dialog from closing"); ok( element.dialog( "widget" ).is( ":visible" ), "beforeClose callback should prevent dialog from closing" );
element.remove(); element.remove();
element = $("<div></div>").dialog().on("dialogbeforeclose", function(ev, ui) { element = $( "<div></div>" ).dialog().on( "dialogbeforeclose", function( ev, ui ) {
ok(true, ".dialog('close') triggers dialogbeforeclose event"); ok( true, ".dialog('close') triggers dialogbeforeclose event" );
equal(this, element[0], "context of event"); equal( this, element[ 0 ], "context of event" );
deepEqual(ui, {}, "ui hash in event"); deepEqual( ui, {}, "ui hash in event" );
return false; return false;
}); } );
element.dialog("close"); element.dialog( "close" );
ok( element.dialog("widget").is(":visible"), "dialogbeforeclose event should prevent dialog from closing"); ok( element.dialog( "widget" ).is( ":visible" ), "dialogbeforeclose event should prevent dialog from closing" );
element.remove(); element.remove();
}); } );
// #8789 and #8838 // #8789 and #8838
asyncTest("ensure dialog's container doesn't scroll on resize and focus", function() { asyncTest( "ensure dialog's container doesn't scroll on resize and focus", function() {
expect(2);
var element = $("#dialog1").dialog(),
initialScroll = $(window).scrollTop();
element.dialog("option", "height", 600);
equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after height change");
setTimeout( function(){
$(".ui-dialog-titlebar-close").simulate("mousedown");
equal($(window).scrollTop(), initialScroll, "scroll hasn't moved after focus moved to dialog");
element.dialog("destroy");
start();
});
});
test("#5184: isOpen in dialogclose event is true", function() {
expect( 3 );
var element = $( "<div></div>" ).dialog({
close: function() {
ok( !element.dialog("isOpen"), "dialog is not open during close" );
}
});
ok( element.dialog("isOpen"), "dialog is open after init" );
element.dialog( "close" );
ok( !element.dialog("isOpen"), "dialog is not open after close" );
element.remove();
});
test("ensure dialog keeps focus when clicking modal overlay", function() {
expect( 2 ); expect( 2 );
var element = $( "<div></div>" ).dialog({ var element = $( "#dialog1" ).dialog(),
initialScroll = $( window ).scrollTop();
element.dialog( "option", "height", 600 );
equal( $( window ).scrollTop(), initialScroll, "scroll hasn't moved after height change" );
setTimeout( function() {
$( ".ui-dialog-titlebar-close" ).simulate( "mousedown" );
equal( $( window ).scrollTop(), initialScroll, "scroll hasn't moved after focus moved to dialog" );
element.dialog( "destroy" );
start();
} );
} );
test( "#5184: isOpen in dialogclose event is true", function() {
expect( 3 );
var element = $( "<div></div>" ).dialog( {
close: function() {
ok( !element.dialog( "isOpen" ), "dialog is not open during close" );
}
} );
ok( element.dialog( "isOpen" ), "dialog is open after init" );
element.dialog( "close" );
ok( !element.dialog( "isOpen" ), "dialog is not open after close" );
element.remove();
} );
test( "ensure dialog keeps focus when clicking modal overlay", function() {
expect( 2 );
var element = $( "<div></div>" ).dialog( {
modal: true modal: true
}); } );
equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is in dialog" ); equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is in dialog" );
$(".ui-widget-overlay").simulate("mousedown"); $( ".ui-widget-overlay" ).simulate( "mousedown" );
equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is still in dialog" ); equal( $( document.activeElement ).closest( ".ui-dialog" ).length, 1, "focus is still in dialog" );
element.remove(); element.remove();
}); } );
} ); } );

30
tests/unit/dialog/helper.js
View File

@ -5,22 +5,23 @@ define( [
], function( $, helper ) { ], function( $, helper ) {
return $.extend( helper, { return $.extend( helper, {
drag: function(element, handle, dx, dy) { drag: function( element, handle, dx, dy ) {
var d = element.dialog("widget"); var d = element.dialog( "widget" );
//this mouseover is to work around a limitation in resizable //this mouseover is to work around a limitation in resizable
//TODO: fix resizable so handle doesn't require mouseover in order to be used //TODO: fix resizable so handle doesn't require mouseover in order to be used
$( handle, d ).simulate("mouseover").simulate( "drag", { $( handle, d ).simulate( "mouseover" ).simulate( "drag", {
dx: dx, dx: dx,
dy: dy dy: dy
}); } );
}, },
testDrag: function(element, dx, dy, expectedDX, expectedDY, msg) { testDrag: function( element, dx, dy, expectedDX, expectedDY, msg ) {
var actualDX, actualDY, offsetAfter, var actualDX, actualDY, offsetAfter,
d = element.dialog("widget"), d = element.dialog( "widget" ),
handle = $(".ui-dialog-titlebar", d), handle = $( ".ui-dialog-titlebar", d ),
offsetBefore = d.offset(); offsetBefore = d.offset();
this.drag(element, handle, dx, dy); this.drag( element, handle, dx, dy );
offsetAfter = d.offset(); offsetAfter = d.offset();
@ -28,19 +29,20 @@ return $.extend( helper, {
actualDX = offsetAfter.left - offsetBefore.left; actualDX = offsetAfter.left - offsetBefore.left;
actualDY = offsetAfter.top - offsetBefore.top; actualDY = offsetAfter.top - offsetBefore.top;
ok( expectedDX - actualDX <= 1 && expectedDY - actualDY <= 1, "dragged[" + expectedDX + ", " + expectedDY + "] " + msg); 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) // 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 // once we switch to using box-sizing: border-box (#9845) that should work fine
// using the element's dimensions to avoid subpixel errors // using the element's dimensions to avoid subpixel errors
shouldResize: function(element, dw, dh, msg) { shouldResize: function( element, dw, dh, msg ) {
var heightAfter, widthAfter, actual, expected, var heightAfter, widthAfter, actual, expected,
d = element.dialog("widget"), d = element.dialog( "widget" ),
handle = $(".ui-resizable-se", d), handle = $( ".ui-resizable-se", d ),
heightBefore = element.height(), heightBefore = element.height(),
widthBefore = element.width(); widthBefore = element.width();
this.drag(element, handle, 50, 50); this.drag( element, handle, 50, 50 );
heightAfter = element.height(); heightAfter = element.height();
widthAfter = element.width(); widthAfter = element.width();
@ -48,7 +50,7 @@ return $.extend( helper, {
msg = msg ? msg + "." : ""; msg = msg ? msg + "." : "";
actual = { width: widthAfter, height: heightAfter }, actual = { width: widthAfter, height: heightAfter },
expected = { width: widthBefore + dw, height: heightBefore + dh }; expected = { width: widthBefore + dw, height: heightBefore + dh };
deepEqual(actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg); deepEqual( actual, expected, "resized[" + 50 + ", " + 50 + "] " + msg );
} }
} ); } );

224
tests/unit/dialog/methods.js
View File

@ -3,37 +3,37 @@ define( [
"ui/widgets/dialog" "ui/widgets/dialog"
], function( $ ) { ], function( $ ) {
module("dialog: methods", { module( "dialog: methods", {
teardown: function() { teardown: function() {
$("body>.ui-dialog").remove(); $( "body>.ui-dialog" ).remove();
} }
}); } );
test("init", function() { test( "init", function() {
expect(6); expect( 6 );
$("<div></div>").appendTo("body").dialog().remove(); $( "<div></div>" ).appendTo( "body" ).dialog().remove();
ok(true, ".dialog() called on element"); ok( true, ".dialog() called on element" );
$([]).dialog().remove(); $( [] ).dialog().remove();
ok(true, ".dialog() called on empty collection"); ok( true, ".dialog() called on empty collection" );
$("<div></div>").dialog().remove(); $( "<div></div>" ).dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - never connected"); ok( true, ".dialog() called on disconnected DOMElement - never connected" );
$("<div></div>").appendTo("body").remove().dialog().remove(); $( "<div></div>" ).appendTo( "body" ).remove().dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - removed"); ok( true, ".dialog() called on disconnected DOMElement - removed" );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
element.dialog("option", "foo"); element.dialog( "option", "foo" );
element.remove(); element.remove();
ok(true, "arbitrary option getter after init"); ok( true, "arbitrary option getter after init" );
$("<div></div>").dialog().dialog("option", "foo", "bar").remove(); $( "<div></div>" ).dialog().dialog( "option", "foo", "bar" ).remove();
ok(true, "arbitrary option setter after init"); ok( true, "arbitrary option setter after init" );
}); } );
test("destroy", function( assert ) { test( "destroy", function( assert ) {
expect( 17 ); expect( 17 );
var element, element2; var element, element2;
@ -43,30 +43,30 @@ test("destroy", function( assert ) {
var dialog = $( "#dialog1" ).dialog().dialog( "destroy" ); var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 0 ); equal( dialog.index(), 0 );
}); } );
assert.domEqual( "#form-dialog", function() { assert.domEqual( "#form-dialog", function() {
var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" ); var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] ); equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 2 ); equal( dialog.index(), 2 );
}); } );
// Ensure dimensions are restored (#8119) // Ensure dimensions are restored (#8119)
$( "#dialog1" ).show().css({ $( "#dialog1" ).show().css( {
width: "400px", width: "400px",
minHeight: "100px", minHeight: "100px",
height: "200px" height: "200px"
}); } );
assert.domEqual( "#dialog1", function() { assert.domEqual( "#dialog1", function() {
$( "#dialog1" ).dialog().dialog( "destroy" ); $( "#dialog1" ).dialog().dialog( "destroy" );
}); } );
// Don't throw errors when destroying a never opened modal dialog (#9004) // Don't throw errors when destroying a never opened modal dialog (#9004)
$( "#dialog1" ).dialog({ autoOpen: false, modal: true }).dialog( "destroy" ); $( "#dialog1" ).dialog( { autoOpen: false, modal: true } ).dialog( "destroy" );
equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" ); equal( $( ".ui-widget-overlay" ).length, 0, "overlay does not exist" );
equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays"); equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" );
element = $( "#dialog1" ).dialog({ modal: true }), element = $( "#dialog1" ).dialog( { modal: true } ),
element2 = $( "#dialog2" ).dialog({ modal: true }); element2 = $( "#dialog2" ).dialog( { modal: true } );
equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" ); equal( $( ".ui-widget-overlay" ).length, 2, "overlays created when dialogs are open" );
equal( $( document ).data( "ui-dialog-overlays" ), 2, "ui-dialog-overlays equals the number of open overlays" ); equal( $( document ).data( "ui-dialog-overlays" ), 2, "ui-dialog-overlays equals the number of open overlays" );
element.dialog( "close" ); element.dialog( "close" );
@ -78,147 +78,147 @@ test("destroy", function( assert ) {
element2.dialog( "destroy" ); element2.dialog( "destroy" );
equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" ); equal( $( ".ui-widget-overlay" ).length, 0, "overlays removed when all dialogs are destoryed" );
equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" ); equal( $( document ).data( "ui-dialog-overlays" ), undefined, "ui-dialog-overlays equals the number of open overlays" );
}); } );
asyncTest("#9000: Dialog leaves broken event handler after close/destroy in certain cases", function() { asyncTest( "#9000: Dialog leaves broken event handler after close/destroy in certain cases", function() {
expect( 1 ); expect( 1 );
$( "#dialog1" ).dialog({ modal:true }).dialog( "close" ).dialog( "destroy" ); $( "#dialog1" ).dialog( { modal:true } ).dialog( "close" ).dialog( "destroy" );
setTimeout(function() { setTimeout( function() {
$( "#favorite-animal" ).trigger( "focus" ); $( "#favorite-animal" ).trigger( "focus" );
ok( true, "close and destroy modal dialog before its really opened" ); ok( true, "close and destroy modal dialog before its really opened" );
start(); start();
}); } );
}); } );
test("#4980: Destroy should place element back in original DOM position", function(){ test( "#4980: Destroy should place element back in original DOM position", function() {
expect( 2 ); expect( 2 );
var container = $("<div id='container'><div id='modal'>Content</div></div>"), var container = $( "<div id='container'><div id='modal'>Content</div></div>" ),
modal = container.find("#modal"); modal = container.find( "#modal" );
modal.dialog(); modal.dialog();
ok(!$.contains(container[0], modal[0]), "dialog should move modal element to outside container element"); ok( !$.contains( container[ 0 ], modal[ 0 ] ), "dialog should move modal element to outside container element" );
modal.dialog("destroy"); modal.dialog( "destroy" );
ok($.contains(container[0], modal[0]), "dialog(destroy) should place element back in original DOM position"); ok( $.contains( container[ 0 ], modal[ 0 ] ), "dialog(destroy) should place element back in original DOM position" );
}); } );
test( "enable/disable disabled", function( assert ) { test( "enable/disable disabled", function( assert ) {
expect( 3 ); expect( 3 );
var element = $( "<div></div>" ).dialog(); var element = $( "<div></div>" ).dialog();
element.dialog( "disable" ); element.dialog( "disable" );
equal(element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" ); equal( element.dialog( "option", "disabled" ), false, "disable method doesn't do anything" );
assert.lacksClasses( element, "ui-dialog-disabled ui-state-disabled", "disable method doesn't add classes" ); assert.lacksClasses( element, "ui-dialog-disabled ui-state-disabled", "disable method doesn't add classes" );
ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" ); ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" );
}); } );
test("close", function() { test( "close", function() {
expect( 3 ); expect( 3 );
var element, var element,
expected = $("<div></div>").dialog(), expected = $( "<div></div>" ).dialog(),
actual = expected.dialog("close"); actual = expected.dialog( "close" );
equal(actual, expected, "close is chainable"); equal( actual, expected, "close is chainable" );
element = $("<div></div>").dialog(); element = $( "<div></div>" ).dialog();
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible before close method called"); ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible before close method called" );
element.dialog("close"); element.dialog( "close" );
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden after close method called"); ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden after close method called" );
}); } );
test("isOpen", function() { test( "isOpen", function() {
expect(4); expect( 4 );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
equal(element.dialog("isOpen"), true, "dialog is open after init"); equal( element.dialog( "isOpen" ), true, "dialog is open after init" );
element.dialog("close"); element.dialog( "close" );
equal(element.dialog("isOpen"), false, "dialog is closed"); equal( element.dialog( "isOpen" ), false, "dialog is closed" );
element.remove(); element.remove();
element = $("<div></div>").dialog({autoOpen: false}); element = $( "<div></div>" ).dialog( { autoOpen: false } );
equal(element.dialog("isOpen"), false, "dialog is closed after init"); equal( element.dialog( "isOpen" ), false, "dialog is closed after init" );
element.dialog("open"); element.dialog( "open" );
equal(element.dialog("isOpen"), true, "dialog is open"); equal( element.dialog( "isOpen" ), true, "dialog is open" );
element.remove(); element.remove();
}); } );
test("moveToTop", function() { test( "moveToTop", function() {
expect( 5 ); expect( 5 );
function order() { function order() {
var actual = $( ".ui-dialog" ).map(function() { var actual = $( ".ui-dialog" ).map( function() {
return +$( this ).css( "z-index" ); return +$( this ).css( "z-index" );
}).get(); } ).get();
deepEqual( actual, $.makeArray( arguments ) ); deepEqual( actual, $.makeArray( arguments ) );
} }
var dialog1, dialog2, var dialog1, dialog2,
focusOn = "dialog1"; focusOn = "dialog1";
dialog1 = $( "#dialog1" ).dialog({ dialog1 = $( "#dialog1" ).dialog( {
focus: function() { focus: function() {
equal( focusOn, "dialog1" ); equal( focusOn, "dialog1" );
} }
}); } );
focusOn = "dialog2"; focusOn = "dialog2";
dialog2 = $( "#dialog2" ).dialog({ dialog2 = $( "#dialog2" ).dialog( {
focus: function() { focus: function() {
equal( focusOn, "dialog2" ); equal( focusOn, "dialog2" );
} }
}); } );
order( 100, 101 ); order( 100, 101 );
focusOn = "dialog1"; focusOn = "dialog1";
dialog1.dialog( "moveToTop" ); dialog1.dialog( "moveToTop" );
order( 102, 101 ); order( 102, 101 );
}); } );
test( "moveToTop: content scroll stays intact", function() { test( "moveToTop: content scroll stays intact", function() {
expect( 2 ); expect( 2 );
var otherDialog = $( "#dialog1" ).dialog(), var otherDialog = $( "#dialog1" ).dialog(),
scrollDialog = $( "#form-dialog" ).dialog({ scrollDialog = $( "#form-dialog" ).dialog( {
height: 200 height: 200
}); } );
scrollDialog.scrollTop( 50 ); scrollDialog.scrollTop( 50 );
equal( scrollDialog.scrollTop(), 50 ); equal( scrollDialog.scrollTop(), 50 );
otherDialog.dialog( "moveToTop" ); otherDialog.dialog( "moveToTop" );
equal( scrollDialog.scrollTop(), 50 ); equal( scrollDialog.scrollTop(), 50 );
}); } );
test("open", function() { test( "open", function() {
expect( 3 ); expect( 3 );
var element, var element,
expected = $("<div></div>").dialog(), expected = $( "<div></div>" ).dialog(),
actual = expected.dialog("open"); actual = expected.dialog( "open" );
equal(actual, expected, "open is chainable"); equal( actual, expected, "open is chainable" );
element = $("<div></div>").dialog({ autoOpen: false }); element = $( "<div></div>" ).dialog( { autoOpen: false } );
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden before open method called"); ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden before open method called" );
element.dialog("open"); element.dialog( "open" );
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible after open method called"); ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible after open method called" );
}); } );
// http://bugs.jqueryui.com/ticket/6137 // http://bugs.jqueryui.com/ticket/6137
test("Ensure form elements don't reset when opening a dialog", function() { test( "Ensure form elements don't reset when opening a dialog", function() {
expect(2); expect( 2 );
var d1 = $("<form><input type='radio' name='radio' id='a' value='a' checked='checked'></input>" + var d1 = $( "<form><input type='radio' name='radio' id='a' value='a' checked='checked'></input>" +
"<input type='radio' name='radio' id='b' value='b'>b</input></form>").appendTo( "body" ).dialog({autoOpen: false}); "<input type='radio' name='radio' id='b' value='b'>b</input></form>" ).appendTo( "body" ).dialog( { autoOpen: false } );
d1.find("#b").prop( "checked", true ); d1.find( "#b" ).prop( "checked", true );
equal(d1.find("input:checked").val(), "b", "checkbox b is checked"); equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.dialog("open"); d1.dialog( "open" );
equal(d1.find("input:checked").val(), "b", "checkbox b is checked"); equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.remove(); d1.remove();
}); } );
asyncTest( "#8958: dialog can be opened while opening", function() { asyncTest( "#8958: dialog can be opened while opening", function() {
expect( 1 ); expect( 1 );
var element = $( "<div>" ).dialog({ var element = $( "<div>" ).dialog( {
autoOpen: false, autoOpen: false,
modal: true, modal: true,
open: function() { open: function() {
equal( $( ".ui-widget-overlay" ).length, 1 ); equal( $( ".ui-widget-overlay" ).length, 1 );
start(); start();
} }
}); } );
// Support: IE8 // Support: IE8
// For some reason the #favorite-color input doesn't get focus if we don't // For some reason the #favorite-color input doesn't get focus if we don't
@ -226,42 +226,44 @@ asyncTest( "#8958: dialog can be opened while opening", function() {
$( "body" ).trigger( "focus" ); $( "body" ).trigger( "focus" );
$( "#favorite-animal" ) $( "#favorite-animal" )
// We focus the input to start the test. Once it receives focus, the // We focus the input to start the test. Once it receives focus, the
// dialog will open. Opening the dialog, will cause an element inside // dialog will open. Opening the dialog, will cause an element inside
// the dialog to gain focus, thus blurring the input. // the dialog to gain focus, thus blurring the input.
.on( "focus", function() { .on( "focus", function() {
element.dialog( "open" ); element.dialog( "open" );
}) } )
// When the input blurs, the dialog is in the process of opening. We // 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 // 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 // handle a call to the open() method during the process of the dialog
// being opened. // being opened.
.on( "blur", function() { .on( "blur", function() {
element.dialog( "open" ); element.dialog( "open" );
}) } )
.trigger( "focus" ); .trigger( "focus" );
}); } );
test("#5531: dialog width should be at least minWidth on creation", function () { test( "#5531: dialog width should be at least minWidth on creation", function() {
expect( 4 ); expect( 4 );
var element = $("<div></div>").dialog({ var element = $( "<div></div>" ).dialog( {
width: 200, width: 200,
minWidth: 300 minWidth: 300
}); } );
equal(element.dialog("option", "width"), 300, "width is minWidth"); equal( element.dialog( "option", "width" ), 300, "width is minWidth" );
element.dialog("option", "width", 200); element.dialog( "option", "width", 200 );
equal(element.dialog("option", "width"), 300, "width unchanged when set to < minWidth"); equal( element.dialog( "option", "width" ), 300, "width unchanged when set to < minWidth" );
element.dialog("option", "width", 320); element.dialog( "option", "width", 320 );
equal(element.dialog("option", "width"), 320, "width changed if set to > minWidth"); equal( element.dialog( "option", "width" ), 320, "width changed if set to > minWidth" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
minWidth: 300 minWidth: 300
}); } );
ok(element.dialog("option", "width") >= 300, "width is at least 300"); ok( element.dialog( "option", "width" ) >= 300, "width is at least 300" );
element.remove(); element.remove();
}); } );
} ); } );

486
tests/unit/dialog/options.js
View File

@ -6,155 +6,155 @@ define( [
"ui/effects/effect-explode" "ui/effects/effect-explode"
], function( $, testHelper ) { ], function( $, testHelper ) {
module("dialog: options"); module( "dialog: options" );
test( "appendTo", function() { test( "appendTo", function() {
expect( 16 ); expect( 16 );
var detached = $( "<div>" ), var detached = $( "<div>" ),
element = $( "#dialog1" ).dialog({ element = $( "#dialog1" ).dialog( {
modal: true modal: true
}); } );
equal( element.dialog( "widget" ).parent()[0], document.body, "defaults to body" ); equal( element.dialog( "widget" ).parent()[ 0 ], document.body, "defaults to body" );
equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay defaults to body" ); equal( $( ".ui-widget-overlay" ).parent()[ 0 ], document.body, "overlay defaults to body" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
appendTo: ".wrap", appendTo: ".wrap",
modal: true modal: true
}); } );
equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "first found element" ); equal( element.dialog( "widget" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "first found element" );
equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay first found element" ); equal( $( ".ui-widget-overlay" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "overlay first found element" );
equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" ); equal( $( "#wrap2 .ui-dialog" ).length, 0, "only appends to one element" );
equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" ); equal( $( "#wrap2 .ui-widget-overlay" ).length, 0, "overlay only appends to one element" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
appendTo: null, appendTo: null,
modal: true modal: true
}); } );
equal( element.dialog( "widget" ).parent()[0], document.body, "null" ); equal( element.dialog( "widget" ).parent()[ 0 ], document.body, "null" );
equal( $( ".ui-widget-overlay" ).parent()[0], document.body, "overlay null" ); equal( $( ".ui-widget-overlay" ).parent()[ 0 ], document.body, "overlay null" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
autoOpen: false, autoOpen: false,
modal: true modal: true
}).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" ); } ).dialog( "option", "appendTo", "#wrap1" ).dialog( "open" );
equal( element.dialog( "widget" ).parent()[0], $( "#wrap1" )[0], "modified after init" ); equal( element.dialog( "widget" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "modified after init" );
equal( $( ".ui-widget-overlay" ).parent()[0], $( "#wrap1" )[0], "overlay modified after init" ); equal( $( ".ui-widget-overlay" ).parent()[ 0 ], $( "#wrap1" )[ 0 ], "overlay modified after init" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
appendTo: detached, appendTo: detached,
modal: true modal: true
}); } );
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached jQuery object" ); equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached jQuery object" );
equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached jQuery object" ); equal( detached.find( ".ui-widget-overlay" ).parent()[ 0 ], detached[ 0 ], "overlay detached jQuery object" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
appendTo: detached[0], appendTo: detached[ 0 ],
modal: true modal: true
}); } );
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element" ); equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached DOM element" );
equal( detached.find( ".ui-widget-overlay" ).parent()[0], detached[0], "overlay detached DOM element" ); equal( detached.find( ".ui-widget-overlay" ).parent()[ 0 ], detached[ 0 ], "overlay detached DOM element" );
element.dialog( "destroy" ); element.dialog( "destroy" );
element.dialog({ element.dialog( {
autoOpen: false, autoOpen: false,
modal: true modal: true
}).dialog( "option", "appendTo", detached ); } ).dialog( "option", "appendTo", detached );
equal( element.dialog( "widget" ).parent()[0], detached[0], "detached DOM element via option()" ); equal( element.dialog( "widget" ).parent()[ 0 ], detached[ 0 ], "detached DOM element via option()" );
equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" ); equal( detached.find( ".ui-widget-overlay" ).length, 0, "overlay detached DOM element via option()" );
element.dialog( "destroy" ); element.dialog( "destroy" );
}); } );
test("autoOpen", function() { test( "autoOpen", function() {
expect(2); expect( 2 );
var element = $("<div></div>").dialog({ autoOpen: false }); var element = $( "<div></div>" ).dialog( { autoOpen: false } );
ok( !element.dialog("widget").is(":visible"), ".dialog({ autoOpen: false })"); ok( !element.dialog( "widget" ).is( ":visible" ), ".dialog({ autoOpen: false })" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ autoOpen: true }); element = $( "<div></div>" ).dialog( { autoOpen: true } );
ok( element.dialog("widget").is(":visible"), ".dialog({ autoOpen: true })"); ok( element.dialog( "widget" ).is( ":visible" ), ".dialog({ autoOpen: true })" );
element.remove(); element.remove();
}); } );
test("buttons", function( assert ) { test( "buttons", function( assert ) {
expect(21); expect( 21 );
var btn, i, newButtons, var btn, i, newButtons,
buttons = { buttons = {
"Ok": function( ev ) { "Ok": function( ev ) {
ok(true, "button click fires callback"); ok( true, "button click fires callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.target, btn[0], "event target"); equal( ev.target, btn[ 0 ], "event target" );
}, },
"Cancel": function( ev ) { "Cancel": function( ev ) {
ok(true, "button click fires callback"); ok( true, "button click fires callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.target, btn[1], "event target"); equal( ev.target, btn[ 1 ], "event target" );
} }
}, },
element = $("<div></div>").dialog({ buttons: buttons }); element = $( "<div></div>" ).dialog( { buttons: buttons } );
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 2, "number of buttons"); equal( btn.length, 2, "number of buttons" );
i = 0; i = 0;
$.each(buttons, function( key ) { $.each( buttons, function( key ) {
equal(btn.eq(i).text(), key, "text of button " + (i+1)); equal( btn.eq( i ).text(), key, "text of button " + ( i + 1 ) );
i++; i++;
}); } );
assert.hasClasses( btn.parent(), "ui-dialog-buttonset" ); assert.hasClasses( btn.parent(), "ui-dialog-buttonset" );
assert.hasClasses( element.parent(), "ui-dialog-buttons" ); assert.hasClasses( element.parent(), "ui-dialog-buttons" );
btn.trigger("click"); btn.trigger( "click" );
newButtons = { newButtons = {
"Close": function( ev ) { "Close": function( ev ) {
ok(true, "button click fires callback"); ok( true, "button click fires callback" );
equal(this, element[0], "context of callback"); equal( this, element[ 0 ], "context of callback" );
equal(ev.target, btn[0], "event target"); equal( ev.target, btn[ 0 ], "event target" );
} }
}; };
deepEqual(element.dialog("option", "buttons"), buttons, ".dialog('option', 'buttons') getter"); deepEqual( element.dialog( "option", "buttons" ), buttons, ".dialog('option', 'buttons') getter" );
element.dialog("option", "buttons", newButtons); element.dialog( "option", "buttons", newButtons );
deepEqual(element.dialog("option", "buttons"), newButtons, ".dialog('option', 'buttons', ...) setter"); deepEqual( element.dialog( "option", "buttons" ), newButtons, ".dialog('option', 'buttons', ...) setter" );
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 1, "number of buttons after setter"); equal( btn.length, 1, "number of buttons after setter" );
btn.trigger("click"); btn.trigger( "click" );
i = 0; i = 0;
$.each(newButtons, function( key ) { $.each( newButtons, function( key ) {
equal(btn.eq(i).text(), key, "text of button " + (i+1)); equal( btn.eq( i ).text(), key, "text of button " + ( i + 1 ) );
i += 1; i += 1;
}); } );
element.dialog("option", "buttons", null); element.dialog( "option", "buttons", null );
btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); btn = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(btn.length, 0, "all buttons have been removed"); equal( btn.length, 0, "all buttons have been removed" );
equal(element.find(".ui-dialog-buttonset").length, 0, "buttonset has been removed"); equal( element.find( ".ui-dialog-buttonset" ).length, 0, "buttonset has been removed" );
assert.lacksClasses( element.parent(), "ui-dialog-buttons" ); assert.lacksClasses( element.parent(), "ui-dialog-buttons" );
element.remove(); element.remove();
}); } );
test("buttons - advanced", function( assert ) { test( "buttons - advanced", function( assert ) {
expect( 7 ); expect( 7 );
var buttons, var buttons,
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
buttons: [ buttons: [
{ {
text: "a button", text: "a button",
"class": "additional-class", "class": "additional-class",
id: "my-button-id", id: "my-button-id",
click: function() { click: function() {
equal(this, element[0], "correct context"); equal( this, element[ 0 ], "correct context" );
}, },
icons: { icons: {
primary: "ui-icon-cancel" primary: "ui-icon-cancel"
@ -162,21 +162,21 @@ test("buttons - advanced", function( assert ) {
showText: false showText: false
} }
] ]
}); } );
buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" ); buttons = element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" );
equal(buttons.length, 1, "correct number of buttons"); equal( buttons.length, 1, "correct number of buttons" );
equal(buttons.attr("id"), "my-button-id", "correct id"); equal( buttons.attr( "id" ), "my-button-id", "correct id" );
equal(buttons.text(), "a button", "correct label"); equal( buttons.text(), "a button", "correct label" );
assert.hasClasses( buttons, "additional-class" ); assert.hasClasses( buttons, "additional-class" );
deepEqual( buttons.button("option", "icons"), { primary: "ui-icon-cancel", secondary: null } ); deepEqual( buttons.button( "option", "icons" ), { primary: "ui-icon-cancel", secondary: null } );
equal( buttons.button( "option", "text" ), false ); equal( buttons.button( "option", "text" ), false );
buttons.trigger( "click" ); buttons.trigger( "click" );
element.remove(); element.remove();
}); } );
test("#9043: buttons with Array.prototype modification", function() { test( "#9043: buttons with Array.prototype modification", function() {
expect( 1 ); expect( 1 );
Array.prototype.test = $.noop; Array.prototype.test = $.noop;
var element = $( "<div></div>" ).dialog(); var element = $( "<div></div>" ).dialog();
@ -184,162 +184,162 @@ test("#9043: buttons with Array.prototype modification", function() {
"no button pane" ); "no button pane" );
element.remove(); element.remove();
delete Array.prototype.test; delete Array.prototype.test;
}); } );
test("closeOnEscape", function() { test( "closeOnEscape", function() {
expect( 6 ); expect( 6 );
var element = $("<div></div>").dialog({ closeOnEscape: false }); var element = $( "<div></div>" ).dialog( { closeOnEscape: false } );
ok(true, "closeOnEscape: false"); ok( true, "closeOnEscape: false" );
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC"); ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog is open before ESC" );
element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE }) element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } )
.simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE }) .simulate( "keypress", { keyCode: $.ui.keyCode.ESCAPE } )
.simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE }); .simulate( "keyup", { keyCode: $.ui.keyCode.ESCAPE } );
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open after ESC"); ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog is open after ESC" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ closeOnEscape: true }); element = $( "<div></div>" ).dialog( { closeOnEscape: true } );
ok(true, "closeOnEscape: true"); ok( true, "closeOnEscape: true" );
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog is open before ESC"); ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog is open before ESC" );
element.simulate("keydown", { keyCode: $.ui.keyCode.ESCAPE }) element.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } )
.simulate("keypress", { keyCode: $.ui.keyCode.ESCAPE }) .simulate( "keypress", { keyCode: $.ui.keyCode.ESCAPE } )
.simulate("keyup", { keyCode: $.ui.keyCode.ESCAPE }); .simulate( "keyup", { keyCode: $.ui.keyCode.ESCAPE } );
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog is closed after ESC"); ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog is closed after ESC" );
}); } );
test("closeText", function() { test( "closeText", function() {
expect(3); expect( 3 );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "Close", equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "Close",
"default close text"); "default close text" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ closeText: "foo" }); element = $( "<div></div>" ).dialog( { closeText: "foo" } );
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "foo", equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "foo",
"closeText on init"); "closeText on init" );
element.remove(); element.remove();
element = $("<div></div>").dialog().dialog("option", "closeText", "bar"); element = $( "<div></div>" ).dialog().dialog( "option", "closeText", "bar" );
equal(element.dialog("widget").find(".ui-dialog-titlebar-close span").text(), "bar", equal( element.dialog( "widget" ).find( ".ui-dialog-titlebar-close span" ).text(), "bar",
"closeText via option method"); "closeText via option method" );
element.remove(); element.remove();
}); } );
test("draggable", function() { test( "draggable", function() {
expect(4); expect( 4 );
var element = $("<div></div>").dialog({ draggable: false }); var element = $( "<div></div>" ).dialog( { draggable: false } );
testHelper.testDrag(element, 50, -50, 0, 0); testHelper.testDrag( element, 50, -50, 0, 0 );
element.dialog("option", "draggable", true); element.dialog( "option", "draggable", true );
testHelper.testDrag(element, 50, -50, 50, -50); testHelper.testDrag( element, 50, -50, 50, -50 );
element.remove(); element.remove();
element = $("<div></div>").dialog({ draggable: true }); element = $( "<div></div>" ).dialog( { draggable: true } );
testHelper.testDrag(element, 50, -50, 50, -50); testHelper.testDrag( element, 50, -50, 50, -50 );
element.dialog("option", "draggable", false); element.dialog( "option", "draggable", false );
testHelper.testDrag(element, 50, -50, 0, 0); testHelper.testDrag( element, 50, -50, 0, 0 );
element.remove(); element.remove();
}); } );
test("height", function() { test( "height", function() {
expect(4); expect( 4 );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
equal(element.dialog("widget").outerHeight(), 150, "default height"); equal( element.dialog( "widget" ).outerHeight(), 150, "default height" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ height: 237 }); element = $( "<div></div>" ).dialog( { height: 237 } );
equal(element.dialog("widget").outerHeight(), 237, "explicit height"); equal( element.dialog( "widget" ).outerHeight(), 237, "explicit height" );
element.remove(); element.remove();
element = $("<div></div>").dialog(); element = $( "<div></div>" ).dialog();
element.dialog("option", "height", 238); element.dialog( "option", "height", 238 );
equal(element.dialog("widget").outerHeight(), 238, "explicit height set after init"); equal( element.dialog( "widget" ).outerHeight(), 238, "explicit height set after init" );
element.remove(); element.remove();
element = $("<div></div>").css("padding", "20px") element = $( "<div></div>" ).css( "padding", "20px" )
.dialog({ height: 240 }); .dialog( { height: 240 } );
equal(element.dialog("widget").outerHeight(), 240, "explicit height with padding"); equal( element.dialog( "widget" ).outerHeight(), 240, "explicit height with padding" );
element.remove(); element.remove();
}); } );
test("maxHeight", function( assert ) { test( "maxHeight", function( assert ) {
expect(3); expect( 3 );
var element = $("<div></div>").dialog({ maxHeight: 200 }); var element = $( "<div></div>" ).dialog( { maxHeight: 200 } );
testHelper.drag(element, ".ui-resizable-s", 1000, 1000); testHelper.drag( element, ".ui-resizable-s", 1000, 1000 );
assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ maxHeight: 200 }); element = $( "<div></div>" ).dialog( { maxHeight: 200 } );
testHelper.drag(element, ".ui-resizable-n", -1000, -1000); testHelper.drag( element, ".ui-resizable-n", -1000, -1000 );
assert.close(element.dialog("widget").height(), 200, 1, "maxHeight"); assert.close( element.dialog( "widget" ).height(), 200, 1, "maxHeight" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ maxHeight: 200 }).dialog("option", "maxHeight", 300); element = $( "<div></div>" ).dialog( { maxHeight: 200 } ).dialog( "option", "maxHeight", 300 );
testHelper.drag(element, ".ui-resizable-s", 1000, 1000); testHelper.drag( element, ".ui-resizable-s", 1000, 1000 );
assert.close(element.dialog("widget").height(), 300, 1, "maxHeight"); assert.close( element.dialog( "widget" ).height(), 300, 1, "maxHeight" );
element.remove(); element.remove();
}); } );
test("maxWidth", function( assert ) { test( "maxWidth", function( assert ) {
expect(3); expect( 3 );
var element = $("<div></div>").dialog({ maxWidth: 200 }); var element = $( "<div></div>" ).dialog( { maxWidth: 200 } );
testHelper.drag(element, ".ui-resizable-e", 1000, 1000); testHelper.drag( element, ".ui-resizable-e", 1000, 1000 );
assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ maxWidth: 200 }); element = $( "<div></div>" ).dialog( { maxWidth: 200 } );
testHelper.drag(element, ".ui-resizable-w", -1000, -1000); testHelper.drag( element, ".ui-resizable-w", -1000, -1000 );
assert.close(element.dialog("widget").width(), 200, 1, "maxWidth"); assert.close( element.dialog( "widget" ).width(), 200, 1, "maxWidth" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ maxWidth: 200 }).dialog("option", "maxWidth", 300); element = $( "<div></div>" ).dialog( { maxWidth: 200 } ).dialog( "option", "maxWidth", 300 );
testHelper.drag(element, ".ui-resizable-w", -1000, -1000); testHelper.drag( element, ".ui-resizable-w", -1000, -1000 );
assert.close(element.dialog("widget").width(), 300, 1, "maxWidth"); assert.close( element.dialog( "widget" ).width(), 300, 1, "maxWidth" );
element.remove(); element.remove();
}); } );
test("minHeight", function( assert ) { test( "minHeight", function( assert ) {
expect(3); expect( 3 );
var element = $("<div></div>").dialog({ minHeight: 10 }); var element = $( "<div></div>" ).dialog( { minHeight: 10 } );
testHelper.drag(element, ".ui-resizable-s", -1000, -1000); testHelper.drag( element, ".ui-resizable-s", -1000, -1000 );
assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ minHeight: 10 }); element = $( "<div></div>" ).dialog( { minHeight: 10 } );
testHelper.drag(element, ".ui-resizable-n", 1000, 1000); testHelper.drag( element, ".ui-resizable-n", 1000, 1000 );
assert.close(element.dialog("widget").height(), 10, 1, "minHeight"); assert.close( element.dialog( "widget" ).height(), 10, 1, "minHeight" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ minHeight: 10 }).dialog("option", "minHeight", 30); element = $( "<div></div>" ).dialog( { minHeight: 10 } ).dialog( "option", "minHeight", 30 );
testHelper.drag(element, ".ui-resizable-n", 1000, 1000); testHelper.drag( element, ".ui-resizable-n", 1000, 1000 );
assert.close(element.dialog("widget").height(), 30, 1, "minHeight"); assert.close( element.dialog( "widget" ).height(), 30, 1, "minHeight" );
element.remove(); element.remove();
}); } );
test("minWidth", function( assert ) { test( "minWidth", function( assert ) {
expect(3); expect( 3 );
var element = $("<div></div>").dialog({ minWidth: 10 }); var element = $( "<div></div>" ).dialog( { minWidth: 10 } );
testHelper.drag(element, ".ui-resizable-e", -1000, -1000); testHelper.drag( element, ".ui-resizable-e", -1000, -1000 );
assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ minWidth: 10 }); element = $( "<div></div>" ).dialog( { minWidth: 10 } );
testHelper.drag(element, ".ui-resizable-w", 1000, 1000); testHelper.drag( element, ".ui-resizable-w", 1000, 1000 );
assert.close(element.dialog("widget").width(), 10, 1, "minWidth"); assert.close( element.dialog( "widget" ).width(), 10, 1, "minWidth" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ minWidth: 30 }).dialog("option", "minWidth", 30); element = $( "<div></div>" ).dialog( { minWidth: 30 } ).dialog( "option", "minWidth", 30 );
testHelper.drag(element, ".ui-resizable-w", 1000, 1000); testHelper.drag( element, ".ui-resizable-w", 1000, 1000 );
assert.close(element.dialog("widget").width(), 30, 1, "minWidth"); assert.close( element.dialog( "widget" ).width(), 30, 1, "minWidth" );
element.remove(); element.remove();
}); } );
test( "position, default center on window", function( assert ) { test( "position, default center on window", function( assert ) {
expect( 2 ); expect( 2 );
@ -349,13 +349,13 @@ test( "position, default center on window", function( assert ) {
// Support: Firefox // Support: Firefox
var winWidth = $( window ).width(), var winWidth = $( window ).width(),
winHeight = $( window ).height(), winHeight = $( window ).height(),
element = $("<div></div>").dialog(), element = $( "<div></div>" ).dialog(),
dialog = element.dialog("widget"), dialog = element.dialog( "widget" ),
offset = dialog.offset(); offset = dialog.offset();
assert.close( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" ); assert.close( offset.left, Math.round( winWidth / 2 - dialog.outerWidth() / 2 ) + $( window ).scrollLeft(), 1, "dialog left position of center on window on initilization" );
assert.close( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" ); assert.close( offset.top, Math.round( winHeight / 2 - dialog.outerHeight() / 2 ) + $( window ).scrollTop(), 1, "dialog top position of center on window on initilization" );
element.remove(); element.remove();
}); } );
test( "position, right bottom at right bottom via ui.position args", function( assert ) { test( "position, right bottom at right bottom via ui.position args", function( assert ) {
expect( 2 ); expect( 2 );
@ -365,51 +365,51 @@ test( "position, right bottom at right bottom via ui.position args", function( a
// Support: Firefox // Support: Firefox
var winWidth = $( window ).width(), var winWidth = $( window ).width(),
winHeight = $( window ).height(), winHeight = $( window ).height(),
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
position: { position: {
my: "right bottom", my: "right bottom",
at: "right bottom" at: "right bottom"
} }
}), } ),
dialog = element.dialog("widget"), dialog = element.dialog( "widget" ),
offset = dialog.offset(); offset = dialog.offset();
assert.close( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" ); assert.close( offset.left, winWidth - dialog.outerWidth() + $( window ).scrollLeft(), 1, "dialog left position of right bottom at right bottom on initilization" );
assert.close( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" ); assert.close( offset.top, winHeight - dialog.outerHeight() + $( window ).scrollTop(), 1, "dialog top position of right bottom at right bottom on initilization" );
element.remove(); element.remove();
}); } );
test( "position, at another element", function( assert ) { test( "position, at another element", function( assert ) {
expect( 4 ); expect( 4 );
var parent = $("<div></div>").css({ var parent = $( "<div></div>" ).css( {
position: "absolute", position: "absolute",
top: 400, top: 400,
left: 600, left: 600,
height: 10, height: 10,
width: 10 width: 10
}).appendTo("body"), } ).appendTo( "body" ),
element = $("<div></div>").dialog({ element = $( "<div></div>" ).dialog( {
position: { position: {
my: "left top", my: "left top",
at: "left top", at: "left top",
of: parent, of: parent,
collision: "none" collision: "none"
} }
}), } ),
dialog = element.dialog("widget"), dialog = element.dialog( "widget" ),
offset = dialog.offset(); offset = dialog.offset();
assert.close( offset.left, 600, 1, "dialog left position at another element on initilization" ); assert.close( offset.left, 600, 1, "dialog left position at another element on initilization" );
assert.close( offset.top, 400, 1, "dialog top position at another element on initilization" ); assert.close( offset.top, 400, 1, "dialog top position at another element on initilization" );
element.dialog("option", "position", { element.dialog( "option", "position", {
my: "left top", my: "left top",
at: "right bottom", at: "right bottom",
of: parent, of: parent,
collision: "none" collision: "none"
}); } );
offset = dialog.offset(); offset = dialog.offset();
@ -418,32 +418,33 @@ test( "position, at another element", function( assert ) {
element.remove(); element.remove();
parent.remove(); parent.remove();
}); } );
test("resizable", function() { test( "resizable", function() {
expect(4); expect( 4 );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
testHelper.shouldResize(element, 50, 50, "[default]"); testHelper.shouldResize( element, 50, 50, "[default]" );
element.dialog("option", "resizable", false); element.dialog( "option", "resizable", false );
testHelper.shouldResize(element, 0, 0, "disabled after init"); testHelper.shouldResize( element, 0, 0, "disabled after init" );
element.remove(); element.remove();
element = $("<div></div>").dialog({ resizable: false }); element = $( "<div></div>" ).dialog( { resizable: false } );
testHelper.shouldResize(element, 0, 0, "disabled in init options"); testHelper.shouldResize( element, 0, 0, "disabled in init options" );
element.dialog("option", "resizable", true); element.dialog( "option", "resizable", true );
testHelper.shouldResize(element, 50, 50, "enabled after init"); testHelper.shouldResize( element, 50, 50, "enabled after init" );
element.remove(); element.remove();
}); } );
test( "title", function() { test( "title", function() {
expect( 11 ); expect( 11 );
function titleText() { function titleText() {
return element.dialog("widget").find( ".ui-dialog-title" ).html(); return element.dialog( "widget" ).find( ".ui-dialog-title" ).html();
} }
var element = $( "<div></div>" ).dialog(); var element = $( "<div></div>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;" // some browsers return a non-breaking space and some return "&nbsp;"
// so we generate a non-breaking space for comparison // so we generate a non-breaking space for comparison
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" ); equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
@ -452,17 +453,17 @@ test( "title", function() {
element = $( "<div title='foo'>" ).dialog(); element = $( "<div title='foo'>" ).dialog();
equal( titleText(), "foo", "title in element attribute" ); equal( titleText(), "foo", "title in element attribute" );
equal( element.dialog( "option", "title"), "foo", "option updated from attribute" ); equal( element.dialog( "option", "title" ), "foo", "option updated from attribute" );
element.remove(); element.remove();
element = $( "<div></div>" ).dialog({ title: "foo" }); element = $( "<div></div>" ).dialog( { title: "foo" } );
equal( titleText(), "foo", "title in init options" ); equal( titleText(), "foo", "title in init options" );
equal( element.dialog("option", "title"), "foo", "opiton set from options hash" ); equal( element.dialog( "option", "title" ), "foo", "opiton set from options hash" );
element.remove(); element.remove();
element = $( "<div title='foo'>" ).dialog({ title: "bar" }); element = $( "<div title='foo'>" ).dialog( { title: "bar" } );
equal( titleText(), "bar", "title in init options should override title in element attribute" ); equal( titleText(), "bar", "title in init options should override title in element attribute" );
equal( element.dialog("option", "title"), "bar", "opiton set from options hash" ); equal( element.dialog( "option", "title" ), "bar", "opiton set from options hash" );
element.remove(); element.remove();
element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" ); element = $( "<div></div>" ).dialog().dialog( "option", "title", "foo" );
@ -471,87 +472,88 @@ test( "title", function() {
// Make sure attroperties are properly ignored - #5742 - .attr() might return a DOMElement // Make sure attroperties are properly ignored - #5742 - .attr() might return a DOMElement
element = $( "<form><input name='title'></form>" ).dialog(); element = $( "<form><input name='title'></form>" ).dialog();
// some browsers return a non-breaking space and some return "&nbsp;" // some browsers return a non-breaking space and some return "&nbsp;"
// so we get the text to normalize to the actual non-breaking space // so we get the text to normalize to the actual non-breaking space
equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" ); equal( titleText(), $( "<span>&#160;</span>" ).html(), "[default]" );
equal( element.dialog( "option", "title" ), null, "option not changed" ); equal( element.dialog( "option", "title" ), null, "option not changed" );
element.remove(); element.remove();
}); } );
test("width", function( assert ) { test( "width", function( assert ) {
expect(3); expect( 3 );
var element = $("<div></div>").dialog(); var element = $( "<div></div>" ).dialog();
assert.close(element.dialog("widget").width(), 300, 1, "default width"); assert.close( element.dialog( "widget" ).width(), 300, 1, "default width" );
element.remove(); element.remove();
element = $("<div></div>").dialog({width: 437 }); element = $( "<div></div>" ).dialog( { width: 437 } );
assert.close(element.dialog("widget").width(), 437, 1, "explicit width"); assert.close( element.dialog( "widget" ).width(), 437, 1, "explicit width" );
element.dialog("option", "width", 438); element.dialog( "option", "width", 438 );
assert.close(element.dialog("widget").width(), 438, 1, "explicit width after init"); assert.close( element.dialog( "widget" ).width(), 438, 1, "explicit width after init" );
element.remove(); element.remove();
}); } );
test("#4826: setting resizable false toggles resizable on dialog", function() { test( "#4826: setting resizable false toggles resizable on dialog", function() {
expect(6); expect( 6 );
var i, var i,
element = $("<div></div>").dialog({ resizable: false }); element = $( "<div></div>" ).dialog( { resizable: false } );
testHelper.shouldResize(element, 0, 0, "[default]"); testHelper.shouldResize( element, 0, 0, "[default]" );
for (i=0; i<2; i++) { for ( i = 0; i < 2; i++ ) {
element.dialog("close").dialog("open"); element.dialog( "close" ).dialog( "open" );
testHelper.shouldResize(element, 0, 0, "initialized with resizable false toggle ("+ (i+1) +")"); testHelper.shouldResize( element, 0, 0, "initialized with resizable false toggle (" + ( i + 1 ) + ")" );
} }
element.remove(); element.remove();
element = $("<div></div>").dialog({ resizable: true }); element = $( "<div></div>" ).dialog( { resizable: true } );
testHelper.shouldResize(element, 50, 50, "[default]"); testHelper.shouldResize( element, 50, 50, "[default]" );
for (i=0; i<2; i++) { for ( i = 0; i < 2; i++ ) {
element.dialog("close").dialog("option", "resizable", false).dialog("open"); element.dialog( "close" ).dialog( "option", "resizable", false ).dialog( "open" );
testHelper.shouldResize(element, 0, 0, "set option resizable false toggle ("+ (i+1) +")"); testHelper.shouldResize( element, 0, 0, "set option resizable false toggle (" + ( i + 1 ) + ")" );
} }
element.remove(); element.remove();
}); } );
asyncTest( "#8051 - 'Explode' dialog animation causes crash in IE 6, 7 and 8", function() { asyncTest( "#8051 - 'Explode' dialog animation causes crash in IE 6, 7 and 8", function() {
expect( 1 ); expect( 1 );
var element = $( "<div></div>" ).dialog({ var element = $( "<div></div>" ).dialog( {
show: "explode", show: "explode",
focus: function() { focus: function() {
ok( true, "dialog opened with animation" ); ok( true, "dialog opened with animation" );
element.remove(); element.remove();
start(); start();
} }
}); } );
}); } );
asyncTest( "#4421 - Focus lost from dialog which uses show-effect", function() { asyncTest( "#4421 - Focus lost from dialog which uses show-effect", function() {
expect( 1 ); expect( 1 );
var element = $( "<div></div>" ).dialog({ var element = $( "<div></div>" ).dialog( {
show: "blind", show: "blind",
focus: function() { focus: function() {
equal( element.dialog( "widget" ).find( document.activeElement ).length, 1, "dialog maintains focus" ); equal( element.dialog( "widget" ).find( document.activeElement ).length, 1, "dialog maintains focus" );
element.remove(); element.remove();
start(); start();
} }
}); } );
}); } );
asyncTest( "Open followed by close during show effect", function() { asyncTest( "Open followed by close during show effect", function() {
expect( 1 ); expect( 1 );
var element = $( "<div></div>" ).dialog({ var element = $( "<div></div>" ).dialog( {
show: "blind", show: "blind",
close: function() { close: function() {
ok( true, "dialog closed properly during animation" ); ok( true, "dialog closed properly during animation" );
element.remove(); element.remove();
start(); start();
} }
}); } );
setTimeout( function() { setTimeout( function() {
element.dialog("close"); element.dialog( "close" );
}, 100 ); }, 100 );
}); } );
} ); } );

15
ui/widgets/dialog.js
View File

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