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

Makefile

@@ -67,6 +67,7 @@ JSFILES = 	  js/jquery.ui.widget.js \
 			  js/jquery.mobile.controlGroup.js \
 			  js/jquery.mobile.links.js \
 			  js/jquery.mobile.fixHeaderFooter.js \
+			  js/jquery.mobile.fixHeaderFooter.native.js \
 			  js/jquery.mobile.media.classes.js \
 			  js/jquery.mobile.init.js
 

build.xml

@@ -51,6 +51,7 @@
 		  jquery.mobile.controlGroup.js,
 		  jquery.mobile.links.js,
 		  jquery.mobile.fixHeaderFooter.js,
+		  jquery.mobile.fixHeaderFooter.native.js,
 		  jquery.mobile.media.classes.js,
 		  jquery.mobile.init.js"/>
 

docs/_assets/css/jqm-docs.css

@@ -6,7 +6,7 @@ cobblers, shoes,
 
 body { background: #dddddd; }
 
-.ui-mobile .type-home {  background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
+.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
 .ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center;  margin: 0 auto; }
 .ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
 .ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
@@ -21,6 +21,7 @@ dt code, dd code { font-size:1.3em; line-height:150%; }
 pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
 
 #jqm-homeheader img { width: 235px; }
+img { max-width: 100%; }
 
 .ui-header .jqm-home { top:0.65em; }
 nav { margin: 0; }

docs/api/globalconfig.html

@@ -105,6 +105,9 @@ $(document).bind("mobileinit", function(){
 	<dt><code>defaultPageTransition</code> <em>string</em>, default: 'slide'</dt> 
 	<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
 	
+	<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt> 
+	<dd>Enable pages to have self-contained native scrolling and fixed toolbars in devices that support the <code>overflow-scrolling: touch; </code> property.</dd>
+	
 	<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt> 
 	<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</dd>
 

docs/toolbars/bars-fullscreen.html

@@ -22,7 +22,7 @@
 	
 	<div data-role="content">
 			<div class="content-primary">
-				<img src="images/photo-run.jpeg" width="640" height="480" alt="Photo Run">
+				<img src="images/photo-run.jpeg"  alt="Photo Run">
 	
 		<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
 		

js/index.php

@@ -33,6 +33,7 @@ $elements = array(
 	'jquery.mobile.controlGroup.js',
 	'jquery.mobile.links.js',
 	'jquery.mobile.fixHeaderFooter.js',
+	'jquery.mobile.fixHeaderFooter.native.js',
 	'jquery.mobile.media.classes.js',
 	'jquery.mobile.init.js'
 );

js/jquery.mobile.collapsible.js

@@ -10,7 +10,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
 	options: {
 		expandCueText: " click to expand contents",
 		collapseCueText: " click to collapse contents",
-		collapsed: false,
+		collapsed: true,
 		heading: ">:header,>legend",
 		theme: null,
 		iconTheme: "d",

js/jquery.mobile.fixHeaderFooter.js

@@ -37,7 +37,7 @@ $.fn.fixHeaderFooter = function( options ) {
 // single controller for all showing,hiding,toggling
 $.mobile.fixedToolbars = (function() {
 
-	if ( !$.support.scrollTop ) {
+	if ( !$.support.scrollTop || $.support.touchOverflow ) {
 		return;
 	}
 
@@ -361,7 +361,7 @@ $( document ).bind( "pagecreate create", function( event ) {
 
 		$( event.target ).each(function() {
 
-			if ( !$.support.scrollTop ) {
+			if ( !$.support.scrollTop || $.support.touchOverflow ) {
 				return this;
 			}
 

js/jquery.mobile.fixHeaderFooter.native.js

@@ -0,0 +1,59 @@
+/*
+* jQuery Mobile Framework : "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content
+* Copyright (c) jQuery Project
+* Dual licensed under the MIT or GPL Version 2 licenses.
+* http://jquery.org/license
+*/
+
+(function( $, undefined ) {
+
+$.mobile.touchOverflowEnabled = false;
+
+$( document ).bind( "pagecreate", function( event ) {
+	if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
+		
+		var $target = $( event.target ),
+			scrollStartY = 0;
+			
+		if( $target.is( ":jqmData(role='page')" ) ){
+			
+			$target.each(function() {
+				var $page = $( this ),
+					$fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
+					fullScreen = $page.jqmData( "fullscreen" ),
+					$scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
+				
+				$page.addClass( "ui-mobile-touch-overflow" );
+				
+				$scrollElem.bind( "scrollstop", function(){
+					if( $scrollElem.scrollTop() > 0 ){
+						window.scrollTo( 0, $.mobile.defaultHomeScroll );
+					}
+				});	
+				
+				if( $fixies.length ){
+					
+					$page.addClass( "ui-native-fixed" );
+					
+					if( fullScreen ){
+
+						$page.addClass( "ui-native-fullscreen" );
+
+						$fixies.addClass( "fade in" );
+
+						$( document ).bind( "vclick", function(){
+							$fixies
+								.removeClass( "ui-native-bars-hidden" )
+								.toggleClass( "in out" )
+								.animationComplete(function(){
+									$(this).not( ".in" ).addClass( "ui-native-bars-hidden" );
+								});
+						});
+					}
+				}
+			});
+		}
+	}
+});
+
+})( jQuery );

js/jquery.mobile.navigation.js

@@ -409,11 +409,18 @@
 			
 			lastScrollEnabled = false;
 		
-			var active = $.mobile.urlHistory.getActive();
+			var active = $.mobile.urlHistory.getActive(),
+				activePage = $( ".ui-page-active" ),
+				scrollElem = $( window ),
+				touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled;
+			
+			if( touchOverflow ){
+				scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
+			}	
 			
 			if( active ){
-				var lastScroll = $( window ).scrollTop();
-				
+				var lastScroll = scrollElem.scrollTop();
+
 				// Set active page's lastScroll prop.
 				// If the Y location we're scrolling to is less than minScrollBack, let it go.
 				active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
@@ -425,28 +432,60 @@
 	// using beforechangepage or popstate/hashchange (whichever comes first)
 	$( document ).bind( "beforechangepage", getLastScroll );
 	$( window ).bind( $.support.pushState ? "popstate" : "hashchange", getLastScroll );
+	
+	// Make the iOS clock quick-scroll work again if we're using native overflow scrolling
+	/*
+	if( $.support.touchOverflow ){
+		if( $.mobile.touchOverflowEnabled ){
+			$( window ).bind( "scrollstop", function(){
+				if( $( this ).scrollTop() === 0 ){
+					$.mobile.activePage.scrollTop( 0 );
+				}
+			});
+		}
+	}
+	*/
 
 	//function for transitioning between two existing pages
 	function transitionPages( toPage, fromPage, transition, reverse ) {
 
 		//get current scroll distance
 		var active	= $.mobile.urlHistory.getActive(),
-			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
+			touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
+			toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
 			screenHeight = getScreenHeight();
-
-		// Scroll to top
+			
+		// Scroll to top, hide addr bar
 		window.scrollTo( 0, $.mobile.defaultHomeScroll );
 
 		if( fromPage ) {
 			//trigger before show/hide events
 			fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
 		}
-		toPage
-			.height( screenHeight + toScroll )
-			.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
+		
+		if( !touchOverflow){
+			toPage.height( screenHeight + toScroll );
+		}	
+		
+		toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
 
 		//clear page loader
 		$.mobile.hidePageLoadingMsg();
+		
+		if( touchOverflow && toScroll ){
+			
+			toPage.addClass( "ui-mobile-pre-transition" );
+			// Send focus to page as it is now display: block
+			reFocus( toPage );
+			
+			//set page's scrollTop to remembered distance
+			if( toPage.is( ".ui-native-fixed" ) ){
+				toPage.find( ".ui-content" ).scrollTop( toScroll );
+			}
+			else{
+				toPage.scrollTop( toScroll );
+			}
+		}
 
 		//find the transition handler for the specified transition. If there
 		//isn't one in our transitionHandlers dictionary, use the default one.
@@ -455,18 +494,25 @@
 			promise = th( transition, reverse, toPage, fromPage );
 
 		promise.done(function() {
-			//reset toPage height bac
-			toPage.height( "" );
-			
-			// Send focus to the newly shown page
-			reFocus( toPage );
+			//reset toPage height back
+			if( !touchOverflow ){
+				toPage.height( "" );
+				// Send focus to the newly shown page
+				reFocus( toPage );
+			}
 			
 			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			$.mobile.silentScroll( toScroll );
+			if( !touchOverflow ){
+				$.mobile.silentScroll( toScroll );
+			}
 
 			//trigger show/hide events
 			if( fromPage ) {
-				fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } );
+				if( !touchOverflow ){
+					fromPage.height( "" );
+				}
+				
+				fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
 			}
 
 			//trigger pageshow, define prevPage as either fromPage or empty jQuery obj

js/jquery.mobile.navigation.pushstate.js

@@ -91,7 +91,7 @@
 					
 					// change the page based on the hash
 					$.mobile._handleHashChange( poppedState.hash );
-				});
+				}, 100);
 			}
 		},
 

js/jquery.mobile.support.js

@@ -70,6 +70,7 @@ $.extend( $.support, {
 	pushState: "pushState" in history && "replaceState" in history,
 	mediaquery: $.mobile.media( "only all" ),
 	cssPseudoElement: !!propExists( "content" ),
+	touchOverflow: !!propExists( "overflowScrolling" ),
 	boxShadow: !!propExists( "boxShadow" ) && !bb,
 	scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos,
 	dynamicBaseTag: baseTagTest(),
@@ -117,4 +118,4 @@ if ( !$.support.boxShadow ) {
 	$( "html" ).addClass( "ui-mobile-nosupport-boxshadow" );
 }
 
-})( jQuery );
+})( jQuery );

tests/jquery.testHelper.js

@@ -118,7 +118,7 @@
 		},
 
 		decorate: function(opts){
-			var thisVal = opts.this || window;
+			var thisVal = opts.self || window;
 
 			return function(){
 				var returnVal;
@@ -141,4 +141,4 @@
 			}
 		}
 	};
-})(jQuery);
+})(jQuery);

