library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dialog: Switch back to shuffling z-index, but only look at .ui-front siblings.

Browse Source 
Fixes #9166 - Dialog: moveToTop implementation resets flash/video/iframe/scroll
Fixes #9364 - Dialog: Click of element with tooltip scrolls the dialog to the top
This commit is contained in:
Jörn Zaefferer 2013-09-27 18:53:15 +02:00
parent 80b17bb40a
commit e263ebda99
4 changed files with 94 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
tests/unit/dialog/dialog_methods.js
View File

@ -144,8 +144,8 @@ test("moveToTop", function() {
expect( 5 );
function order() {
var actual = $( ".ui-dialog" ).map(function() {
return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" );
}).get().reverse();
return +$( this ).css( "z-index" );
}).get();
deepEqual( actual, $.makeArray( arguments ) );
}
var dialog1, dialog2,
@ -161,10 +161,23 @@ test("moveToTop", function() {
equal( focusOn, "dialog2" );
}
});
order( 2, 1 );
order( 100, 101 );
focusOn = "dialog1";
dialog1.dialog( "moveToTop" );
order( 1, 2 );
order( 102, 101 );
});
test( "moveToTop: content scroll stays intact", function() {
expect( 2 );
var otherDialog = $( "#dialog1" ).dialog(),
scrollDialog = $( "#form-dialog" ).dialog({
height: 200
});
scrollDialog.scrollTop( 50 );
equal( scrollDialog.scrollTop(), 50 );
otherDialog.dialog( "moveToTop" );
equal( scrollDialog.scrollTop(), 50 );
});
test("open", function() {

62
tests/visual/dialog/stacking.html Normal file
View File

@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Visual Test</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.10.2.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
<script src="../../../ui/jquery.ui.mouse.js"></script>
<script src="../../../ui/jquery.ui.draggable.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.resizable.js"></script>
<script src="../../../ui/jquery.ui.button.js"></script>
<script src="../../../ui/jquery.ui.dialog.js"></script>
<style>
body {
font-size: 62.5%;
}
</style>
<script>
$(function() {
var iframeDialog = $( "#dialog-iframe" ).dialog({
position: {
my: "right-90 center"
},
height: 400
}),
scrollingDialog = $( "#dialog-scrolling" ).dialog({
maxHeight: 200,
position: {
my: "left+90 center"
}
}),
otherDialog = $( "#dialog-other" ).dialog({
width: 200,
height: 150
});
});
</script>
</head>
<body>
<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p>
<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p>
<div id="dialog-iframe" title="Dialog that embeds an iframe">
<iframe src="animated.html" height="400"></iframe>
</div>
<div id="dialog-scrolling" title="Dialog with scroll">
<p style="height:600px;background:#eee">a bunch of content</p>
</div>
<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div>
</body>
</html>

4
tests/visual/index.html
View File

@ -33,7 +33,11 @@
<h2>Dialog</h2>
<ul>
<li><a href="dialog/animated.html">Animations</a></li>
<li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li>
<li><a href="dialog/form.html">Forms in dialogs</a></li>
<li><a href="dialog/performance.html">Performance</a></li>
<li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
</ul>
<h2>Effects</h2>

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

@ -212,7 +212,17 @@ $.widget( "ui.dialog", {
},
_moveToTop: function( event, silent ) {
var moved = !!this.uiDialog.nextAll(":visible").insertBefore( this.uiDialog ).length;
var moved = false,
zIndicies = this.uiDialog.siblings( ".ui-front:visible" ).map(function() {
return +$( this ).css( "z-index" );
}).get(),
zIndexMax = Math.max.apply( null, zIndicies );
if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
this.uiDialog.css( "z-index", zIndexMax + 1 );
moved = true;
}
if ( moved && !silent ) {
this._trigger( "focus", event );
}