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 1 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,
resizeStop: null
}
});
} );
} );

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

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

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

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

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

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

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

@ -5,22 +5,23 @@ define( [
], function( $, helper ) {
return $.extend( helper, {
drag: function(element, handle, dx, dy) {
var d = element.dialog("widget");
drag: function( element, handle, dx, dy ) {
var d = element.dialog( "widget" );
//this mouseover is to work around a limitation in resizable
//TODO: fix resizable so handle doesn't require mouseover in order to be used
$( handle, d ).simulate("mouseover").simulate( "drag", {
$( handle, d ).simulate( "mouseover" ).simulate( "drag", {
dx: dx,
dy: dy
});
} );
},
testDrag: function(element, dx, dy, expectedDX, expectedDY, msg) {
testDrag: function( element, dx, dy, expectedDX, expectedDY, msg ) {
var actualDX, actualDY, offsetAfter,
d = element.dialog("widget"),
handle = $(".ui-dialog-titlebar", d),
d = element.dialog( "widget" ),
handle = $( ".ui-dialog-titlebar", d ),
offsetBefore = d.offset();
this.drag(element, handle, dx, dy);
this.drag( element, handle, dx, dy );
offsetAfter = d.offset();
@ -28,19 +29,20 @@ return $.extend( helper, {
actualDX = offsetAfter.left - offsetBefore.left;
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)
// once we switch to using box-sizing: border-box (#9845) that should work fine
// 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,
d = element.dialog("widget"),
handle = $(".ui-resizable-se", d),
d = element.dialog( "widget" ),
handle = $( ".ui-resizable-se", d ),
heightBefore = element.height(),
widthBefore = element.width();
this.drag(element, handle, 50, 50);
this.drag( element, handle, 50, 50 );
heightAfter = element.height();
widthAfter = element.width();
@ -48,7 +50,7 @@ return $.extend( helper, {
msg = msg ? msg + "." : "";
actual = { width: widthAfter, height: heightAfter },
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"
], function( $ ) {
module("dialog: methods", {
module( "dialog: methods", {
teardown: function() {
$("body>.ui-dialog").remove();
$( "body>.ui-dialog" ).remove();
}
});
} );
test("init", function() {
expect(6);
test( "init", function() {
expect( 6 );
$("<div></div>").appendTo("body").dialog().remove();
ok(true, ".dialog() called on element");
$( "<div></div>" ).appendTo( "body" ).dialog().remove();
ok( true, ".dialog() called on element" );
$([]).dialog().remove();
ok(true, ".dialog() called on empty collection");
$( [] ).dialog().remove();
ok( true, ".dialog() called on empty collection" );
$("<div></div>").dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - never connected");
$( "<div></div>" ).dialog().remove();
ok( true, ".dialog() called on disconnected DOMElement - never connected" );
$("<div></div>").appendTo("body").remove().dialog().remove();
ok(true, ".dialog() called on disconnected DOMElement - removed");
$( "<div></div>" ).appendTo( "body" ).remove().dialog().remove();
ok( true, ".dialog() called on disconnected DOMElement - removed" );
var element = $("<div></div>").dialog();
element.dialog("option", "foo");
var element = $( "<div></div>" ).dialog();
element.dialog( "option", "foo" );
element.remove();
ok(true, "arbitrary option getter after init");
ok( true, "arbitrary option getter after init" );
$("<div></div>").dialog().dialog("option", "foo", "bar").remove();
ok(true, "arbitrary option setter after init");
});
$( "<div></div>" ).dialog().dialog( "option", "foo", "bar" ).remove();
ok( true, "arbitrary option setter after init" );
} );
test("destroy", function( assert ) {
test( "destroy", function( assert ) {
expect( 17 );
var element, element2;
@ -43,30 +43,30 @@ test("destroy", function( assert ) {
var dialog = $( "#dialog1" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 0 );
});
} );
assert.domEqual( "#form-dialog", function() {
var dialog = $( "#form-dialog" ).dialog().dialog( "destroy" );
equal( dialog.parent()[ 0 ], $( "#qunit-fixture" )[ 0 ] );
equal( dialog.index(), 2 );
});
} );
// Ensure dimensions are restored (#8119)
$( "#dialog1" ).show().css({
$( "#dialog1" ).show().css( {
width: "400px",
minHeight: "100px",
height: "200px"
});
} );
assert.domEqual( "#dialog1", function() {
$( "#dialog1" ).dialog().dialog( "destroy" );
});
} );
// 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( $( 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 }),
element2 = $( "#dialog2" ).dialog({ modal: true });
element = $( "#dialog1" ).dialog( { modal: true } ),
element2 = $( "#dialog2" ).dialog( { modal: true } );
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" );
element.dialog( "close" );
@ -78,147 +78,147 @@ test("destroy", function( assert ) {
element2.dialog( "destroy" );
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" );
});
} );
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 );
$( "#dialog1" ).dialog({ modal:true }).dialog( "close" ).dialog( "destroy" );
setTimeout(function() {
$( "#dialog1" ).dialog( { modal:true } ).dialog( "close" ).dialog( "destroy" );
setTimeout( function() {
$( "#favorite-animal" ).trigger( "focus" );
ok( true, "close and destroy modal dialog before its really opened" );
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 );
var container = $("<div id='container'><div id='modal'>Content</div></div>"),
modal = container.find("#modal");
var container = $( "<div id='container'><div id='modal'>Content</div></div>" ),
modal = container.find( "#modal" );
modal.dialog();
ok(!$.contains(container[0], modal[0]), "dialog should move modal element to outside container element");
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 should move modal element to outside container element" );
modal.dialog( "destroy" );
ok( $.contains( container[ 0 ], modal[ 0 ] ), "dialog(destroy) should place element back in original DOM position" );
} );
test( "enable/disable disabled", function( assert ) {
expect( 3 );
var element = $( "<div></div>" ).dialog();
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" );
ok( !element.dialog( "widget" ).attr( "aria-disabled" ), "disable method doesn't add aria-disabled" );
});
} );
test("close", function() {
test( "close", function() {
expect( 3 );
var element,
expected = $("<div></div>").dialog(),
actual = expected.dialog("close");
equal(actual, expected, "close is chainable");
expected = $( "<div></div>" ).dialog(),
actual = expected.dialog( "close" );
equal( actual, expected, "close is chainable" );
element = $("<div></div>").dialog();
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible before close method called");
element.dialog("close");
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden after close method called");
});
element = $( "<div></div>" ).dialog();
ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible before close method called" );
element.dialog( "close" );
ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden after close method called" );
} );
test("isOpen", function() {
expect(4);
test( "isOpen", function() {
expect( 4 );
var element = $("<div></div>").dialog();
equal(element.dialog("isOpen"), true, "dialog is open after init");
element.dialog("close");
equal(element.dialog("isOpen"), false, "dialog is closed");
var element = $( "<div></div>" ).dialog();
equal( element.dialog( "isOpen" ), true, "dialog is open after init" );
element.dialog( "close" );
equal( element.dialog( "isOpen" ), false, "dialog is closed" );
element.remove();
element = $("<div></div>").dialog({autoOpen: false});
equal(element.dialog("isOpen"), false, "dialog is closed after init");
element.dialog("open");
equal(element.dialog("isOpen"), true, "dialog is open");
element = $( "<div></div>" ).dialog( { autoOpen: false } );
equal( element.dialog( "isOpen" ), false, "dialog is closed after init" );
element.dialog( "open" );
equal( element.dialog( "isOpen" ), true, "dialog is open" );
element.remove();
});
} );
test("moveToTop", function() {
test( "moveToTop", function() {
expect( 5 );
function order() {
var actual = $( ".ui-dialog" ).map(function() {
var actual = $( ".ui-dialog" ).map( function() {
return +$( this ).css( "z-index" );
}).get();
} ).get();
deepEqual( actual, $.makeArray( arguments ) );
}
var dialog1, dialog2,
focusOn = "dialog1";
dialog1 = $( "#dialog1" ).dialog({
dialog1 = $( "#dialog1" ).dialog( {
focus: function() {
equal( focusOn, "dialog1" );
}
});
} );
focusOn = "dialog2";
dialog2 = $( "#dialog2" ).dialog({
dialog2 = $( "#dialog2" ).dialog( {
focus: function() {
equal( focusOn, "dialog2" );
}
});
} );
order( 100, 101 );
focusOn = "dialog1";
dialog1.dialog( "moveToTop" );
order( 102, 101 );
});
} );
test( "moveToTop: content scroll stays intact", function() {
expect( 2 );
var otherDialog = $( "#dialog1" ).dialog(),
scrollDialog = $( "#form-dialog" ).dialog({
scrollDialog = $( "#form-dialog" ).dialog( {
height: 200
});
} );
scrollDialog.scrollTop( 50 );
equal( scrollDialog.scrollTop(), 50 );
otherDialog.dialog( "moveToTop" );
equal( scrollDialog.scrollTop(), 50 );
});
} );
test("open", function() {
test( "open", function() {
expect( 3 );
var element,
expected = $("<div></div>").dialog(),
actual = expected.dialog("open");
equal(actual, expected, "open is chainable");
expected = $( "<div></div>" ).dialog(),
actual = expected.dialog( "open" );
equal( actual, expected, "open is chainable" );
element = $("<div></div>").dialog({ autoOpen: false });
ok(element.dialog("widget").is(":hidden") && !element.dialog("widget").is(":visible"), "dialog hidden before open method called");
element.dialog("open");
ok(element.dialog("widget").is(":visible") && !element.dialog("widget").is(":hidden"), "dialog visible after open method called");
});
element = $( "<div></div>" ).dialog( { autoOpen: false } );
ok( element.dialog( "widget" ).is( ":hidden" ) && !element.dialog( "widget" ).is( ":visible" ), "dialog hidden before open method called" );
element.dialog( "open" );
ok( element.dialog( "widget" ).is( ":visible" ) && !element.dialog( "widget" ).is( ":hidden" ), "dialog visible after open method called" );
} );
// http://bugs.jqueryui.com/ticket/6137
test("Ensure form elements don't reset when opening a dialog", function() {
expect(2);
test( "Ensure form elements don't reset when opening a dialog", function() {
expect( 2 );
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});
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 } );
d1.find("#b").prop( "checked", true );
equal(d1.find("input:checked").val(), "b", "checkbox b is checked");
d1.find( "#b" ).prop( "checked", true );
equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.dialog("open");
equal(d1.find("input:checked").val(), "b", "checkbox b is checked");
d1.dialog( "open" );
equal( d1.find( "input:checked" ).val(), "b", "checkbox b is checked" );
d1.remove();
});
} );
asyncTest( "#8958: dialog can be opened while opening", function() {
expect( 1 );
var element = $( "<div>" ).dialog({
var element = $( "<div>" ).dialog( {
autoOpen: false,
modal: true,
open: function() {
equal( $( ".ui-widget-overlay" ).length, 1 );
start();
}
});
} );
// Support: IE8
// 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" );
$( "#favorite-animal" )
// We focus the input to start the test. Once it receives focus, the
// dialog will open. Opening the dialog, will cause an element inside
// the dialog to gain focus, thus blurring the input.
.on( "focus", function() {
element.dialog( "open" );
})
} )
// When the input blurs, the dialog is in the process of opening. We
// try to open the dialog again, to make sure that dialogs properly
// handle a call to the open() method during the process of the dialog
// being opened.
.on( "blur", function() {
element.dialog( "open" );
})
} )
.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 );
var element = $("<div></div>").dialog({
var element = $( "<div></div>" ).dialog( {
width: 200,
minWidth: 300
});
} );
equal(element.dialog("option", "width"), 300, "width is minWidth");
element.dialog("option", "width", 200);
equal(element.dialog("option", "width"), 300, "width unchanged when set to < minWidth");
element.dialog("option", "width", 320);
equal(element.dialog("option", "width"), 320, "width changed if set to > minWidth");
equal( element.dialog( "option", "width" ), 300, "width is minWidth" );
element.dialog( "option", "width", 200 );
equal( element.dialog( "option", "width" ), 300, "width unchanged when set to < minWidth" );
element.dialog( "option", "width", 320 );
equal( element.dialog( "option", "width" ), 320, "width changed if set to > minWidth" );
element.remove();
element = $("<div></div>").dialog({
element = $( "<div></div>" ).dialog( {
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();
});
} );
} );

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

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

15
ui/widgets/dialog.js
View File

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