Skip to content

Commit 711a552

Browse files
jblasjblas
committed
Merge branch 'master' of https://github.com/jquery/jquery-mobile 
2 parents 64537fa + 6f5a7d1 commit 711a552

14 files changed

+190
-25
lines changed

‎Makefile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ JSFILES = js/jquery.ui.widget.js \
6767
js/jquery.mobile.controlGroup.js \
6868
js/jquery.mobile.links.js \
6969
js/jquery.mobile.fixHeaderFooter.js \
70+
js/jquery.mobile.fixHeaderFooter.native.js \
7071
js/jquery.mobile.media.classes.js \
7172
js/jquery.mobile.init.js
7273

‎build.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
jquery.mobile.controlGroup.js,
5252
jquery.mobile.links.js,
5353
jquery.mobile.fixHeaderFooter.js,
54+
jquery.mobile.fixHeaderFooter.native.js,
5455
jquery.mobile.media.classes.js,
5556
jquery.mobile.init.js"/>
5657

‎docs/_assets/css/jqm-docs.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ cobblers, shoes,
66

77
body { background: #dddddd; }
88

9-
.ui-mobile .type-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
9+
.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
1010
.ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; }
1111
.ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
1212
.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%; }
2121
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
2222

2323
#jqm-homeheader img { width: 235px; }
24+
img { max-width: 100%; }
2425

2526
.ui-header .jqm-home { top:0.65em; }
2627
nav { margin: 0; }

‎docs/api/globalconfig.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@ <h2>Configurable options</h2>
105105
<dt><code>defaultPageTransition</code> <em>string</em>, default: 'slide'</dt>
106106
<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
107107

108+
<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
109+
<dd>Enable pages to have self-contained native scrolling and fixed toolbars in devices that support the <code>overflow-scrolling: touch; </code> property.</dd>
110+
108111
<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt>
109112
<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</dd>
110113

‎docs/toolbars/bars-fullscreen.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>Fullscreen fixed header</h1>
2222

2323
<div data-role="content">
2424
<div class="content-primary">
25-
<img src="images/photo-run.jpeg" width="640" height="480" alt="Photo Run">
25+
<img src="images/photo-run.jpeg" alt="Photo Run">
2626

2727
<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>
2828

‎js/index.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
'jquery.mobile.controlGroup.js',
3434
'jquery.mobile.links.js',
3535
'jquery.mobile.fixHeaderFooter.js',
36+
'jquery.mobile.fixHeaderFooter.native.js',
3637
'jquery.mobile.media.classes.js',
3738
'jquery.mobile.init.js'
3839
);

