Permalink
Browse files

Panel: Invalidate _openedPage upon pageshow before recomputing wrapper

(cherry picked from commit fecdc49)

Closes gh-7799
Fixes gh-7711
  • Loading branch information...
1 parent aa930a6 commit 7aa51ab86848e603a57281e0a869ffac92019821 @gabrielschulhof gabrielschulhof committed Oct 24, 2014
View
@@ -269,7 +269,10 @@ $.widget( "mobile.panel", {
});
if ( !this._parentPage && this.options.display !== "overlay" ) {
this._on( this.document, {
- "pageshow": "_getWrapper"
+ "pageshow": function() {
+ this._openedPage = null;
+ this._getWrapper();
+ }
});
}
// Clean up open panels after page hide
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Panel Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../../js/requirejs.config.js"></script>
+ <script src="../../../js/jquery.tag.inserter.js"></script>
+ <script src="../../jquery.setNameSpace.js"></script>
+ <script src="../../../tests/jquery.testHelper.js"></script>
+
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
+ <link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+ <link rel="stylesheet" href="../../jqm-tests.css"/>
+ <script src="../../../external/qunit/qunit.js"></script>
+ <script>
+ $.testHelper.asyncLoad([
+ [ "widgets/page" ],
+ [ "widgets/panel" ],
+ [ "init" ],
+ [ "external_panel_wrapper_update_core.js" ]
+ ]);
+ </script>
+
+ <script src="../../swarminject.js"></script>
+</head>
+<body>
+ <div id="qunit"></div>
+
+ <div data-nstest-role="panel" id="wrapper-test-panel" data-nstest-display="reveal">
+ <p>The panel</p>
+ <a href="#other-page" id="go-to-other-page" data-nstest-transition="none">Go to other page</a>
+ </div>
+
+ <div data-nstest-role="page">
+ <div class="ui-content">
+ <p>Start page</p>
+ </div>
+ </div>
+
+ <div data-nstest-role="page" id="other-page">
+ <div class="ui-content">
+ <p>Other page</p>
+ </div>
+ </div>
+</body>
@@ -0,0 +1,46 @@
+var panel = $( "#wrapper-test-panel" ).panel();
+
+asyncTest( "External panel updates wrapper correctly", function() {
+ var otherPageChildren,
+ otherPage = $( "#other-page" ),
+ otherPageLink = $( "#go-to-other-page" );
+
+ expect( 5 );
+
+ $.testHelper.detailedEventCascade([
+ function() {
+ panel.panel( "open" );
+ },
+ {
+ panelopen: { src: panel, event: "panelopen.externalPanelUpdatesWrapperCorrectly1" }
+ },
+ function( result ) {
+ deepEqual( result.panelopen.timedOut, false, "Panel did open" );
+ otherPageLink.click();
+ },
+ {
+ panelclose: { src: panel, event: "panelclose.externalPanelUpdatesWrapperCorrectly2" },
+ pagecontainerchange: {
+ src: $( window ),
+ event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2"
+ }
+ },
+ function( result ) {
+ otherPageChildren = otherPage.children();
+ deepEqual( result.panelclose.timedOut, false, "Panel did close upon link click" );
+ deepEqual( result.pagecontainerchange.timedOut, false,
+ "pagecontainerchange event received" );
+ deepEqual( otherPageChildren.length, 1, "Other page has exactly one child" );
+ deepEqual( otherPageChildren.hasClass( "ui-panel-wrapper" ), true,
+ "Other page child has class 'ui-panel-wrapper'" );
+ $.mobile.back();
+ },
+ {
+ pagecontainerchange: {
+ src: $( window ),
+ event: "pagecontainerchange.externalPanelUpdatesWrapperCorrectly2"
+ }
+ },
+ start
+ ]);
+});

1 comment on commit 7aa51ab

@77hzdotcn

This fix has solved the issue described as https://github.com/jquery/jquery-mobile/issues/7711,but I find a new problem that also produced when 'defaultPageTransition' is none.
See the demo:http://jsbin.com/gitepedira/1/edit
You can reproduce this problem as the following steps:
1.On the default page 'Cat' page,click the left bars icon.Then the external panel will show.
image

2.Click 'Dog' link, then the 'Dog' page will show.
image

3.On the Dog page, click the right 'home icon', and the 'Cat' page will show.
image
image

4.Click the left bars icon, external panel won't appear correctly.
image

5.Click the left bars icon again, the external panel will appear.
image

6.The panel cann't be closed by clicking outside onto the page.
image

I have tested this problem on Chrome 、Firefox and Safari。

Please sign in to comment.