]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 80b17bb)
Dialog: Switch back to shuffling z-index, but only look at .ui-front siblings. 1090/head
authorJörn Zaefferer <joern.zaefferer@gmail.com>
Fri, 27 Sep 2013 16:53:15 +0000 (18:53 +0200)
committerJörn Zaefferer <joern.zaefferer@gmail.com>
Wed, 2 Oct 2013 15:02:28 +0000 (17:02 +0200)
Fixes #9166 - Dialog: moveToTop implementation resets flash/video/iframe/scroll
Fixes #9364 - Dialog: Click of element with tooltip scrolls the dialog to the top

tests/unit/dialog/dialog_methods.js patch | blob | history
tests/visual/dialog/stacking.html [new file with mode: 0644] patch | blob
tests/visual/index.html patch | blob | history
ui/jquery.ui.dialog.js patch | blob | history

diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js
index 60a7aa4d8aa3597dcd8be52c96ebde318f9badf0..8918e8d36f0a66ea5e2f27e62862b6ee92313428 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..dcb7de2
--- /dev/null
+++ 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
index 730eb4553a162b8dab888d8ef607fdaf8ec9c0bd..bb46137f4217754decbf6637c295cbd5a44969a0 100644 (file)
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -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>
diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
index f7265e605198cf18d2f08afaccd3656b2cfbd9ab..0669cd852674305a25024fe1bf470ed7bb38abd9 100644 (file)
--- 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 );
                }
The official jQuery user interface library: https://github.com/jquery/jquery-ui