‎js/jquery.mobile.collapsible.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
1010
options: {
1111
expandCueText: " click to expand contents",
1212
collapseCueText: " click to collapse contents",
13-
collapsed: false,
13+
collapsed: true,
1414
heading: ">:header,>legend",
1515
theme: null,
1616
iconTheme: "d",

‎js/jquery.mobile.fixHeaderFooter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ $.fn.fixHeaderFooter = function( options ) {
3737
// single controller for all showing,hiding,toggling
3838
$.mobile.fixedToolbars = (function() {
3939

40-
if ( !$.support.scrollTop ) {
40+
if ( !$.support.scrollTop || $.support.touchOverflow ) {
4141
return;
4242
}
4343

@@ -361,7 +361,7 @@ $( document ).bind( "pagecreate create", function( event ) {
361361

362362
$( event.target ).each(function() {
363363

364-
if ( !$.support.scrollTop ) {
364+
if ( !$.support.scrollTop || $.support.touchOverflow ) {
365365
return this;
366366
}
367367

‎js/jquery.mobile.fixHeaderFooter.native.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* jQuery Mobile Framework : "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content
3+
* Copyright (c) jQuery Project
4+
* Dual licensed under the MIT or GPL Version 2 licenses.
5+
* http://jquery.org/license
6+
*/
7+
8+
(function( $, undefined ) {
9+
10+
$.mobile.touchOverflowEnabled = false;
11+
12+
$( document ).bind( "pagecreate", function( event ) {
13+
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
14+
15+
var $target = $( event.target ),
16+
scrollStartY = 0;
17+
18+
if( $target.is( ":jqmData(role='page')" ) ){
19+
20+
$target.each(function() {
21+
var $page = $( this ),
22+
$fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
23+
fullScreen = $page.jqmData( "fullscreen" ),
24+
$scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
25+
26+
$page.addClass( "ui-mobile-touch-overflow" );
27+
28+
$scrollElem.bind( "scrollstop", function(){
29+
if( $scrollElem.scrollTop() > 0 ){
30+
window.scrollTo( 0, $.mobile.defaultHomeScroll );
31+
}
32+
});
33+
34+
if( $fixies.length ){
35+
36+
$page.addClass( "ui-native-fixed" );
37+
38+
if( fullScreen ){
39+
40+
$page.addClass( "ui-native-fullscreen" );
41+
42+
$fixies.addClass( "fade in" );
43+
44+
$( document ).bind( "vclick", function(){
45+
$fixies
46+
.removeClass( "ui-native-bars-hidden" )
47+
.toggleClass( "in out" )
48+
.animationComplete(function(){
49+
$(this).not( ".in" ).addClass( "ui-native-bars-hidden" );
50+
});
51+
});
52+
}
53+
}
54+
});
55+
}
56+
}
57+
});
58+
59+
})( jQuery );

‎js/jquery.mobile.navigation.js

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -409,11 +409,18 @@
409409

410410
lastScrollEnabled = false;
411411

412-
var active = $.mobile.urlHistory.getActive();
412+
var active = $.mobile.urlHistory.getActive(),
413+
activePage = $( ".ui-page-active" ),
414+
scrollElem = $( window ),
415+
touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled;
416+
417+
if( touchOverflow ){
418+
scrollElem = activePage.is( ".ui-native-fixed" ) ? activePage.find( ".ui-content" ) : activePage;
419+
}
413420

414421
if( active ){
415-
var lastScroll = $( window ).scrollTop();
416-
422+
var lastScroll = scrollElem.scrollTop();
423+
417424
// Set active page's lastScroll prop.
418425
// If the Y location we're scrolling to is less than minScrollBack, let it go.
419426
active.lastScroll = lastScroll < $.mobile.minScrollBack ? $.mobile.defaultHomeScroll : lastScroll;
@@ -425,28 +432,60 @@
425432
// using beforechangepage or popstate/hashchange (whichever comes first)
426433
$( document ).bind( "beforechangepage", getLastScroll );
427434
$( window ).bind( $.support.pushState ? "popstate" : "hashchange", getLastScroll );
435+
436+
// Make the iOS clock quick-scroll work again if we're using native overflow scrolling
437+
/*
438+
if( $.support.touchOverflow ){
439+
if( $.mobile.touchOverflowEnabled ){
440+
$( window ).bind( "scrollstop", function(){
441+
if( $( this ).scrollTop() === 0 ){
442+
$.mobile.activePage.scrollTop( 0 );
443+
}
444+
});
445+
}
446+
}
447+
*/
428448

429449
//function for transitioning between two existing pages
430450
function transitionPages( toPage, fromPage, transition, reverse ) {
431451

432452
//get current scroll distance
433453
var active = $.mobile.urlHistory.getActive(),
434-
toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
454+
touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
455+
toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
435456
screenHeight = getScreenHeight();
436-
437-
// Scroll to top
457+
458+
// Scroll to top, hide addr bar
438459
window.scrollTo( 0, $.mobile.defaultHomeScroll );
439460

440461
if( fromPage ) {
441462
//trigger before show/hide events
442463
fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
443464
}
444-
toPage
445-
.height( screenHeight + toScroll )
446-
.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
465+
466+
if( !touchOverflow){
467+
toPage.height( screenHeight + toScroll );
468+
}
469+
470+
toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
447471

448472
//clear page loader
449473
$.mobile.hidePageLoadingMsg();
474+
475+
if( touchOverflow && toScroll ){
476+
477+
toPage.addClass( "ui-mobile-pre-transition" );
478+
// Send focus to page as it is now display: block
479+
reFocus( toPage );
480+
481+
//set page's scrollTop to remembered distance
482+
if( toPage.is( ".ui-native-fixed" ) ){
483+
toPage.find( ".ui-content" ).scrollTop( toScroll );
484+
}
485+
else{
486+
toPage.scrollTop( toScroll );
487+
}
488+
}
450489

451490
//find the transition handler for the specified transition. If there
452491
//isn't one in our transitionHandlers dictionary, use the default one.
@@ -455,18 +494,25 @@
455494
promise = th( transition, reverse, toPage, fromPage );
456495

457496
promise.done(function() {
458-
//reset toPage height bac
459-
toPage.height( "" );
460-
461-
// Send focus to the newly shown page
462-
reFocus( toPage );
497+
//reset toPage height back
498+
if( !touchOverflow ){
499+
toPage.height( "" );
500+
// Send focus to the newly shown page
501+
reFocus( toPage );
502+
}
463503

464504
// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
465-
$.mobile.silentScroll( toScroll );
505+
if( !touchOverflow ){
506+
$.mobile.silentScroll( toScroll );
507+
}
466508

467509
//trigger show/hide events
468510
if( fromPage ) {
469-
fromPage.height("").data( "page" )._trigger( "hide", null, { nextPage: toPage } );
511+
if( !touchOverflow ){
512+
fromPage.height( "" );
513+
}
514+
515+
fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
470516
}
471517

472518
//trigger pageshow, define prevPage as either fromPage or empty jQuery obj

‎js/jquery.mobile.navigation.pushstate.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191

9292
// change the page based on the hash
9393
$.mobile._handleHashChange( poppedState.hash );
94-
});
94+
}, 100);
9595
}
9696
},
9797

‎js/jquery.mobile.support.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ $.extend( $.support, {
7070
pushState: "pushState" in history && "replaceState" in history,
7171
mediaquery: $.mobile.media( "only all" ),
7272
cssPseudoElement: !!propExists( "content" ),
73+
touchOverflow: !!propExists( "overflowScrolling" ),
7374
boxShadow: !!propExists( "boxShadow" ) && !bb,
7475
scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos,
7576
dynamicBaseTag: baseTagTest(),
@@ -117,4 +118,4 @@ if ( !$.support.boxShadow ) {
117118
$( "html" ).addClass( "ui-mobile-nosupport-boxshadow" );
118119
}
119120

120-
})( jQuery );
121+
})( jQuery );

‎tests/jquery.testHelper.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
},
119119

120120
decorate: function(opts){
121-
var thisVal = opts.this || window;
121+
var thisVal = opts.self || window;
122122

123123
return function(){
124124
var returnVal;
@@ -141,4 +141,4 @@
141141
}
142142
}
143143
};
144-
})(jQuery);
144+
})(jQuery);

