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
jquery · Oct 2, 2013 · e263ebda99f3d414bae91a4a47e74a37ff93ba9c · jzaefferer · Oct 2, 2013 · scottgonzalez
1 parent 80b17bb
commit e263ebda99f3d414bae91a4a47e74a37ff93ba9c
Unified Split

Showing with 94 additions and 5 deletions.

+17 −4 tests/unit/dialog/dialog_methods.js

+62 −0 tests/visual/dialog/stacking.html

+4 −0 tests/visual/index.html

+11 −1 ui/jquery.ui.dialog.js
diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js
@@ -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() {

diff --git a/tests/visual/dialog/stacking.html b/tests/visual/dialog/stacking.html
@@ -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>
diff --git a/tests/visual/index.html b/tests/visual/index.html
@@ -33,7 +33,11 @@ <h2>Button</h2>
 
 		<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>

diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
@@ -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 );
 		}