Permalink
Browse files

Popup: Implement classes option

Fixes gh-7686
Closes gh-8068
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Mar 1, 2015
1 parent 5d64d59 commit 3361b8565302c28531cd16eaec381bcff53200c7
@@ -35,12 +35,19 @@ module.exports = {
"js/widgets/enhancer.js",
"js/widgets/enhancer.backcompat.js",
"js/degradeInputs.js",
"js/widgets/popup.arrow.backcompat.js",
"js/widgets/popup.arrow.js",
"js/widgets/popup.backcompat.js",
"js/widgets/popup.js",
// Tests
"tests/unit/textinput/settings.js",
"tests/unit/textinput/textinput_core.js",
"tests/unit/degrade-inputs/degradeInputs.js",
"tests/unit/enhancer/enhancer.js"
"tests/unit/enhancer/enhancer.js",
"tests/integration/popup/popup_core.js",
"tests/integration/popup/backcompat_core.js",
"tests/unit/popup/popup_core.js"
]
},
tests: {
@@ -47,8 +47,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
@@ -161,8 +161,8 @@ function updateArrowSize() {
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
@@ -171,11 +171,10 @@ function updateArrowSize() {
<div style="padding: 100px;">
<div style="position: static;" class="ui-popup-container ui-popup-active">
<div class="ui-popup ui-body-inherit ui-overlay-shadow ui-corner-all">
<p>This is what a popup would look like.</p>
<p>It contains multiple paragraphs.</p>
<p>Note that large arrows may not be displayed at all.</p>
<p>This is because their sides would "stick out" of the popup.</p>
<p>The arrow placement code prevents this.</p>
<p>This is a preview of what a popup with an arrow would look like.</p>
<p>It contains multiple paragraphs to increase its height.</p>
<p>Note that in a real popup only one arrow will be displayed at a time, and large arrows may not be displayed at all.</p>
<p>This is because the arrow placement code prevents arrow sides from "sticking out" of the popup.</p>
<div id="exampleArrow-l" class="ui-popup-arrow-container ui-popup-arrow-l">
<div class="ui-popup-arrow ui-body-inherit ui-overlay-shadow"></div>
</div>
@@ -19,7 +19,7 @@
brand = target.find( "h2" ).html(),
model = target.find( "p" ).html(),
short = target.attr( "id" ),
closebutton = '<a href="#" data-rel="back" class="ui-button ui-corner-all ui-button-a ui-button-icon-only ui-button-right">Close<span class="ui-icon ui-icon-delete"></span></a>',
closebutton = '<a href="#" data-rel="back" class="ui-button ui-corner-all ui-button-a ui-button-icon-only ui-button-right">Close <span class="ui-icon ui-icon-delete"></span></a>',
header = '<div data-role="header"><h2>' + brand + ' ' + model + '</h2></div>',
img = '<img src="../_assets/img/' + short + '.jpg" alt="' + brand + '" class="photo">',
popup = '<div data-role="popup" id="popup-' + short + '" data-short="' + short +'" data-theme="none" data-overlay-theme="a" data-corners="false" data-tolerance="15"></div>';
@@ -85,8 +85,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
@@ -96,7 +96,7 @@
<div data-demo-html="#demo-page" data-demo-js="true">
<p>This demo shows how you can dynamically create a popup. The popup contains images which means we have to set the image width and height to make sure the popup gets the right size and position. At client side we can only get the size when the image has been loaded in the DOM. In this demo we use the <code>load</code> event, but with a fallback because it has some caveats (see <a href="http://api.jquery.com/load-event/" rel="external">.load() - jQuery API</a>).</p>
<p><a href="#demo-page" data-transition="fade" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-mini">Open dynamic popup demo</a><span class="ui-icon ui-icon-arrow-r"></span></p>
<p><a href="#demo-page" data-transition="fade" class="ui-button ui-corner-all ui-shadow ui-button-inline ui-mini">Open dynamic popup demo <span class="ui-icon ui-icon-arrow-r"></a></span></p>
</div><!--/demo-html -->
</div><!-- /content -->
@@ -25,8 +25,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
@@ -65,7 +65,7 @@
<a href="#popupMap" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline">Open Map</a>
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">
<a href="#" data-rel="back" class="ui-button ui-button-b ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close<span class="ui-icon ui-icon-delete"></span></a>
<a href="#" data-rel="back" class="ui-button ui-button-b ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close <span class="ui-icon ui-icon-delete"></span></a>
<iframe src="map.html" width="480" height="320" seamless=""></iframe>
</div>
</div>
@@ -19,8 +19,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
@@ -36,11 +36,11 @@
<a href="#popupPhotoPortrait" data-rel="popup" data-position-to="window" class="ui-button ui-corner-all ui-shadow ui-button-inline" data-transition="fade">Photo portrait</a>
<div data-role="popup" id="popupPhotoLandscape" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close</a><span class="ui-icon ui-icon-delete"></span><img src="../_assets/img/photo-landscape.jpg" alt="Photo landscape">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close <span class="ui-icon ui-icon-delete"></span></a><img src="../_assets/img/photo-landscape.jpg" alt="Photo landscape">
</div>
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close</a><span class="ui-icon ui-icon-delete"></span><img src="../_assets/img/photo-portrait.jpg" alt="Photo portrait">
<a href="#" data-rel="back" class="ui-button ui-corner-all ui-shadow ui-button-a ui-button-icon-only ui-button-right">Close <span class="ui-icon ui-icon-delete"></span></a><img src="../_assets/img/photo-portrait.jpg" alt="Photo portrait">
</div>
</div><!--/demo-html -->
@@ -35,8 +35,8 @@
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p><span class="jqm-version"></span> Demos</p>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu <span class="ui-icon ui-icon-bars"></span></a>
<a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search <span class="ui-icon ui-icon-search"></span></a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
Oops, something went wrong.

0 comments on commit 3361b85

Please sign in to comment.