From b7bd8b04518426f79aa1aef7a4fa270fde3929f2 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 16 Dec 2011 18:55:37 +0700 Subject: [PATCH 001/388] removed fixHeaderFooter files --- js/jquery.mobile.fixHeaderFooter.js | 375 --------------------- js/jquery.mobile.fixHeaderFooter.native.js | 60 ---- 2 files changed, 435 deletions(-) delete mode 100644 js/jquery.mobile.fixHeaderFooter.js delete mode 100644 js/jquery.mobile.fixHeaderFooter.native.js diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js deleted file mode 100644 index a63a4c86..00000000 --- a/js/jquery.mobile.fixHeaderFooter.js +++ /dev/null @@ -1,375 +0,0 @@ -/* -* "fixHeaderFooter" plugin - on-demand positioning for headers,footers -*/ - -(function( $, undefined ) { - -var slideDownClass = "ui-header-fixed ui-fixed-inline fade", - slideUpClass = "ui-footer-fixed ui-fixed-inline fade", - - slideDownSelector = ".ui-header:jqmData(position='fixed')", - slideUpSelector = ".ui-footer:jqmData(position='fixed')"; - -$.fn.fixHeaderFooter = function( options ) { - - if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) { - return this; - } - - return this.each(function() { - var $this = $( this ); - - if ( $this.jqmData( "fullscreen" ) ) { - $this.addClass( "ui-page-fullscreen" ); - } - - // Should be slidedown - $this.find( slideDownSelector ).addClass( slideDownClass ); - - // Should be slideup - $this.find( slideUpSelector ).addClass( slideUpClass ); - }); -}; - -// single controller for all showing,hiding,toggling -$.mobile.fixedToolbars = (function() { - - if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) { - return; - } - - var stickyFooter, delayTimer, - currentstate = "inline", - autoHideMode = false, - showDelay = 100, - ignoreTargets = "a,input,textarea,select,button,label,.ui-header-fixed,.ui-footer-fixed", - toolbarSelector = ".ui-header-fixed:first, .ui-footer-fixed:not(.ui-footer-duplicate):last", - // for storing quick references to duplicate footers - supportTouch = $.support.touch, - touchStartEvent = supportTouch ? "touchstart" : "mousedown", - touchStopEvent = supportTouch ? "touchend" : "mouseup", - stateBefore = null, - scrollTriggered = false, - touchToggleEnabled = true; - - function showEventCallback( event ) { - // An event that affects the dimensions of the visual viewport has - // been triggered. If the header and/or footer for the current page are in overlay - // mode, we want to hide them, and then fire off a timer to show them at a later - // point. Events like a resize can be triggered continuously during a scroll, on - // some platforms, so the timer is used to delay the actual positioning until the - // flood of events have subsided. - // - // If we are in autoHideMode, we don't do anything because we know the scroll - // callbacks for the plugin will fire off a show when the scrolling has stopped. - if ( !autoHideMode && currentstate === "overlay" ) { - if ( !delayTimer ) { - $.mobile.fixedToolbars.hide( true ); - } - - $.mobile.fixedToolbars.startShowTimer(); - } - } - - $(function() { - var $document = $( document ), - $window = $( window ); - - $document - .bind( "vmousedown", function( event ) { - if ( touchToggleEnabled ) { - stateBefore = currentstate; - } - }) - .bind( "vclick", function( event ) { - if ( touchToggleEnabled ) { - - if ( $(event.target).closest( ignoreTargets ).length ) { - return; - } - - if ( !scrollTriggered ) { - $.mobile.fixedToolbars.toggle( stateBefore ); - stateBefore = null; - } - } - }) - .bind( "silentscroll", showEventCallback ); - - - // The below checks first for a $(document).scrollTop() value, and if zero, binds scroll events to $(window) instead. - // If the scrollTop value is actually zero, both will return zero anyway. - // - // Works with $(document), not $(window) : Opera Mobile (WinMO phone; kinda broken anyway) - // Works with $(window), not $(document) : IE 7/8 - // Works with either $(window) or $(document) : Chrome, FF 3.6/4, Android 1.6/2.1, iOS - // Needs work either way : BB5, Opera Mobile (iOS) - - ( ( $document.scrollTop() === 0 ) ? $window : $document ) - .bind( "scrollstart", function( event ) { - - scrollTriggered = true; - - if ( stateBefore === null ) { - stateBefore = currentstate; - } - - // We only enter autoHideMode if the headers/footers are in - // an overlay state or the show timer was started. If the - // show timer is set, clear it so the headers/footers don't - // show up until after we're done scrolling. - var isOverlayState = stateBefore == "overlay"; - - autoHideMode = isOverlayState || !!delayTimer; - - if ( autoHideMode ) { - $.mobile.fixedToolbars.clearShowTimer(); - - if ( isOverlayState ) { - $.mobile.fixedToolbars.hide( true ); - } - } - }) - .bind( "scrollstop", function( event ) { - - if ( $( event.target ).closest( ignoreTargets ).length ) { - return; - } - - scrollTriggered = false; - - if ( autoHideMode ) { - $.mobile.fixedToolbars.startShowTimer(); - autoHideMode = false; - } - stateBefore = null; - }); - - $window.bind( "resize updatelayout", showEventCallback ); - }); - - // 1. Before page is shown, check for duplicate footer - // 2. After page is shown, append footer to new page - $( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) { - var page = $( event.target ), - footer = page.find( ":jqmData(role='footer')" ), - id = footer.data( "id" ), - prevPage = ui.prevPage, - prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ), - prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id; - - if ( id && prevFooterMatches ) { - stickyFooter = footer; - setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) ); - } - }) - .delegate( ".ui-page", "pageshow", function( event, ui ) { - var $this = $( this ); - - if ( stickyFooter && stickyFooter.length ) { - setTimeout(function() { - setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) ); - stickyFooter = null; - }, 500); - } - - $.mobile.fixedToolbars.show( true, this ); - }); - - // When a collapsible is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635) - $( document ).delegate( ".ui-collapsible-contain", "collapse expand", showEventCallback ); - - // element.getBoundingClientRect() is broken in iOS 3.2.1 on the iPad. The - // coordinates inside of the rect it returns don't have the page scroll position - // factored out of it like the other platforms do. To get around this, - // we'll just calculate the top offset the old fashioned way until core has - // a chance to figure out how to handle this situation. - // - // TODO: We'll need to get rid of getOffsetTop() once a fix gets folded into core. - - function getOffsetTop( ele ) { - var top = 0, - op, body; - - if ( ele ) { - body = document.body; - op = ele.offsetParent; - top = ele.offsetTop; - - while ( ele && ele != body ) { - top += ele.scrollTop || 0; - - if ( ele == op ) { - top += op.offsetTop; - op = ele.offsetParent; - } - - ele = ele.parentNode; - } - } - return top; - } - - function setTop( el ) { - var fromTop = $(window).scrollTop(), - thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead. - thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )), - screenHeight = window.innerHeight, - thisHeight = el.outerHeight(), - useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length, - relval; - - if ( el.is( ".ui-header-fixed" ) ) { - - relval = fromTop - thisTop + thisCSStop; - - if ( relval < thisTop ) { - relval = 0; - } - - return el.css( "top", useRelative ? relval : fromTop ); - } else { - // relval = -1 * (thisTop - (fromTop + screenHeight) + thisCSStop + thisHeight); - // if ( relval > thisTop ) { relval = 0; } - relval = fromTop + screenHeight - thisHeight - (thisTop - thisCSStop ); - - return el.css( "top", useRelative ? relval : fromTop + screenHeight - thisHeight ); - } - } - - // Exposed methods - return { - - show: function( immediately, page ) { - - $.mobile.fixedToolbars.clearShowTimer(); - - currentstate = "overlay"; - - var $ap = page ? $( page ) : - ( $.mobile.activePage ? $.mobile.activePage : - $( ".ui-page-active" ) ); - - return $ap.children( toolbarSelector ).each(function() { - - var el = $( this ), - fromTop = $( window ).scrollTop(), - // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead. - thisTop = getOffsetTop( el[ 0 ] ), - screenHeight = window.innerHeight, - thisHeight = el.outerHeight(), - alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) || - ( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight ); - - // Add state class - el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" ); - - if ( !alreadyVisible && !immediately ) { - el.animationComplete(function() { - el.removeClass( "in" ); - }).addClass( "in" ); - } - setTop(el); - }); - }, - - hide: function( immediately ) { - - currentstate = "inline"; - - var $ap = $.mobile.activePage ? $.mobile.activePage : - $( ".ui-page-active" ); - - return $ap.children( toolbarSelector ).each(function() { - - var el = $(this), - thisCSStop = el.css( "top" ), - classes; - - thisCSStop = thisCSStop == "auto" ? 0 : - parseFloat(thisCSStop); - - // Add state class - el.addClass( "ui-fixed-inline" ).removeClass( "ui-fixed-overlay" ); - - if ( thisCSStop < 0 || ( el.is( ".ui-header-fixed" ) && thisCSStop !== 0 ) ) { - - if ( immediately ) { - el.css( "top", 0); - } else { - - if ( el.css( "top" ) !== "auto" && parseFloat( el.css( "top" ) ) !== 0 ) { - - classes = "out reverse"; - - el.animationComplete(function() { - el.removeClass( classes ).css( "top", 0 ); - }).addClass( classes ); - } - } - } - }); - }, - - startShowTimer: function() { - - $.mobile.fixedToolbars.clearShowTimer(); - - var args = [].slice.call( arguments ); - - delayTimer = setTimeout(function() { - delayTimer = undefined; - $.mobile.fixedToolbars.show.apply( null, args ); - }, showDelay); - }, - - clearShowTimer: function() { - if ( delayTimer ) { - clearTimeout( delayTimer ); - } - delayTimer = undefined; - }, - - toggle: function( from ) { - if ( from ) { - currentstate = from; - } - return ( currentstate === "overlay" ) ? $.mobile.fixedToolbars.hide() : - $.mobile.fixedToolbars.show(); - }, - - setTouchToggleEnabled: function( enabled ) { - touchToggleEnabled = enabled; - } - }; -})(); - -//auto self-init widgets -$( document ).bind( "pagecreate create", function( event ) { - - if ( $( ":jqmData(position='fixed')", event.target ).length ) { - - $( event.target ).each(function() { - - if ( !$.support.scrollTop || ( $.support.touchOverflow && $.mobile.touchOverflowEnabled ) ) { - return this; - } - - var $this = $( this ); - - if ( $this.jqmData( "fullscreen" ) ) { - $this.addClass( "ui-page-fullscreen" ); - } - - // Should be slidedown - $this.find( slideDownSelector ).addClass( slideDownClass ); - - // Should be slideup - $this.find( slideUpSelector ).addClass( slideUpClass ); - - }) - - } -}); - -})( jQuery ); diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js deleted file mode 100644 index 5ba2c0d9..00000000 --- a/js/jquery.mobile.fixHeaderFooter.native.js +++ /dev/null @@ -1,60 +0,0 @@ -/* -* "fixHeaderFooter" native plugin - Behavior for "fixed" headers,footers, and scrolling inner content -*/ - -(function( $, undefined ) { - -// Enable touch overflow scrolling when it's natively supported -$.mobile.touchOverflowEnabled = false; - -// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately -$.mobile.touchOverflowZoomEnabled = 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 ); From 69324e31f08d23bfc4800dbf650f6046faf91b28 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 16 Dec 2011 18:56:30 +0700 Subject: [PATCH 002/388] removed disablezoom function from init --- js/jquery.mobile.init.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index 3934816d..4543a683 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -98,24 +98,6 @@ } } }); - - // This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled - function disableZoom() { - var cont = "user-scalable=no", - meta = $( "meta[name='viewport']" ); - - if( meta.length ){ - meta.attr( "content", meta.attr( "content" ) + ", " + cont ); - } - else{ - $( "head" ).prepend( "", { "name": "viewport", "content": cont } ); - } - } - - // if touch-overflow is enabled, disable user scaling, as it creates usability issues - if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){ - disableZoom(); - } // initialize events now, after mobileinit has occurred $.mobile._registerInternalEvents(); From 103f409c475711858b2e625e15c0c4f601f058e7 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 16 Dec 2011 19:17:54 +0700 Subject: [PATCH 003/388] added new script and associated styles for handling "fixed" toolbars using native support for CSS position: fixed, where possible. Non-supporting platforms will fall back to inline positioning, either by gracefully degrading on their own or by opting them out through a blacklist (fixed positioning detection's got issues...). unit tests and api documentation coming next, but for the most part, the API is the same as before. --- Makefile | 3 +- css/structure/jquery.mobile.core.css | 41 +-- css/structure/jquery.mobile.headerfooter.css | 37 ++- docs/toolbars/bars-fullscreen.html | 6 +- js/index.php | 3 +- js/jquery.mobile.fixedToolbar.js | 270 +++++++++++++++++++ 6 files changed, 309 insertions(+), 51 deletions(-) create mode 100644 js/jquery.mobile.fixedToolbar.js diff --git a/Makefile b/Makefile index 2f1ef776..daa31976 100644 --- a/Makefile +++ b/Makefile @@ -31,8 +31,7 @@ JSFILES = js/jquery.ui.widget.js \ js/jquery.mobile.buttonMarkup.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.fixedtoolbar.js \ js/jquery.mobile.init.js # The files to include when compiling the CSS files diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index dc39cedf..a0c39b4b 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -71,8 +71,7 @@ div.ui-mobile-viewport { overflow-x: hidden; } .ui-bar { font-size: 16px; margin: 0; } .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; } -.ui-header, .ui-footer { display: block; } -.ui-page .ui-header, .ui-page .ui-footer { position: relative; } +.ui-header, .ui-footer { position: relative; border-left-width: 0; border-right-width: 0; } .ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; } .ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; } .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 90px .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; } @@ -80,44 +79,6 @@ div.ui-mobile-viewport { overflow-x: hidden; } /*content area*/ .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; } diff --git a/css/structure/jquery.mobile.headerfooter.css b/css/structure/jquery.mobile.headerfooter.css index 1d52c3d9..d1aba3cc 100644 --- a/css/structure/jquery.mobile.headerfooter.css +++ b/css/structure/jquery.mobile.headerfooter.css @@ -1,8 +1,37 @@ /* fixed page header & footer configuration */ -.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; } -.ui-header-fixed, .ui-footer-fixed { +.ui-header, +.ui-footer { + overflow: hidden; + width: 100%; +} +.ui-header-fixed, +.ui-footer-fixed { + left: 0; + right: 0; + position: fixed; z-index: 1000; -webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */ } -.ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; } -.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; } +.ui-header-fixed { + top: 0; +} +.ui-footer-fixed { + bottom: 0; +} +.ui-header-fullscreen, +.ui-footer-fullscreen { + opacity: .9; +} +.ui-page-header-fixed { + padding-top: 2.5em; +} +.ui-page-footer-fixed { + padding-bottom: 3em; +} +.ui-page-fullscreen .ui-content { + padding: 0; +} +.ui-fixed-hidden, +.ui-footer-duplicate { + display: none; +} \ No newline at end of file diff --git a/docs/toolbars/bars-fullscreen.html b/docs/toolbars/bars-fullscreen.html index 305b221c..1396c8e9 100755 --- a/docs/toolbars/bars-fullscreen.html +++ b/docs/toolbars/bars-fullscreen.html @@ -13,9 +13,9 @@ -
+
-
+

Fullscreen fixed header

Home
@@ -57,7 +57,7 @@
-