Page: Implement classes option

Fixes jquery-archivegh-7707

css/structure/jquery.mobile.dialog.css

@@ -1,30 +1,30 @@
-.ui-dialog {
+.ui-page-dialog {
 	 background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
 }
-.ui-dialog-contain {
+.ui-page-dialog-contain {
 	width: 92.5%;
 	max-width: 500px;
 	margin: 10% auto 1em auto;
 	padding: 0;
 	position: relative;
 	top: -1em;
 }
-.ui-dialog-contain > .ui-header, 
-.ui-dialog-contain > .ui-content, 
-.ui-dialog-contain > .ui-footer { 
+.ui-page-dialog-contain > .ui-header,
+.ui-page-dialog-contain > .ui-content,
+.ui-page-dialog-contain > .ui-footer {
 	display: block;
-	position: relative; 
+	position: relative;
 	width: auto;
 	margin: 0;
 }
-.ui-dialog-contain > .ui-header {
+.ui-page-dialog-contain > .ui-header {
 	overflow: hidden;
-	z-index: 10; 
+	z-index: 10;
 	padding: 0;
 	border-top-width: 0;
 }
-.ui-dialog-contain > .ui-footer {
-	z-index: 10; 
-	padding: 0 1em; 
+.ui-page-dialog-contain > .ui-footer {
+	z-index: 10;
+	padding: 0 1em;
 	border-bottom-width: 0;
 }

css/structure/jquery.mobile.forms.select.css

@@ -78,7 +78,7 @@
 	min-width: 11em;
 }
 
-.ui-selectmenu .ui-dialog-contain {
+.ui-selectmenu .ui-page-dialog-contain {
 	overflow: hidden;
 }
 
@@ -87,7 +87,7 @@
 	padding: 0;
 	border-width: 0;
 }
-.ui-selectmenu.ui-dialog .ui-header {
+.ui-selectmenu.ui-page-dialog .ui-header {
 	z-index: 1;
 	position: relative;
 }
@@ -105,7 +105,7 @@
 .ui-selectmenu .ui-header .ui-title {
 	margin: 0 2.875em;
 }
-.ui-selectmenu.ui-dialog .ui-content {
+.ui-selectmenu.ui-page-dialog .ui-content {
 	overflow: visible;
 	z-index: 1;
 }

css/structure/jquery.mobile.transition.flow.css

@@ -7,7 +7,7 @@
 	transform-origin: 50% 30%;	
 	box-shadow: 0 0 20px rgba(0,0,0,.4);
 }
-.ui-dialog.flow {
+.ui-page-dialog.flow {
 	-webkit-transform-origin: none;
 	-webkit-box-shadow: none;
 	-moz-transform-origin: none;	

demos/pages-dialog/dialog-buttons.html

@@ -11,7 +11,7 @@
 	<script src="../_assets/js/"></script>
 	<script src="../../js/"></script>
     <style>
-		.ui-dialog.dialog-actionsheet .ui-dialog-contain {
+		.ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
 			margin-top: 0;
 		}
 	</style>

demos/pages-dialog/dialog-success.html

@@ -11,7 +11,7 @@
 	<script src="../_assets/js/"></script>
 	<script src="../../js/"></script>
     <style>
-		.ui-dialog.dialog-actionsheet .ui-dialog-contain {
+		.ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
 			margin-top: 0;
 		}
 	</style>

demos/pages-dialog/index.php

@@ -12,7 +12,7 @@
 	<script src="../_assets/js/"></script>
 	<script src="../../js/"></script>
     <style>
-		.ui-dialog.dialog-actionsheet .ui-dialog-contain {
+		.ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
 			margin-top: 0;
 		}
 	</style>
@@ -87,14 +87,14 @@
 		<p>Dialogs appear to be floating above an overlay layer. This overlay adopts the swatch "a" content color by default, but the <code>data-overlay-theme</code> attribute can be added to the page wrapper to set the overlay to any swatch letter. Here is an example of a dialog with the overlay set to swatch "e":</p>
 				<a href="dialog-overlay.html" class="ui-shadow ui-button ui-corner-all ui-button-inline" data-transition="pop">Custom overlay swatch</a>
 
-		<p>Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of <code>my-dialog</code>, you could add this CSS to pin that dialog to the top: <code>.ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }</code>, or you could just apply that style to all dialogs with <code>.ui-dialog .ui-dialog-contain { margin-top: 0 }</code>.</p>
+		<p>Dialogs can also be used more like a control sheet to offer multiple buttons if you simply remove the top margin from the dialog's inner container element. For example, if your dialog page had a class of <code>my-dialog</code>, you could add this CSS to pin that dialog to the top: <code>.ui-page-dialog.my-dialog .ui-page-dialog-contain { margin-top: 0 }</code>, or you could just apply that style to all dialogs with <code>.ui-page-dialog .ui-page-dialog-contain { margin-top: 0 }</code>.</p>
 						<a href="dialog-buttons.html" class="ui-shadow ui-button ui-corner-all ui-button-inline" data-transition="slidedown">Share photos...</a>
 
 		<h2>Dialog width and margins</h2>
 		<p>For the sake of readability, dialogs have a default <code>width</code> of 92.5% and a <code>max-width</code> of 500 pixels. There is also a 10% top <code>margin</code> to give dialogs larger top margin on larger screens, but collapse to a small margin on smartphones. The dialog's inner container is shifted towards the <code>top</code> with 15px to hide the corner styling if a dialog is used as a control sheet (see above). To override these styles, add the following CSS override rule to your stylesheet and tweak as needed:</p>
 
 <pre><code>
-.ui-dialog-contain {
+.ui-page-dialog-contain {
 	<strong>width: 92.5%;</strong>
 	<strong>max-width: 500px;</strong>
 	<strong>margin: 10% auto 15px auto;</strong>

demos/selectmenu-custom-filter/index.php

@@ -115,18 +115,18 @@ function pageIsSelectmenuDialog( page ) {
 			margin-left: .5em;
 			margin-right: .5em;
 		}
-		.ui-selectmenu.ui-dialog .ui-content {
+		.ui-selectmenu.ui-page-dialog .ui-content {
 			padding-top: 0;
 		}
-		.ui-selectmenu.ui-dialog .ui-selectmenu-list {
+		.ui-selectmenu.ui-page-dialog .ui-selectmenu-list {
 			margin-top: 0;
 		}
 		.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-button {
 			border-top-width: 1px;
 			-webkit-border-radius: 0;
 			border-radius: 0;
 		}
-		.ui-selectmenu.ui-dialog .ui-header {
+		.ui-selectmenu.ui-page-dialog .ui-header {
 			border-bottom-width: 1px;
 		}
 	</style>

js/index.php

@@ -23,6 +23,7 @@
 	'animationComplete.js',
 	'widgets/page.js',
 	'widgets/page.dialog.js',
+	'widgets/page.dialog.backcompat.js',
 	'widgets/loader.js',
 	'events/navigate.js',
 	'navigation/path.js',

js/jquery.mobile.js

@@ -27,6 +27,7 @@
 			"./navigation",
 			"./degradeInputs",
 			"./widgets/page.dialog",
+			"./widgets/page.dialog.backcompat",
 			"./widgets/dialog",
 			"./widgets/collapsible",
 			"./widgets/collapsibleSet",

js/widgets/dialog.js

@@ -80,12 +80,12 @@ return $.widget( "mobile.dialog", {
 			opts = this.options;
 
 		// Class the markup for dialog styling and wrap interior
-		elem.addClass( "ui-dialog" )
+		elem.addClass( "ui-page-dialog" )
 			.wrapInner( $( "<div/>", {
 
 				// ARIA role
 				"role": "dialog",
-				"class": "ui-dialog-contain ui-overlay-shadow" +
+				"class": "ui-page-dialog-contain ui-overlay-shadow" +
 					( !!opts.corners ? " ui-corner-all" : "" )
 			} ) );
 

js/widgets/forms/select.custom.js

@@ -235,7 +235,7 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			"<div data-" + $.mobile.ns + "role='header'>" +
 			"<div class='ui-title'></div>" +
 			"</div>" +
-			"<div data-" + $.mobile.ns + "role='content'></div>" +
+			"<div class='ui-content'></div>" +
 			"</div>" )
 			.attr( "id", dialogId );
 		listbox = $( "<div" + themeAttr + overlayThemeAttr +

js/widgets/page.dialog.backcompat.js

@@ -0,0 +1,41 @@
+/*!
+ * jQuery Mobile Page Styled As Dialog Backcompat @VERSION
+ * http://jquerymobile.com
+ *
+ * Copyright jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+//>>label: Dialog styling backcompat
+//>>group: Widgets
+//>>description: Style options for page styled as dialog
+
+( function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define( [
+			"jquery",
+			"./widget.backcompat",
+			"./page.dialog" ], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+} )( function( $ ) {
+
+if ( $.mobileBackcompat !== false ) {
+	$.widget( "mobile.page", $.mobile.page, {
+		options: {
+			corners: true
+		},
+		classProp: "ui-page-dialog-contain"
+	} );
+	$.widget( "mobile.page", $.mobile.page, $.mobile.widget.backcompat );
+}
+
+return $.mobile.page;
+
+} );