Skip to content
Permalink
Browse files
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
  • Loading branch information
jzaefferer committed Oct 2, 2013
1 parent 80b17bb commit e263ebda99f3d414bae91a4a47e74a37ff93ba9c
Showing 4 changed files with 94 additions and 5 deletions.
@@ -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 );

This comment has been minimized.

Copy link
@jzaefferer

jzaefferer Oct 2, 2013

Author Member

This fails in all IEs, where the value is sometimes 38, sometimes 40 or whatever it likes. I've now tried to set an explicit height on the dialog content, to make sure its bigger than the dialog and therefore scrollable enough, but that doesn't make any difference. Any ideas what's causing that?

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Oct 2, 2013

Member

That's odd. I'll try to dig into this.

This comment has been minimized.

Copy link
@jzaefferer

jzaefferer Oct 16, 2013

Author Member

Still on your list?

This comment has been minimized.

Copy link
@FutureKode

FutureKode Nov 8, 2013

Any update on a fix for this?

This comment has been minimized.

Copy link
@dekajp

dekajp Nov 10, 2013

Contributor

in MacOS Chrome-30v i get 47 and it fails. where as it works in FF-24v. but this fiddle http://jsfiddle.net/dekajp/8xEUH/ gives me right results in Chrome and FF

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Nov 14, 2013

Member

This is fixed with 144268a.


otherDialog.dialog( "moveToTop" );
equal( scrollDialog.scrollTop(), 50 );
});

test("open", function() {
@@ -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>
@@ -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>
@@ -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 );
}

3 comments on commit e263ebd

@tvdeyen
Copy link

@tvdeyen tvdeyen commented on e263ebd Oct 14, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ \o/ ❤️

@UrVerySpecial
Copy link

@UrVerySpecial UrVerySpecial commented on e263ebd Oct 18, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! This is a cause that I confused.

@scottgonzalez
Copy link
Member

@scottgonzalez scottgonzalez commented on e263ebd Jul 17, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This caused a regression: http://bugs.jqueryui.com/ticket/10138

Please sign in to comment.