Pagecontainer: Correctly identify the current page as a dialog

(cherry picked from commit ba428b0) Closes gh-7541 Fixes gh-7538
jquery-archive · Jul 30, 2014 · 445ff20 · 445ff20
1 parent 8ba83c0
commit 445ff20
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 4 deletions.
diff --git a/js/widgets/pagecontainer.js b/js/widgets/pagecontainer.js
@@ -256,7 +256,10 @@ define( [
 
 			// If current active page is not a dialog skip the dialog and continue
 			// in the same direction
-			if ( activeContent && !activeContent.hasClass( "ui-dialog" ) ) {
+			// Note: The dialog widget is deprecated as of 1.4.0 and will be removed in 1.5.0.
+			// Thus, as of 1.5.0 activeContent.data( "mobile-dialog" ) will always evaluate to
+			// falsy, so the second condition in the if-statement below can be removed altogether.
+			if ( activeContent && !activeContent.data( "mobile-dialog" ) ) {
 				// determine if we're heading forward or backward and continue
 				// accordingly past the current dialog
 				if ( data.direction === "back" ) {

diff --git a/tests/integration/navigation/sequence/another-page.html b/tests/integration/navigation/sequence/another-page.html
@@ -5,7 +5,12 @@
 </head>
 <body>
 
-<div data-nstest-role="page" id="anotherPage"></div>
+<div data-nstest-role="page" id="anotherPage">
+	<a href="#popupOnAnotherPage" id="openPopupOnAnotherPage" data-nstest-rel="popup">Open popup</a>
+	<div id="popupOnAnotherPage" data-nstest-role="popup">
+		<a href="page-styled-as-dialog.html" id="openPageStyledAsDialog">Page styled as dialog</a>
+	</div>
+</div>
 
 </body>
 </html>
diff --git a/tests/integration/navigation/sequence/index.html b/tests/integration/navigation/sequence/index.html
@@ -21,7 +21,7 @@
 		$.testHelper.asyncLoad([
 			[
 				"widgets/dialog",
-				"widgets/page",
+				"widgets/page.dialog",
 				"widgets/popup"
 			],
 			[ "jquery.mobile.init" ],

diff --git a/tests/integration/navigation/sequence/page-styled-as-dialog.html b/tests/integration/navigation/sequence/page-styled-as-dialog.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+	<title>Page styled as a dialog</title>
+</head>
+<body>
+	<div id="pageStyledAsDialog" data-nstest-role="page" data-nstest-dialog="true">
+		<div data-nstest-role="header">
+			<h2>Page styled as a dialog</h2>
+		</div>
+		<div class="ui-content">
+			<p>Content</p>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/tests/integration/navigation/sequence/sequence_core.js b/tests/integration/navigation/sequence/sequence_core.js
@@ -545,4 +545,65 @@
 		], eventNs );
 	});
 
+	asyncTest( "Sequence page1 -> page2 -> popup -> page-styled-as-dialog <- back", function() {
+		var eventNs = ".page1Page2PopupDialogPageBack";
+
+		expect();
+
+		maybeWaitForStartPage([
+			function() {
+				$( "#openAnotherPage" ).click();
+			},
+			{
+				pagecontainerchange: {
+					src: $.mobile.pageContainer,
+					event: "pagecontainerchange" + eventNs + "1"
+				}
+			},
+			function() {
+				deepEqual( $.mobile.activePage.attr( "id" ), "anotherPage",
+					"Landed on another page" );
+				$( "#openPopupOnAnotherPage" ).click();
+			},
+			{
+				popupafteropen: {
+					src: function() { return $( "#popupOnAnotherPage" ); },
+					event: "popupafteropen" + eventNs + "2"
+				}
+			},
+			function() {
+				$( "#openPageStyledAsDialog" ).click();
+			},
+			{
+				pagecontainerchange: {
+					src: $.mobile.pageContainer,
+					event: "pagecontainerchange" + eventNs + "3"
+				}
+			},
+			function() {
+				deepEqual( $.mobile.activePage.attr( "id" ), "pageStyledAsDialog",
+					"Landed on page styled as dialog" );
+				$.mobile.back();
+			},
+			{
+				pagecontainerchange: {
+					src: $.mobile.pageContainer,
+					event: "pagecontainerchange" + eventNs + "4"
+				}
+			},
+			function() {
+				deepEqual( $.mobile.activePage.attr( "id" ), "anotherPage",
+					"Navigating back() from the page styled as a dialog reaches another page" );
+				$.mobile.back();
+			},
+			{
+				pagecontainerchange: {
+					src: $.mobile.pageContainer,
+					event: "pagecontainerchange" + eventNs + "4"
+				}
+			},
+			start
+		], eventNs );
+	});
+
 })( jQuery );
diff --git a/tests/unit/content/content_core.js b/tests/unit/content/content_core.js
@@ -120,7 +120,7 @@
 		var result, opts = {};
 
 		proto.getActivePage = function() {
-			return $( "<div>", {"class": "ui-dialog"} );
+			return $( "<div>" ).data( "mobile-dialog", true );
 		};
 
 		proto._getHistory = function() {

diff --git a/tests/unit/pagecontainer/pagecontainer_core.js b/tests/unit/pagecontainer/pagecontainer_core.js
@@ -26,4 +26,26 @@ test( "load does not trigger an error when called withput a second param", funct
 	ok( "no error triggered when load method called without options" );
 });
 
+module( "_handleDialog()" );
+
+test( "A dialog is recognized via presence of the data key, not the ui-dialog class", function() {
+	var getActiveHistoryCalled = false;
+
+	deepEqual( $.mobile.pagecontainer.prototype._handleDialog.call({
+			getActivePage: function() {
+				return $( "<div class='ui-dialog'></div>" );
+			},
+			_getActiveHistory: function() {
+				getActiveHistoryCalled = true;
+				return {};
+			},
+			back: $.noop,
+			forward: $.noop,
+		}, {}, {
+			pageUrl: "xyzzy.html"
+		}), false, "page is recognized as page even when the ui-dialog class is present" );
+
+	deepEqual( getActiveHistoryCalled, false, "_getActiveHistory() should not have been called" );
+});
+
 })();