Permalink
Browse files

Panel: Stretch external panel to document height

Fixes gh-7983
Closes gh-7988
  • Loading branch information...
gabrielschulhof committed Apr 5, 2015
1 parent 3572a65 commit f911c5311705332961d4ed0b6c867858a528c368
View
@@ -161,14 +161,24 @@ $.widget( "mobile.panel", {
},
_positionPanel: function( scrollToTop ) {
var self = this,
var heightWithMargins, heightWithoutMargins,
self = this,
panelInnerHeight = self._panelInner.outerHeight(),
expand = panelInnerHeight > $.mobile.getScreenHeight();
if ( expand || !self.options.positionFixed ) {
if ( expand ) {
self._unfixPanel();
$.mobile.resetActivePageHeight( panelInnerHeight );
} else if ( !this._parentPage ) {
heightWithMargins = this.element.outerHeight( true );
if ( heightWithMargins < this.document.height() ) {
heightWithoutMargins = this.element.outerHeight();
// Set the panel's total height (including margins) to the document height
this.element.outerHeight( this.document.height() -
( heightWithMargins - heightWithoutMargins ) );
}
}
if ( scrollToTop === true ) {
this.window[ 0 ].scrollTo( 0, $.mobile.defaultHomeScroll );
@@ -34,6 +34,10 @@
<a href="#other-page" id="go-to-other-page" data-nstest-transition="none">Go to other page</a>
</div>
<div data-nstest-role="panel" id="panel-stretch-test" data-nstest-display="overlay">
<p>Panel stretch test</p>
</div>
<div data-nstest-role="page" id="start-page">
<div class="ui-content">
<p>Start page</p>
@@ -45,4 +49,7 @@
<p>Other page</p>
</div>
</div>
<div data-nstest-role="page" id="panel-stretch-page">
<div class="ui-content"></div>
</div>
</body>
@@ -1,4 +1,5 @@
var panel = $( "#wrapper-test-panel" ).panel();
var panel = $( "#wrapper-test-panel" ).panel(),
stretchTestPanel = $( "#panel-stretch-test" ).panel();
asyncTest( "External panel updates wrapper correctly", function() {
var otherPageChildren,
@@ -49,3 +50,53 @@ asyncTest( "External panel updates wrapper correctly", function() {
start
]);
});
asyncTest( "External panel stretches to acommodate page height", function( assert ) {
expect( 4 );
var eventNs = ".externalPanelStretches";
$.testHelper.detailedEventCascade( [
function() {
$( "body" ).pagecontainer( "change", "#panel-stretch-page" );
},
{
pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "1" }
},
function( result ) {
assert.deepEqual( result.pagecontainerchange.timedOut, false,
"Successfully changed to page '#panel-stretch-page'" );
// Make the page scroll
$( "#panel-stretch-page .ui-content" ).height( $.mobile.getScreenHeight() * 3 );
stretchTestPanel.panel( "open" );
},
{
panelopen: { src: stretchTestPanel, event: "panelopen" + eventNs + "2" }
},
function( result ) {
// Making assertions about the document height has to happen immediately after the
// operation that modifies the document height takes place, because the act of
// recording the assertion itself may modify the document height, because QUnit will
// insert new DOM elements to visually record the assertion, and the addition of such
// DOM elements may affect the document height.
assert.deepEqual( stretchTestPanel.outerHeight( true ), $( document ).height(),
"Panel is as tall as the document" );
assert.deepEqual( result.panelopen.timedOut, false, "Panel opened successfully" );
stretchTestPanel.panel( "close" );
},
{
panelclose: { src: stretchTestPanel, event: "panelclose" + eventNs + "3" }
},
function( result ) {
assert.deepEqual( result.panelclose.timedOut, false, "Panel closedsuccessfully" );
$.mobile.back();
},
{
pagecontainerchange: { src: $( window ), event: "pagecontainerchange" + eventNs + "4" }
},
start
] );
} );

0 comments on commit f911c53

Please sign in to comment.