Permalink
Browse files

Merge branch 'master' of https://github.com/jquery/jquery-mobile into…

… slide-panel-refactor
  • Loading branch information...
2 parents a8790bc + 495481c commit 65e838b15a7a8fc68bf268ad07d0e70894aabfc9 Alexander Schmitz committed Jan 5, 2013
Showing with 512 additions and 151 deletions.
  1. +1 −0 Makefile
  2. +1 −0 build/bin/config.sh
  3. +3 −1 build/bin/docs.sh
  4. +1 −1 css/structure/jquery.mobile.button.css
  5. +2 −0 css/structure/jquery.mobile.controlgroup.css
  6. +1 −2 css/structure/jquery.mobile.forms.checkboxradio.css
  7. +1 −1 css/structure/jquery.mobile.listview.css
  8. +6 −11 css/structure/jquery.mobile.popup.css
  9. BIN docs/demos/_assets/img/album-bb.jpg
  10. BIN docs/demos/_assets/img/bmw-thumb.jpg
  11. BIN docs/demos/_assets/img/bmw.jpg
  12. BIN docs/demos/_assets/img/landrover-thumb.jpg
  13. BIN docs/demos/_assets/img/landrover.jpg
  14. BIN docs/demos/_assets/img/tesla-thumb.jpg
  15. BIN docs/demos/_assets/img/tesla.jpg
  16. +46 −12 docs/demos/_assets/js/view-source.js
  17. +10 −3 docs/demos/checkboxradio/checkboxradio.html
  18. +2 −0 docs/demos/index.html
  19. +119 −0 docs/demos/popups/dynamic-popup.html
  20. +12 −12 docs/demos/selects/custom-selects.html
  21. +6 −6 docs/demos/selects/selects.html
  22. +1 −1 docs/demos/sliders/rangeslider.html
  23. +1 −1 docs/demos/sliders/slider.html
  24. +1 −1 docs/demos/swipe/buenosaires.html
  25. +1 −1 docs/demos/swipe/capetown.html
  26. +1 −1 docs/demos/swipe/newyork.html
  27. +1 −1 docs/demos/swipe/paris.html
  28. +1 −1 docs/demos/swipe/seoul.html
  29. +167 −5 docs/demos/swipe/swipe-list.html
  30. +2 −2 docs/demos/swipe/swipe-page.html
  31. +1 −1 docs/demos/swipe/sydney.html
  32. +1 −1 docs/forms/docs-forms.html
  33. +1 −1 docs/forms/selects/index.html
  34. BIN docs/lists/images/album-bb.jpg
  35. +12 −2 grunt.js
  36. +1 −1 js/events/navigate.js
  37. +3 −3 js/events/orientationchange.js
  38. +4 −2 js/events/touch.js
  39. +2 −2 js/jquery.mobile.buttonMarkup.js
  40. +6 −2 js/jquery.mobile.core.js
  41. +1 −1 js/jquery.mobile.degradeInputs.js
  42. +3 −3 js/jquery.mobile.init.js
  43. +7 −7 js/jquery.mobile.navigation.js
  44. +24 −3 js/jquery.mobile.support.js
  45. +4 −4 js/jquery.mobile.transition.js
  46. +2 −2 js/jquery.mobile.zoom.iosorientationfix.js
  47. +2 −2 js/navigation/navigator.js
  48. +1 −1 js/widgets/collapsible.js
  49. +1 −1 js/widgets/collapsibleSet.js
  50. +1 −1 js/widgets/controlgroup.js
  51. +1 −4 js/widgets/dialog.js
  52. +4 −4 js/widgets/fixedToolbar.js
  53. +3 −3 js/widgets/fixedToolbar.workarounds.js
  54. +2 −2 js/widgets/forms/button.js
  55. +1 −1 js/widgets/forms/checkboxradio.js
  56. +2 −2 js/widgets/forms/select.custom.js
  57. +6 −3 js/widgets/forms/select.js
  58. +1 −1 js/widgets/forms/slider.js
  59. +3 −3 js/widgets/forms/textinput.js
  60. +1 −1 js/widgets/listview.autodividers.js
  61. +1 −1 js/widgets/listview.filter.js
  62. +1 −1 js/widgets/listview.js
  63. +3 −3 js/widgets/loader.js
  64. +1 −1 js/widgets/navbar.js
  65. +1 −1 js/widgets/page.js
  66. +1 −1 js/widgets/page.sections.js
  67. +8 −8 js/widgets/popup.js
  68. +2 −2 js/widgets/table.columntoggle.js
  69. +1 −1 js/widgets/table.js
  70. +1 −1 js/widgets/table.reflow.js
  71. +4 −4 tests/unit/rangeslider/rangeslider_core.js
