Permalink
Browse files

Page: Implement classes option

Fixes gh-7707
Closes gh-8121
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Apr 15, 2015
1 parent ba989f8 commit 5d111f56ccbe5674f22d4b1929037a0b3a5eb497
Showing with 2,763 additions and 2,216 deletions.
  1. +13 −0 build/tasks/options/jscs.js
  2. +7 −7 css/structure/jquery.mobile.dialog.css
  3. +3 −3 css/structure/jquery.mobile.forms.select.css
  4. +1 −1 css/structure/jquery.mobile.transition.flow.css
  5. +1 −1 demos/pages-dialog/dialog-buttons.html
  6. +1 −1 demos/pages-dialog/dialog-noclosebtn.html
  7. +1 −1 demos/pages-dialog/dialog-rightclosebtn.html
  8. +1 −1 demos/pages-dialog/dialog-success.html
  9. +3 −3 demos/pages-dialog/index.php
  10. +1 −1 demos/pages-multi-page/index.html
  11. +3 −3 demos/selectmenu-custom-filter/index.php
  12. +1 −1 js/index.php
  13. +4 −0 js/init.js
  14. +1 −1 js/jquery.mobile.js
  15. +0 −187 js/widgets/dialog.js
  16. +30 −30 js/widgets/forms/select.custom.js
  17. +58 −0 js/widgets/page.dialog.backcompat.js
  18. +136 −52 js/widgets/page.dialog.js
  19. +37 −61 js/widgets/page.js
  20. +175 −172 js/widgets/pagecontainer.js
  21. +1 −1 js/widgets/popup.js
  22. +148 −0 tests/integration/dialog-extension/backcompat-tests.html
  23. +123 −0 tests/integration/dialog-extension/backcompat_core.js
  24. +167 −74 tests/integration/dialog-extension/dialog_events.js
  25. +44 −18 tests/integration/dialog-extension/index.html
  26. +7 −12 tests/integration/dialog-extension/no-hash-tests.html
  27. +92 −127 tests/integration/dialog/dialog_events.js
  28. +16 −20 tests/integration/dialog/index.html
  29. +7 −12 tests/integration/dialog/no-hash-tests.html
  30. +3 −3 tests/integration/navigation/index.html
  31. +23 −20 tests/integration/navigation/navigation_base.js
  32. +1,055 −895 tests/integration/navigation/navigation_core.js
  33. +1 −1 tests/integration/navigation/prefetched-dialog.html
  34. +4 −8 tests/integration/navigation/sequence/index.html
  35. +4 −8 tests/integration/navigation/sequence/sequence-redirect.html
  36. +11 −9 tests/integration/page/index.html
  37. +24 −20 tests/integration/page/page_enhance_within.js
  38. +36 −0 tests/integration/page/page_theme.js
  39. +10 −7 tests/integration/page/page_title_entity.js
  40. +17 −21 tests/integration/pagecontainer/page_event_sequence_core.js
  41. +4 −8 tests/integration/pagecontainer/transition-choice-dialog-tests.html
  42. +1 −1 tests/integration/popup/index.html
  43. +5 −9 tests/integration/select/cached-tests.html
  44. +4 −8 tests/integration/select/index.html
  45. +117 −100 tests/integration/select/select_cached.js
  46. +295 −230 tests/integration/select/select_core.js
  47. +3 −3 tests/jquery.testHelper.js
  48. +0 −10 tests/unit/dialog/dialog_count.js
  49. +2 −4 tests/unit/init/dialog-load-tests.html
  50. +6 −6 tests/unit/init/index.html
  51. +11 −7 tests/unit/init/init_dialog.js
  52. +14 −30 tests/unit/{dialog/index.html → page/dialog-tests.html}
  53. +12 −0 tests/unit/page/dialog_count.js
  54. +19 −18 tests/unit/pagecontainer/pagecontainer_core.js
@@ -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",
@@ -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",
@@ -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;
@@ -82,7 +82,7 @@
min-width: 11em;
}
.ui-selectmenu .ui-dialog-contain {
.ui-selectmenu .ui-page-dialog-contain {
overflow: hidden;
}
@@ -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;
}
@@ -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;
}
@@ -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;
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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>
View
@@ -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',
@@ -52,7 +53,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',
View
@@ -22,6 +22,7 @@
"./helpers",
"./data",
"./support",
"./widgets/enhancer",
"./events/navigate",
"./navigation/path",
"./navigation/method",
@@ -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()
View
@@ -26,7 +26,7 @@
"./navigation",
"./degradeInputs",
"./widgets/page.dialog",
"./widgets/dialog",
"./widgets/page.dialog.backcompat",
"./widgets/collapsible",
"./widgets/collapsibleSet",
"./grid",
Oops, something went wrong.

0 comments on commit 5d111f5

Please sign in to comment.