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: Handle escape for all overlays. Fixes #8300 - Dialog: Incorrect behavior for ESCAPE with multiple modal dialogs.

Browse Source
This commit is contained in:
Jay Merrifield 2012-05-03 19:02:23 -04:00 committed by Scott González
parent 32f356bbfa
commit cab4c467d9
2 changed files with 72 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
tests/unit/dialog/dialog_tickets.js
View File

@ -117,26 +117,76 @@ test("#6645: Missing element not found check in overlay", function(){
}); });
test("#6966: Escape key closes all dialogs, not the top one", function(){ test("#6966: Escape key closes all dialogs, not the top one", function(){
expect(8); expect(24);
// test with close function removing dialog // test with close function removing dialog triggered through the overlay
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true}); d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true, close: function(){ d1.remove(); }});
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }}); d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }});
ok(d1.dialog("isOpen"), 'first dialog is open');
ok(d2.dialog("isOpen"), 'second dialog is open'); ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open');
d2.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open');
ok(d1.dialog("isOpen"), 'first dialog still open');
$( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open');
ok(!d2.data('dialog'), 'second dialog is closed'); ok(!d2.data('dialog'), 'second dialog is closed');
$( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
ok(!d1.data('dialog'), 'first dialog is closed');
ok(!d2.data('dialog'), 'second dialog is closed');
d2.remove();
d1.remove();
// test with close function removing dialog triggered through the dialog
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true, close: function(){ d1.remove(); }});
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true, close: function(){ d2.remove(); }});
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open');
ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open');
d2.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open');
ok(!d2.data('dialog'), 'second dialog is closed');
d1.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE});
ok(!d1.data('dialog'), 'first dialog is closed');
ok(!d2.data('dialog'), 'second dialog is closed');
d2.remove(); d2.remove();
d1.remove(); d1.remove();
// test without close function removing dialog // test without close function removing dialog
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true}); d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true});
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true}); d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true});
ok(d1.dialog("isOpen"), 'first dialog is open'); ok(d1.dialog("isOpen"), 'first dialog is open');
ok(d2.dialog("isOpen"), 'second dialog is open'); ok(d2.dialog("isOpen"), 'second dialog is open');
d2.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); d2.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
ok(d1.dialog("isOpen"), 'first dialog still open'); ok(d1.dialog("isOpen"), 'first dialog still open');
ok(!d2.dialog("isOpen"), 'second dialog is closed'); ok(!d2.dialog("isOpen"), 'second dialog is closed');
d1.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
ok(!d1.dialog("isOpen"), 'first dialog is closed');
ok(!d2.dialog("isOpen"), 'second dialog is closed');
d2.remove();
d1.remove();
// test without close function removing dialog triggered through the overlay
d1 = $('<div title="dialog 1">Dialog 1</div>').dialog({modal: true});
d2 = $('<div title="dialog 2">Dialog 2</div>').dialog({modal: true});
ok(d1.dialog("isOpen"), 'first dialog is open');
ok(d2.dialog("isOpen"), 'second dialog is open');
$( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
ok(d1.dialog("isOpen"), 'first dialog still open');
ok(!d2.dialog("isOpen"), 'second dialog is closed');
$( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE});
ok(!d1.dialog("isOpen"), 'first dialog is closed');
ok(!d2.dialog("isOpen"), 'second dialog is closed');
d2.remove(); d2.remove();
d1.remove(); d1.remove();
}); });

26
ui/jquery.ui.dialog.js vendored
View File

@ -713,21 +713,25 @@ $.extend( $.ui.dialog.overlay, {
} }
}, 1 ); }, 1 );
// allow closing by pressing the escape key
$( document ).bind( "keydown.dialog-overlay", function( event ) {
if ( dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE ) {
dialog.close( event );
event.preventDefault();
}
});
// handle window resize // handle window resize
$( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize ); $( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize );
} }
var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay" ) ); var $el = ( this.oldInstances.pop() || $( "<div>" ).addClass( "ui-widget-overlay" ) );
// allow closing by pressing the escape key
$( document ).bind( "keydown.dialog-overlay", function( event ) {
var instances = $.ui.dialog.overlay.instances;
// only react to the event if we're the top overlay
if ( instances.length !== 0 && instances[ instances.length - 1 ] === $el &&
dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE ) {
dialog.close( event );
event.preventDefault();
}
});
$el.appendTo( document.body ).css({ $el.appendTo( document.body ).css({
width: this.width(), width: this.width(),
height: this.height() height: this.height()