Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Page: Implement classes option
Browse files Browse the repository at this point in the history 
Fixes gh-7707
Closes gh-8121
  • Loading branch information
Gabriel Schulhof committed Aug 4, 2015
1 parent bbe8cf1 commit 5fffe7b
Show file tree
Hide file tree
Showing 54 changed files with 2,763 additions and 2,216 deletions.
13 changes: 13 additions & 0 deletions build/tasks/options/jscs.js
View file
Expand Up @@ -13,6 +13,9 @@ module.exports = {
"js/widgets/forms/clearButton.js",
"js/widgets/forms/textinput.backcompat.js",
"js/widgets/forms/textinput.js",
"js/widgets/page.dialog.backcompat.js",
"js/widgets/page.dialog.js",
"js/widgets/page.js",
"js/widgets/accordion.js",
"js/widgets/widget.backcompat.js",
"js/widgets/widget.theme.js",
Expand Down Expand Up @@ -43,6 +46,16 @@ module.exports = {
// Tests
"tests/unit/textinput/settings.js",
"tests/unit/textinput/textinput_core.js",
"tests/integration/dialog/dialog_events.js",
"tests/integration/navigation/navigation_core.js",
"tests/integration/select/select_cached.js",
"tests/integration/select/select_core.js",
"tests/integration/page/page_enhance_within.js",
"tests/integration/page/page_theme.js",
"tests/integration/page/page_title_entity.js",
"tests/unit/dialog/dialog_count.js",
"tests/unit/init/init_dialog.js",
"tests/unit/pagecontainer/pagecontainer_core.js",
"tests/unit/degrade-inputs/degradeInputs.js",
"tests/unit/enhancer/enhancer.js",
"tests/integration/popup/popup_core.js",
Expand Down
14 changes: 7 additions & 7 deletions css/structure/jquery.mobile.dialog.css
View file
@@ -1,29 +1,29 @@
.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;
width: auto;
margin: 0;
}
.ui-dialog-contain > .ui-header {
.ui-page-dialog-contain > .ui-header {
overflow: hidden;
z-index: 10;
padding: 0;
border-top-width: 0;
}
.ui-dialog-contain > .ui-footer {
.ui-page-dialog-contain > .ui-footer {
z-index: 10;
padding: 0 1em;
border-bottom-width: 0;
Expand Down
6 changes: 3 additions & 3 deletions css/structure/jquery.mobile.forms.select.css
View file
Expand Up @@ -82,7 +82,7 @@
min-width: 11em;
}

.ui-selectmenu .ui-dialog-contain {
.ui-selectmenu .ui-page-dialog-contain {
overflow: hidden;
}

Expand All @@ -91,7 +91,7 @@
padding: 0;
border-width: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
.ui-selectmenu.ui-page-dialog .ui-header {
z-index: 1;
position: relative;
}
Expand All @@ -110,7 +110,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;
}
Expand Down
2 changes: 1 addition & 1 deletion css/structure/jquery.mobile.transition.flow.css
View file
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion demos/pages-dialog/dialog-buttons.html
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion demos/pages-dialog/dialog-noclosebtn.html
View file
Expand Up @@ -13,7 +13,7 @@
</head>
<body>

<div data-role="page" data-close-button="none" data-dialog="true">
<div data-role="page" data-close-btn="none" data-dialog="true">
<div data-role="header">
<h1>Dialog</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demos/pages-dialog/dialog-rightclosebtn.html
View file
Expand Up @@ -13,7 +13,7 @@
</head>
<body>

<div data-role="page" data-close-button="right" data-dialog="true">
<div data-role="page" data-close-btn="right" data-dialog="true">
<div data-role="header">
<h1>Dialog</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demos/pages-dialog/dialog-success.html
View file
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions demos/pages-dialog/index.php
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion demos/pages-multi-page/index.html
View file
Expand Up @@ -71,7 +71,7 @@ <h1>Dialog</h1>
<div role="main" class="ui-content">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
<p><a href="#one" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-inline">Back to page "one"</a><span class="ui-icon ui-icon-back"></span></p>
<p><a href="#one" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-inline">Back to page "one" <span class="ui-icon ui-icon-back"></span></a></p>
</div><!-- /content -->

<div data-role="footer">
Expand Down
6 changes: 3 additions & 3 deletions demos/selectmenu-custom-filter/index.php
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion js/index.php
View file
Expand Up @@ -27,6 +27,7 @@
'widgets/enhancer.widgetCrawler.js',
'widgets/page.js',
'widgets/page.dialog.js',
'widgets/page.dialog.backcompat.js',
'widgets/loader.js',

'events/navigate.js',
Expand All @@ -51,7 +52,6 @@
'transitions/visuals/turn.js',
'../external/jquery-ui/accordion.js',
'widgets/accordion.js',
'widgets/dialog.js',
'widgets/collapsible.js',
'widgets/addFirstLastClasses.js',
'widgets/collapsibleSet.js',
Expand Down
4 changes: 4 additions & 0 deletions js/init.js
View file
Expand Up @@ -22,6 +22,7 @@
"./helpers",
"./data",
"./support",
"./widgets/enhancer",
"./events/navigate",
"./navigation/path",
"./navigation/method",
Expand Down Expand Up @@ -95,6 +96,9 @@ $.extend( $.mobile, {
// define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
$.mobile.firstPage = $pages.first();

// Ensure the widget factory takes into account option values stored as data-attributes
$.enhance._installWidget();

// define page container
$.mobile.pageContainer = $.mobile.firstPage
.parent()
Expand Down
2 changes: 1 addition & 1 deletion js/jquery.mobile.js
View file
Expand Up @@ -26,7 +26,7 @@
"./navigation",
"./degradeInputs",
"./widgets/page.dialog",
"./widgets/dialog",
"./widgets/page.dialog.backcompat",
"./widgets/collapsible",
"./widgets/collapsibleSet",
"./grid",
Expand Down

0 comments on commit 5fffe7b

Please sign in to comment.