View
@@ -35,6 +35,7 @@ js: init
# -------------------------------------------------
docs: init js css
@@${ARGS} bash build/bin/docs.sh
+ @@${ARGS} node node_modules/.bin/grunt concat:demosjs
# Output a message saying the process is complete
notify: init
View
@@ -27,6 +27,7 @@ OUTPUT="compiled"
# The name of the files
NAME="jquery.mobile"
+DEMOSNAME="jquery.mobile.demos"
BASE_NAME="jquery.mobile"
THEME_FILENAME="jquery.mobile.theme"
STRUCTURE="jquery.mobile.structure"
View
@@ -13,6 +13,8 @@ cp compiled/*.css tmp/demos/css/themes/$THEME
cp -r compiled/images tmp/demos/css/themes/$THEME
# ... replace "js/" with "js/jquery.mobile.js"
# NOTE the deletion here is required by gnu/bsd sed differences
+find tmp/demos/docs/demos \( -name '*.html' -o -name '*.php' \) -exec sed -i${SED_INPLACE_EXT} -e "s@_assets/js/\"@_assets/js/$DEMOSNAME.js\"@" {} \;
+find tmp/demos/docs/demos -name "*$SED_INPLACE_EXT" -exec rm {} \;
find tmp/demos \( -name '*.html' -o -name '*.php' \) -exec sed -i${SED_INPLACE_EXT} -e "s@js/\"@js/$NAME.js\"@" {} \;
find tmp/demos -name "*$SED_INPLACE_EXT" -exec rm {} \;
# make sure the docs reference the right css file names (for deploy)
@@ -29,4 +31,4 @@ cd tmp/demos && zip -rq ../../$OUTPUT/$NAME.docs.zip * && cd -
rm -rf $OUTPUT/demos && mv -f tmp/demos $OUTPUT
# Finish by removing the temporary files
-rm -rf tmp
+rm -rf tmp
@@ -5,7 +5,7 @@
.ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
-.ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right { margin: 0; } /* .ui-mobile to increase specificity level */
+.ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; } /* .ui-mobile to increase specificity level */
.ui-btn-block { display: block; }
.ui-header > .ui-btn,
@@ -27,6 +27,8 @@
.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
.ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
+/* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
+.ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }
.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
@@ -1,6 +1,5 @@
.ui-checkbox, .ui-radio { position: relative; clear: both; margin: 0; z-index: 1; }
-.ui-checkbox .ui-btn, .ui-radio .ui-btn { margin-top: .5em; margin-bottom: .5em; text-align: left; z-index: 2; }
-.ui-checkbox .ui-btn.ui-mini, .ui-radio .ui-btn.ui-mini { margin: .25em 0; }
+.ui-checkbox .ui-btn, .ui-radio .ui-btn { text-align: left; z-index: 2; }
.ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
@@ -51,7 +51,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
}
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
-.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
+.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 59px; padding-left: 100px; }
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; }
@@ -1,7 +1,6 @@
.ui-popup-open .ui-header-fixed,
.ui-popup-open .ui-footer-fixed {
position: absolute !important; /* See line #553 of popup.js */
-
}
.ui-popup-screen {
background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
@@ -14,34 +13,28 @@
opacity: 0;
z-index: 1099;
}
-
.ui-popup-screen.in {
opacity: 0.5;
filter: Alpha(Opacity=50);
}
-
.ui-popup-screen.out {
opacity: 0;
filter: Alpha(Opacity=0);
}
-
.ui-popup-container {
z-index: 1100;
display: inline-block;
position: absolute;
padding: 0;
outline: 0;
}
-
.ui-popup {
position: relative;
}
-
.ui-popup.ui-content,
.ui-popup .ui-content {
overflow: visible;
}
-
.ui-popup > p,
.ui-popup > h1,
.ui-popup > h2,
@@ -91,14 +84,19 @@
.ui-popup-container .ui-content > h6:last-child {
margin-bottom: 0;
}
-
.ui-popup > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
+.ui-popup:not(.ui-content) > img:only-child,
+.ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
+.ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
+ -webkit-border-radius: inherit;
+ border-radius: inherit;
+}
.ui-popup iframe {
vertical-align: middle;
}
@@ -119,16 +117,13 @@
width: 100%; display: block;
}
}
-
.ui-popup > .ui-btn-left,
.ui-popup > .ui-btn-right {
position: absolute;
top: -9px;
margin: 0;
z-index: 1101;
}
-
.ui-popup > .ui-btn-left { left: -9px; }
.ui-popup > .ui-btn-right { right: -9px; }
-
.ui-popup-hidden { top: -99999px; left: -9999px; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -22,23 +22,59 @@ function attachPopupHandler( popup, sources ) {
});
}
-var demoId = 0;
-
function getHeadSnippet( type, selector ) {
if ( selector === "true" ) {
selector = "";
}
return $( "<div></div>" ).append( $( "head" ).find( type + selector ).contents().clone() ).html();
}
-$.fn.viewSourceCode = function() {
+$( document ).bind( "pagebeforechange", function( e, data ) {
+ var popup, sources;
+ if ( data.options && data.options.role === "popup" && data.options.link ) {
+ sources = data.options.link.jqmData( "sources" );
+ if ( sources ) {
+ popup = $( "<div class='jqm-demo' data-role='popup' data-theme='none' data-position-to='window'>" +
+ "<div data-role='collapsible-set' data-inset='true'></div>" +
+ "</div>" );
+
+ attachPopupHandler( popup, sources );
+ popup
+ .appendTo( $.mobile.activePage )
+ .popup()
+ .bind( "popupafterclose", function() {
+ popup.remove();
+ })
+ .popup( "open" );
+
+ e.preventDefault();
+ }
+ }
+});
+
+function makeButton() {
+ var d = document.createElement( "div" )
+ a = document.createElement( "a" );
+ d.className = "jqm-demo-link";
+
+ a.setAttribute( "href", "./" );
+ a.setAttribute( "data-rel", "popup" );
+ a.setAttribute( "data-role", "button" );
+ a.setAttribute( "data-icon", "arrow-u" );
+ a.setAttribute( "data-mini", "true" );
+ a.setAttribute( "data-inline", "true" );
+ a.setAttribute( "data-shadow", "false" );
+ a.innerHTML = "View Source";
+
+ d.appendChild( a );
+
+ return $( d );
+}
+
+$.fn.viewSourceCode = function() {
return $( this ).each( function() {
- demoId++
- var button = $( "<div class='jqm-demo-link'><a href='#jqm-demo-" + demoId + "' data-rel='popup' data-role='button' data-icon='arrow-u' data-mini='true' data-inline='true' data-shadow='false'>View Source</a></div>" ),
- popup = $( "<div id='jqm-demo-" + demoId + "' class='jqm-demo' data-role='popup' data-theme='none' data-position-to='window'>" +
- "<div data-role='collapsible-set' data-inset='true'></div>" +
- "</div>" ),
+ var button = makeButton(),
self = $( this ),
page = self.closest( "[data-role='page']" ),
fixData = function( data ) {
@@ -80,10 +116,8 @@ $.fn.viewSourceCode = function() {
sources.push( { title: "CSS", theme: "e", brush: "css", data: fixData( data ) } );
}
- attachPopupHandler( popup, sources );
button.insertAfter( this );
- popup.appendTo( page );
-
+ button.children().jqmData( "sources", sources );
});
};
@@ -108,7 +142,7 @@ $( document ).on( "pageinit", function( e ) {
$( this ).parents( ":mobile-popup" ).popup( "reposition", { positionTo: "window" } );
});
- $( ".jqm-demo" ).on( "popupbeforeposition", function() {
+ $( e.target ).delegate( ".jqm-demo", "popupbeforeposition", function() {
// max height: screen height - tolerance (2*30px) - 42px for each collapsible heading
var x = $( this ).find( ".ui-collapsible" ).length,
maxHeight = $.mobile.getScreenHeight() - 60 - ( x * 42 );
@@ -25,7 +25,14 @@ <h1>Checkbox &amp; Radio buttons</h1>
<form>
<h2>Radio button</h2>
-
+
+ <div data-demo-html="true">
+ <label><input type="radio" name="radio-choice-0" id="radio-choice-0a"/>One</label>
+
+ <label for="radio-choice-0b">Two</label>
+ <input type="radio" name="radio-choice-0" id="radio-choice-0b" class="custom" />
+ </div><!--/demo-html -->
+
<div data-demo-html="true">
<fieldset data-role="controlgroup">
<legend>Vertical:</legend>
@@ -77,10 +84,10 @@ <h2>Radio button</h2>
<h2>Checkbox</h2>
<div data-demo-html="true">
- <label> <input type="checkbox" name="checkbox-0 "/>Single</label>
+ <label><input type="checkbox" name="checkbox-0 "/>One</label>
+ <label for="checkbox-1">Two</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
- <label for="checkbox-1">Single</label>
</div><!--/demo-html -->
<div data-demo-html="true">
View
@@ -59,6 +59,8 @@ <h2>Demos</h2>
<li><a href="grids/rwd-basics.html" data-ajax="false">Responsive (RWD) basics</a></li>
<li><a href="grids/grid-stack.html" data-ajax="false">Responsive grids, stack at mobile</a></li>
<li><a href="grids/grid-custom.html" data-ajax="false">Custom responsive grid</a></li>
+ <li data-role="list-divider">Popups</li>
+ <li><a href="popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>
<li data-role="list-divider">Responsive Tables</li>
<li><a href="tables/reflow-basic.html" data-ajax="false">Reflow: Basic</a></li>
<li><a href="tables/movie-list.html" data-ajax="false">Reflow: Movie</a></li>
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dynamic popup - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../../js/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../../js/"></script>
+ <script>
+ $( document ).on( "pageinit", "#demo-page", function() {
+
+ $( ".cars" ).on( "click", function() {
+ var target = $( this ),
+ brand = target.find( "h2" ).html(),
+ model = target.find( "p" ).html(),
+ short = target.attr( "id" ),
+ closebtn = '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn-right">Close</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">' + closebtn + header + img + '</div>';
+
+ // Create the popup. Trigger "pagecreate" instead of "create" because currently the framework doesn't bind the enhancement of toolbars to the "create" event (js/widgets/page.sections.js).
+ $.mobile.activePage.append( popup ).trigger( "pagecreate" );
+ // Wait with opening the popup until the popup image has been loaded in the DOM.
+ // This ensures the popup gets the correct size and position
+ $( ".photo", "#popup-" + short ).load(function() {
+ var height = $( this ).height(),
+ width = $( this ).width();
+ // Set height and width attribute of the image
+ $( this ).attr({ "height": height, "width": width });
+ // Open the popup
+ $( "#popup-" + short ).popup( "open" );
+ // Clear the fallback
+ clearTimeout( fallback );
+ });
+ // Fallback in case the browser doesn't fire a load event
+ var fallback = setTimeout(function() {
+ $( "#popup-" + short ).popup( "open" );
+ }, 2000);
+ });
+
+ // Set a max-height to make large images shrink to fit the screen.
+ $( document ).on( "popupbeforeposition", ".ui-popup", function() {
+ // 68px: 2 * 15px for top/bottom tolerance, 38px for the header.
+ var maxHeight = $( window ).height() - 68 + "px";
+
+ $( "img.photo", this ).css( "max-height", maxHeight );
+ });
+
+ // Remove the popup after it has been closed to manage DOM size
+ $( document ).on( "popupafterclose", ".ui-popup", function() {
+ $( this ).remove();
+ });
+ });
+ </script>
+ <style>
+ /* Reduce the height of the header on smaller screens. */
+ @media all and (max-width: 48em){
+ .ui-popup .ui-title {
+ font-size: .75em;
+ }
+ }
+ </style>
+</head>
+<body>
+<div data-role="page" id="demo-intro">
+
+ <div data-role="header" data-theme="f">
+ <h1>Dynamic popup</h1>
+ <a href="../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <div class="content-primary">
+
+ <h2>Dynamically creating a popup</h2>
+
+ <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" data-role="button" data-inline="true" data-theme="c">Open dynamic popup demo</a></p>
+ </div><!--/demo-html -->
+
+ </div><!--/content-primary -->
+
+ </div><!-- /content -->
+
+ <div class="jqm-footer">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div><!-- /jqm-footer -->
+
+</div><!-- /page -->
+
+<div data-role="page" id="demo-page" data-title="Cars">
+
+ <div data-role="header" data-theme="b">
+ <a href="#demo-intro" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
+ <h1>Cars</h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+
+ <ul data-role="listview">
+ <li><a href="#" class="cars" id="bmw"><img src="../_assets/img/bmw-thumb.jpg" alt="BMW"><h2>BMW</h2><p>5 series</p></a></li>
+ <li><a href="#" class="cars" id="landrover"><img src="../_assets/img/landrover-thumb.jpg" alt="Land Rover"><h2>Land Rover</h2><p>Discovery 4</p></a></li>
+ <li><a href="#" class="cars" id="tesla"><img src="../_assets/img/tesla-thumb.jpg" alt="Tesla"><h2>Tesla</h2><p>Model S</p></a></li>
+ </ul>
+
+ </div><!-- /content -->
+
+</div><!-- /page -->
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 65e838b

Please sign in to comment.