‎themes/default/jquery.mobile.core.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,21 @@
2222
.landscape,
2323
.landscape .ui-page { min-height: 300px; }
2424

25+
/* native overflow scrolling */
26+
.ui-page.ui-mobile-touch-overflow,
27+
.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
28+
overflow: auto;
29+
height: 100%;
30+
-webkit-overflow-scrolling: touch;
31+
-moz-overflow-scrolling: touch;
32+
-o-overflow-scrolling: touch;
33+
-ms-overflow-scrolling: touch;
34+
overflow-scrolling: touch;
35+
}
36+
.ui-page.ui-mobile-pre-transition {
37+
display: block;
38+
}
39+
2540
/* loading screen */
2641
.ui-loading .ui-mobile-viewport { overflow: hidden !important; }
2742
.ui-loading .ui-loader { display: block; }
@@ -48,6 +63,43 @@
4863
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
4964
.ui-page-fullscreen .ui-content { padding:0; }
5065

66+
/* native fixed headers and footers */
67+
.ui-mobile-touch-overflow.ui-page.ui-native-fixed,
68+
.ui-mobile-touch-overflow.ui-page.ui-native-fullscreen {
69+
overflow: visible;
70+
}
71+
.ui-mobile-touch-overflow.ui-native-fixed .ui-header,
72+
.ui-mobile-touch-overflow.ui-native-fixed .ui-footer {
73+
position: fixed;
74+
left: 0;
75+
right: 0;
76+
top: 0;
77+
z-index: 200;
78+
}
79+
.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer {
80+
top: auto;
81+
bottom: 0;
82+
}
83+
.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
84+
padding-top: 2.5em;
85+
padding-bottom: 3em;
86+
top: 0;
87+
bottom: 0;
88+
height: auto;
89+
position: absolute;
90+
}
91+
.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content {
92+
padding-top: 0;
93+
padding-bottom: 0;
94+
}
95+
.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header,
96+
.ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer {
97+
opacity: .9;
98+
}
99+
.ui-native-bars-hidden {
100+
display: none;
101+
}
102+
51103
/* icons sizing */
52104
.ui-icon { width: 18px; height: 18px; }
53105

0 commit comments

Comments
 (0)