themes/default/jquery.mobile.core.css

@@ -22,6 +22,21 @@
 .landscape,
 .landscape .ui-page  { min-height: 300px; }
 
+/* native overflow scrolling */
+.ui-page.ui-mobile-touch-overflow,
+.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
+	overflow: auto;
+	height: 100%;
+	-webkit-overflow-scrolling: touch;
+	-moz-overflow-scrolling: touch;
+	-o-overflow-scrolling: touch;
+	-ms-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+}
+.ui-page.ui-mobile-pre-transition {
+	display: block;
+}
+
 /* loading screen */
 .ui-loading .ui-mobile-viewport { overflow: hidden !important; }
 .ui-loading .ui-loader { display: block; }
@@ -48,6 +63,43 @@
 .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
 .ui-page-fullscreen .ui-content { padding:0; }
 
+/* native fixed headers and footers */
+.ui-mobile-touch-overflow.ui-page.ui-native-fixed,
+.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen {
+	overflow: visible;
+}
+.ui-mobile-touch-overflow.ui-native-fixed .ui-header,
+.ui-mobile-touch-overflow.ui-native-fixed .ui-footer {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 200;
+}
+.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer {
+	top: auto;
+	bottom: 0;
+}
+.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
+	padding-top: 2.5em;
+	padding-bottom: 3em;
+	top: 0;
+	bottom: 0;
+	height: auto;
+	position: absolute;
+}
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header,
+.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer {
+	opacity: .9;
+}
+.ui-native-bars-hidden {
+	display: none;
+}
+
 /* icons sizing */
 .ui-icon { width: 18px; height: 18px; }