Skip to content

Commit e263ebd

Browse files
jzaeffererjzaefferer
committed
Dialog: Switch back to shuffling z-index, but only look at .ui-front siblings.
Fixes #9166 - Dialog: moveToTop implementation resets flash/video/iframe/scroll Fixes #9364 - Dialog: Click of element with tooltip scrolls the dialog to the top
1 parent 80b17bb commit e263ebd

File tree

4 files changed

+94
-5
lines changed

4 files changed

+94
-5
lines changed

‎tests/unit/dialog/dialog_methods.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ test("moveToTop", function() {
144144
expect( 5 );
145145
function order() {
146146
var actual = $( ".ui-dialog" ).map(function() {
147-
return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" );
148-
}).get().reverse();
147+
return +$( this ).css( "z-index" );
148+
}).get();
149149
deepEqual( actual, $.makeArray( arguments ) );
150150
}
151151
var dialog1, dialog2,
@@ -161,10 +161,23 @@ test("moveToTop", function() {
161161
equal( focusOn, "dialog2" );
162162
}
163163
});
164-
order( 2, 1 );
164+
order( 100, 101 );
165165
focusOn = "dialog1";
166166
dialog1.dialog( "moveToTop" );
167-
order( 1, 2 );
167+
order( 102, 101 );
168+
});
169+
170+
test( "moveToTop: content scroll stays intact", function() {
171+
expect( 2 );
172+
var otherDialog = $( "#dialog1" ).dialog(),
173+
scrollDialog = $( "#form-dialog" ).dialog({
174+
height: 200
175+
});
176+
scrollDialog.scrollTop( 50 );
177+
equal( scrollDialog.scrollTop(), 50 );
178+
179+
otherDialog.dialog( "moveToTop" );
180+
equal( scrollDialog.scrollTop(), 50 );
168181
});
169182

170183
test("open", function() {

‎tests/visual/dialog/stacking.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Dialog Visual Test</title>
6+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
7+
<script src="../../../jquery-1.10.2.js"></script>
8+
<script src="../../../ui/jquery.ui.core.js"></script>
9+
<script src="../../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../../ui/jquery.ui.draggable.js"></script>
12+
<script src="../../../ui/jquery.ui.position.js"></script>
13+
<script src="../../../ui/jquery.ui.resizable.js"></script>
14+
<script src="../../../ui/jquery.ui.button.js"></script>
15+
<script src="../../../ui/jquery.ui.dialog.js"></script>
16+
17+
<style>
18+
body {
19+
font-size: 62.5%;
20+
}
21+
</style>
22+
<script>
23+
$(function() {
24+
var iframeDialog = $( "#dialog-iframe" ).dialog({
25+
position: {
26+
my: "right-90 center"
27+
},
28+
height: 400
29+
}),
30+
31+
scrollingDialog = $( "#dialog-scrolling" ).dialog({
32+
maxHeight: 200,
33+
position: {
34+
my: "left+90 center"
35+
}
36+
}),
37+
38+
otherDialog = $( "#dialog-other" ).dialog({
39+
width: 200,
40+
height: 150
41+
});
42+
});
43+
</script>
44+
</head>
45+
<body>
46+
47+
<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p>
48+
<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>
49+
50+
51+
<div id="dialog-iframe" title="Dialog that embeds an iframe">
52+
<iframe src="animated.html" height="400"></iframe>
53+
</div>
54+
55+
<div id="dialog-scrolling" title="Dialog with scroll">
56+
<p style="height:600px;background:#eee">a bunch of content</p>
57+
</div>
58+
59+
<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div>
60+
61+
</body>
62+
</html>

‎tests/visual/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ <h2>Button</h2>
3333

3434
<h2>Dialog</h2>
3535
<ul>
36+
<li><a href="dialog/animated.html">Animations</a></li>
37+
<li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li>
38+
<li><a href="dialog/form.html">Forms in dialogs</a></li>
3639
<li><a href="dialog/performance.html">Performance</a></li>
40+
<li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
3741
</ul>
3842

3943
<h2>Effects</h2>

‎ui/jquery.ui.dialog.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,17 @@ $.widget( "ui.dialog", {
212212
},
213213

214214
_moveToTop: function( event, silent ) {
215-
var moved = !!this.uiDialog.nextAll(":visible").insertBefore( this.uiDialog ).length;
215+
var moved = false,
216+
zIndicies = this.uiDialog.siblings( ".ui-front:visible" ).map(function() {
217+
return +$( this ).css( "z-index" );
218+
}).get(),
219+
zIndexMax = Math.max.apply( null, zIndicies );
220+
221+
if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
222+
this.uiDialog.css( "z-index", zIndexMax + 1 );
223+
moved = true;
224+
}
225+
216226
if ( moved && !silent ) {
217227
this._trigger( "focus", event );
218228
}

0 commit comments

Comments
 (0)