Panel: Panel classes set on wrong page

Closes jquery-archivegh-6920
Fixes jquery-archivegh-6650

Author: frequent

js/widgets/panel.js

@@ -50,6 +50,7 @@ $.widget( "mobile.panel", {
 		$.extend( this, {
 			_closeLink: el.find( ":jqmData(rel='close')" ),
 			_parentPage: ( parentPage.length > 0 ) ? parentPage : false,
+			_openedPage: null,
 			_page: this._getPage,
 			_panelInner: this._getPanelInner(),
 			_fixedToolbars: this._getFixedToolbars
@@ -98,7 +99,7 @@ $.widget( "mobile.panel", {
 	},
 
 	_getPage: function() {
-		var page = this._parentPage ? this._parentPage : $( "." + $.mobile.activePageClass );
+		var page = this._openedPage || this._parentPage || $( "." + $.mobile.activePageClass );
 
 		return page;
 	},
@@ -357,6 +358,8 @@ $.widget( "mobile.panel", {
 					self._bindFixListener();
 
 					self._trigger( "open" );
+
+					self._openedPage = self._page();
 				};
 
 			self._trigger( "beforeopen" );
@@ -422,6 +425,8 @@ $.widget( "mobile.panel", {
 					self._page().jqmRemoveData( "panel" );
 
 					self._trigger( "close" );
+
+					self._openedPage = null;
 				};
 
 			self._trigger( "beforeclose" );

tests/unit/panel/index.html

@@ -98,9 +98,25 @@ <h1 id="demo-links">Panels</h1>
 			<a href="#panel-test-non-default-theme">Open Panel</a>
 			<a href="#panel-test-with-close">Open Panel</a>
 			<a href="#panel-test-id-change">Open Panel</a>
+			<a href="#panel-test-external">Open Panel</a>
 		</div>
 	</div>
 	<div data-nstest-role="page" id="page2"></div>
-	<div id="external-panel-test"></div>
+	<div id="external-panel-getWrapper-test"></div>
+
+	<div data-nstest-role="page" id="multipage">
+		<div data-nstest-role="header">
+			<h1>Multipage</h1>
+		</div>
+		<div data-nstest-role="content">
+			<p>Contents of a page.</p>
+		</div>
+	</div>
+
+	<div data-nstest-role="panel" id="panel-test-external">
+		<a href="#multipage">Multipage</a>
+		<a href="#" data-nstest-rel="back">Back</a>
+	</div>
+
 </body>
 </html>

tests/unit/panel/panel_core.js

@@ -450,7 +450,7 @@
 	});
 	asyncTest( "external panel should call panel once on create and on page changes", function(){
 		expect( 5 );
-		var testPanel = $( "#external-panel-test" );
+		var testPanel = $( "#external-panel-getWrapper-test" );
 
 		testPanel.panel();
 		ok( count === 1, "getWrapper only called once durring create" );
@@ -478,4 +478,65 @@
 		});
 	});
 
+	asyncTest( "external panel: test classes during A>B>A transition", function() {
+		expect( 16 );
+
+		var $panel = $( "#panel-test-external" ).panel(),
+			$firstPage = $( ":jqmData(role='page')" ).first(),
+			$secondPage = $( ":jqmData(role='page')" ).last(),
+			$openButton = $firstPage.find( "a[href='\\#panel-test-external']" ),
+			$link = $panel.find( "a[href='\\#multipage']" ),
+			$back = $panel.find( "a[data-nstest-rel='back']" );
+
+		$panel.one( "panelopen", function( event ) {
+
+			ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" );
+			ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" );
+			ok( $firstPage.data("nstestPanel") === "open", "open flag set on first page" );
+			equal( $firstPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." );
+
+			$link.trigger( "click" );
+
+		}).one( "panelclose", function( event ) {
+
+			ok( $panel.hasClass( defaults.classes.panelClosed ), "closed class removed" );
+			ok( !$panel.hasClass( defaults.classes.panelOpen ), "open class added" );
+			ok( $firstPage.data("nstestPanel") === undefined, "no open flag on first" );
+
+			$panel.trigger( "continue" );
+
+		}).one( "continue", function( event ) {
+
+			setTimeout(function() {
+				$panel.panel( "open" );
+
+				ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" );
+				ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" );
+				ok( $secondPage.data("nstestPanel") === "open", "open flag set on 2nd page" );
+				equal( $secondPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." );
+
+				$back.trigger( "click" );
+
+			},500);
+
+		}).panel( "open" );
+
+		$back.one( "click", function( event ) {
+
+			ok( $firstPage.data("nstestPanel") === undefined,
+				"no open flag on first page on backwards transition" );
+			equal( $firstPage.find(".ui-panel-wrapper").length, 1, "wrapper exists." );
+
+			setTimeout(function() {
+				$panel.panel( "open" );
+
+				ok( $firstPage.data("nstestPanel") === "open", "open flag set on first page" );
+				ok( !$panel.hasClass( defaults.classes.panelClosed ), "closed class removed" );
+				ok( $panel.hasClass( defaults.classes.panelOpen ), "open class added" );
+
+				start();
+			},500);
+		});
+	});
+
 }( jQuery ));