From 821df23a7d9822af112229d3205e88a8782bad6c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 28 Dec 2011 11:59:48 +0700 Subject: [PATCH 001/137] Much of the scripting in nav.js's transitionPages function was tied to the animation sequence for our css3transitionhandler. For example, the order was, scroll to top, run transitions, then scroll to the remembered location of the new page (there's more involved, but that's the gist of it). If we want to expand beyond this sequence, much of that scripting needs to move to the css3transitionhandler itself, and also to our "none" transition handler, which comes with nav model. This commit moves all that logic into the transition handlers, and should provide a better starting point for adding different transition sequences, such as fade-out, scroll, fade-in. In the process of making this change, the reFocus function was made public as $.mobile.focusPage. --- js/jquery.mobile.navigation.js | 93 +++++++++++++++------------------- js/jquery.mobile.transition.js | 50 +++++++++++++++++- 2 files changed, 91 insertions(+), 52 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 24c34331..954a295a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -376,7 +376,7 @@ define( [ //direct focus to the page title, or otherwise first focusable element - function reFocus( page ) { + $.mobile.focusPage = function ( page ) { var pageTitle = page.find( ".ui-title:eq(0)" ); if( pageTitle.length ) { @@ -494,44 +494,13 @@ define( [ //function for transitioning between two existing pages function transitionPages( toPage, fromPage, transition, reverse ) { - //get current scroll distance - var active = $.mobile.urlHistory.getActive(), - touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, - toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - screenHeight = getScreenHeight(); - - // 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 } ); } - 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. //call the handler immediately to kick-off the transition. @@ -539,22 +508,9 @@ define( [ promise = th( transition, reverse, toPage, fromPage ); promise.done(function() { - //reset toPage height back - if( !touchOverflow ){ - toPage.height( "" ); - } - - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $.mobile.silentScroll( toScroll ); - } //trigger show/hide events if( fromPage ) { - if( !touchOverflow ){ - fromPage.height( "" ); - } - fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } ); } @@ -626,13 +582,48 @@ define( [ $.mobile.dialogHashKey = dialogHashKey; //default non-animation transition handler - $.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) { - if ( $fromPage ) { - $fromPage.removeClass( $.mobile.activePageClass ); + $.mobile.noneTransitionHandler = function( name, reverse, $to, $from ) { + var active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); } - $toPage.addClass( $.mobile.activePageClass ); - return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise(); + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + //clear page loader + $.mobile.hidePageLoadingMsg(); + + if ( $from ) { + $from.removeClass( $.mobile.activePageClass ); + } + + $to.addClass( $.mobile.activePageClass ); + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } + + return $.Deferred().resolve( name, reverse, $to, $from ).promise(); }; //default handler for unknown transitions @@ -1174,7 +1165,7 @@ define( [ // itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility) // despite visibility: hidden addresses issue #2965 // https://github.com/jquery/jquery-mobile/issues/2965 - reFocus( toPage ); + $.mobile.focusPage( toPage ); releasePageTransitionLock(); diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 906a0dbb..b5e91577 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -17,7 +17,11 @@ function css3TransitionHandler( name, reverse, $to, $from ) { var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", + active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), doneFunc = function() { $to.add( $from ).removeClass( "out in reverse " + name ); @@ -27,6 +31,23 @@ function css3TransitionHandler( name, reverse, $to, $from ) { } $to.parent().removeClass( viewportClass ); + + //reset $to height back + if( !touchOverflow ){ + $to.height( "" ); + } + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + } + + //trigger show/hide events + if( $from ) { + if( !touchOverflow ){ + $from.height( "" ); + } + } deferred.resolve( name, reverse, $to, $from ); }; @@ -34,10 +55,37 @@ function css3TransitionHandler( name, reverse, $to, $from ) { $to.animationComplete( doneFunc ); $to.parent().addClass( viewportClass ); + + // Scroll to top, hide addr bar + window.scrollTo( 0, $.mobile.defaultHomeScroll ); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); + } + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + //clear page loader + $.mobile.hidePageLoadingMsg(); + if ( $from ) { $from.addClass( name + " out" + reverseClass ); } + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); return deferred.promise(); @@ -48,7 +96,7 @@ $.mobile.css3TransitionHandler = css3TransitionHandler; // If the default transition handler is the 'none' handler, replace it with our handler. if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = css3TransitionHandler; + //$.mobile.defaultTransitionHandler = css3TransitionHandler; } })( jQuery, this ); From 195d4dc47ed31b66fd42cb55b9f91dfcadbab12c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 28 Dec 2011 12:00:08 +0700 Subject: [PATCH 002/137] removed commented out line --- js/jquery.mobile.transition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index b5e91577..97f29818 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -96,7 +96,7 @@ $.mobile.css3TransitionHandler = css3TransitionHandler; // If the default transition handler is the 'none' handler, replace it with our handler. if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - //$.mobile.defaultTransitionHandler = css3TransitionHandler; + $.mobile.defaultTransitionHandler = css3TransitionHandler; } })( jQuery, this ); From bcf8746d7711abb61f542115b6098c482889e961 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:44:01 +0700 Subject: [PATCH 003/137] gif-based loader animation --- css/themes/default/images/ajax-loader.gif | Bin 0 -> 8787 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/themes/default/images/ajax-loader.gif diff --git a/css/themes/default/images/ajax-loader.gif b/css/themes/default/images/ajax-loader.gif new file mode 100644 index 0000000000000000000000000000000000000000..4f008cf13b627a122eec64f616517b84036b733f GIT binary patch literal 8787 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 b-x|nZ@bQuAm3!&D+2m2~@9#gM`0w?<1S*Sy literal 0 HcmV?d00001 From 597e6bd07af1db4ae3b4f3414398239d8137597b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:44:16 +0700 Subject: [PATCH 004/137] added fade out in transition handler --- js/jquery.mobile.transition.fadeoutin.js | 91 ++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 js/jquery.mobile.transition.fadeoutin.js diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js new file mode 100644 index 00000000..6cd395f4 --- /dev/null +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -0,0 +1,91 @@ +/* +* "transitions" plugin - Page change tranistions +*/ + +(function( $, window, undefined ) { + +function fadeOutInTransitionHandler( name, reverse, $to, $from ) { + + var deferred = new $.Deferred(), + reverseClass = reverse ? " reverse" : "", + active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), + doneOut = function() { + + if ( $from && $from[ 0 ] !== $to[ 0 ] ) { + $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); + if( !touchOverflow ){ + $from.height( "" ); + } + } + + $to.animationComplete( doneIn ); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); + } + + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + $to.height( "" ); + } + + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); + + }, + + doneIn = function() { + + $to.removeClass( "out in reverse " + name ); + + $to.parent().removeClass( viewportClass ); + + deferred.resolve( name, reverse, $to, $from ); + }; + + $to.parent().addClass( viewportClass ); + + //clear page loader + $.mobile.hidePageLoadingMsg(); + + if ( $from ) { + $from.animationComplete( doneOut ); + $from.addClass( name + " out" + reverseClass ); + } + else { + doneOut(); + } + + return deferred.promise(); +} + +// Make our transition handler public. +$.mobile.fadeOutInTransitionHandler = fadeOutInTransitionHandler; + +// If the default transition handler is the 'none' handler, replace it with our handler. +if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { + $.mobile.defaultTransitionHandler = fadeOutInTransitionHandler; +} + +})( jQuery, this ); From f5dd6fb8eade2eb458d6664dcd3c8a93bb7651c7 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:45:19 +0700 Subject: [PATCH 005/137] added fade out in transition handler file --- js/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/js/index.php b/js/index.php index 4a4a2e06..d6758cd1 100644 --- a/js/index.php +++ b/js/index.php @@ -18,6 +18,7 @@ $files = array( 'jquery.mobile.navigation.js', 'jquery.mobile.navigation.pushstate.js', 'jquery.mobile.transition.js', + 'jquery.mobile.transition.fadeoutin.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', From 0bfacce751b5847babb6783e8ce1907ebf2d2d0f Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:45:39 +0700 Subject: [PATCH 006/137] hard-set opacity for "out" to prevent blinks --- css/structure/jquery.mobile.transitions.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 503baa32..eab76756 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -134,6 +134,7 @@ Built by David Kaneda and maintained by Jonathan Stark. .fade.out { z-index: 0; + opacity: 0; -webkit-animation-name: fadeout; } From b820de1afce39c45bbadd9051dc535d19bd9729b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:45:58 +0700 Subject: [PATCH 007/137] removed code to set css3transitionhandler as the default --- js/jquery.mobile.transition.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 97f29818..315c1159 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -94,11 +94,6 @@ function css3TransitionHandler( name, reverse, $to, $from ) { // Make our transition handler public. $.mobile.css3TransitionHandler = css3TransitionHandler; -// If the default transition handler is the 'none' handler, replace it with our handler. -if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = css3TransitionHandler; -} - })( jQuery, this ); //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); }); From 9a410f57fa8c07aee048f95a19243ce404be2462 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:46:10 +0700 Subject: [PATCH 008/137] gif loader styles --- css/themes/default/jquery.mobile.theme.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index 9512a38b..14e17d05 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -991,13 +991,8 @@ a.ui-link-inherit { /* loading icon */ .ui-icon-loading { - background-image: url(images/ajax-loader.png); - width: 40px; - height: 40px; - -moz-border-radius: 20px; - -webkit-border-radius: 20px; - border-radius: 20px; - background-size: 35px 35px; + background: url(images/ajax-loader.gif); + background-size: 36px 36px; } From 12c5da43a805d5b82331ecc7ed817c599536218d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:46:20 +0700 Subject: [PATCH 009/137] gif loader style updates --- css/structure/jquery.mobile.core.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 957760df..c45f8c39 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -63,12 +63,10 @@ div.ui-mobile-viewport { overflow-x: hidden; } } /* loading screen */ -.ui-loading .ui-mobile-viewport { overflow: hidden !important; } .ui-loading .ui-loader { display: block; } -.ui-loading .ui-page { overflow: hidden; } -.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } -.ui-loader h1 { font-size: 15px; text-align: center; } -.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; } +.ui-loader { background: #000; opacity: .2; display: none; z-index: 9999999; position: fixed; width: 36px; height: 36px; top: 50%; margin-left: -18px;margin-top: -18px; left: 50%; padding: 3px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } +.ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } +.ui-loader .ui-icon { display: block; margin: 0; width: 36px; height: 36px; background-color: transparent; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } From c1cdb0a1a8675f5166c625b9a63ea9753cbdf44d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:48:12 +0700 Subject: [PATCH 010/137] added loader test page for local testing --- docs/about/testingloader.php | 78 ++++++++++++++++++++++++++++++++++++ index.html | 1 + 2 files changed, 79 insertions(+) create mode 100644 docs/about/testingloader.php diff --git a/docs/about/testingloader.php b/docs/about/testingloader.php new file mode 100644 index 00000000..ea845f74 --- /dev/null +++ b/docs/about/testingloader.php @@ -0,0 +1,78 @@ + + + + + + + jQuery Mobile Docs - Testing the loader + + + + + + + + + +
+ +
+

Testing the loader

+ Home +
+ +
+ + +
+ +

Loader tested - wheee!

+ +

Content goes here, etc.Test the loader from a link instead!

+ +

Or a button

+ + +

Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

+ +

Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

+ + +
+ +
+ +
+ +

More in this section

+ + +
+
+ + +
+ +
+

© 2011 The jQuery Project

+
+ + + +
+ + + + + diff --git a/index.html b/index.html index b69777f3..1493973c 100755 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@
  • Features
  • Accessibility
  • Supported platforms
    • +
  • Test this for loader
    • From dac79b5cfa10605a6a77bfc01c4b07ec8e746e02 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 28 Dec 2011 23:44:29 -0500 Subject: [PATCH 011/137] Loader design tweaks Removed the spin class from the loader container, tweaked opacity and added slight glow to bottom of loader, increased padding. Downloaded a fresh loader image. --- css/structure/jquery.mobile.core.css | 4 ++-- css/themes/default/images/ajax-loader-old.gif | Bin 0 -> 8787 bytes css/themes/default/jquery.mobile.theme.css | 2 +- js/jquery.mobile.init.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 css/themes/default/images/ajax-loader-old.gif diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index c45f8c39..2be156f3 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -64,9 +64,9 @@ div.ui-mobile-viewport { overflow-x: hidden; } /* loading screen */ .ui-loading .ui-loader { display: block; } -.ui-loader { background: #000; opacity: .2; display: none; z-index: 9999999; position: fixed; width: 36px; height: 36px; top: 50%; margin-left: -18px;margin-top: -18px; left: 50%; padding: 3px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } +.ui-loader { background: #000; opacity: .16; display: none; z-index: 9999999; position: fixed; width: 32px; height: 32px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 7px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } .ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } -.ui-loader .ui-icon { display: block; margin: 0; width: 36px; height: 36px; background-color: transparent; } +.ui-loader .ui-icon { display: block; margin: 0; width: 32px; height: 32px; background-color: transparent; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } diff --git a/css/themes/default/images/ajax-loader-old.gif b/css/themes/default/images/ajax-loader-old.gif new file mode 100644 index 0000000000000000000000000000000000000000..4f008cf13b627a122eec64f616517b84036b733f GIT binary patch literal 8787 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 b-x|nZ@bQuAm3!&D+2m2~@9#gM`0w?<1S*Sy literal 0 HcmV?d00001 diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index 14e17d05..c09247a2 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -992,7 +992,7 @@ a.ui-link-inherit { /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); - background-size: 36px 36px; + background-size: 32px 32px; } diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index 25aed840..86be388c 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -30,7 +30,7 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig // loading div which appears during Ajax requests // will not appear if $.mobile.loadingMessage is false - var $loader = $( "

    " ); + var $loader = $( "

    " ); $.extend($.mobile, { // turn on/off page loading message. From 8c4bc2fad893264cd7bee62f4dcb2ee2a6b81c55 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Thu, 29 Dec 2011 00:09:03 -0500 Subject: [PATCH 012/137] More loader tweaks --- css/structure/jquery.mobile.core.css | 2 +- css/themes/default/images/ajax-loader.gif | Bin 8787 -> 8787 bytes 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 2be156f3..a45c0bdd 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -66,7 +66,7 @@ div.ui-mobile-viewport { overflow-x: hidden; } .ui-loading .ui-loader { display: block; } .ui-loader { background: #000; opacity: .16; display: none; z-index: 9999999; position: fixed; width: 32px; height: 32px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 7px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } .ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } -.ui-loader .ui-icon { display: block; margin: 0; width: 32px; height: 32px; background-color: transparent; } +.ui-loader .ui-icon { display: block; margin: 0; width: 32px; height: 32px; background-color: #000; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } diff --git a/css/themes/default/images/ajax-loader.gif b/css/themes/default/images/ajax-loader.gif index 4f008cf13b627a122eec64f616517b84036b733f..31aba146a5f20f8d415345d4056a91ee3a3fcaf2 100644 GIT binary patch delta 278 zcmccYa@l3Vxrq-IL>br_7#I})bNji51UowhxEkphFf(puW(;R!0ZK7$j$;Z2vzRt- zWex?im^bsWMu1r?o3q%`z%16ySJ>0REVj+|oMB)V`{tQkQD7Fw=I`98U>4`*1l~L_ zi)-^GK8RlK%{BrMS)R>H1w+8Hyqo_D#erFTo8v_wV*H!8iza}@1U5^HL-Y!6Zk2$D z2~FmelitiCWd~Lv4CW7&tMd From 19941f8e9f4d44a93af52040a3d19e7d2e7a5d37 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 19:52:26 +0700 Subject: [PATCH 013/137] removed unused image --- css/themes/default/images/ajax-loader-old.gif | Bin 8787 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 css/themes/default/images/ajax-loader-old.gif diff --git a/css/themes/default/images/ajax-loader-old.gif b/css/themes/default/images/ajax-loader-old.gif deleted file mode 100644 index 4f008cf13b627a122eec64f616517b84036b733f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8787 zcmaKyc~n#9+V+#|ojqkI*_j6jBq78Q0)$Zx$9ggyp6hw; z``Qx|CdB?NQ%;dnextm<{`~XL^z`(iqN1<9`l_?D)9dvfK76>Xt!>@9bq^?IF7r&gPTEM~D-2!haPG^JAc?%g}`4PU>0{oj}U|8I&v8Ohf4G_%oWjR@5PRPwpv zf28KToXq^3Z26~)@^j^xi!%$Cev+9Ty6EEtpHLKUK@=u`rF;KR?;%j2KMhVtd;?Cb zn{>{&H12CBU6~(OmpH9$lSaOD!VfRd&O4!aQ-0j)5Od__wMDY=UE3LFCxp)Y2g1Ry zPpyR1N2;uZBpw@IB;8QPS!ZJiL^Vz;G6EN6y)YjzhMe`j}G3)VEPk;F-)WX ziXf+lIrLXz@b(4nE94#0b=*Av0tJ63*2f!qF0Cn^snf@I5gr=fX74Y|m_T!_N0rVO zjdoWFUpuYC{;LvNBk`pgdd-|UHK=nOvlpYay7M6Q17P**6L()P zlpA{6YP$@%rlwto^SP71Gf~X}+_fD|H8)x)Q$)n21@68*o5xoC{nlr>4}5Y8J`MC) zmChE4zRXiXI0>2q!eu5NED%&y!II5(l(lWAfYW4Wuy-<9OyAvhKJ(CiTW1=Lec}Xi zbe=DC8e+@5X?QR6U4JS96N7D+Q{W$dSoXbzJ_Mh=ZKmIW=_8{Q{FcMaoR_(0arD}4gPdEf#`Rdijks$<@OhPS~*p6WCmqLgc=V@>)RxY(3`*zH= zNt*b0rIuo?6b3JTG5gkFj)uqRni;z_t$k2(IjPamU0@yj$VjUBuk`BBub&YAx=;@B zn)Bmk+e3Y>s-vWJr&>8##$A}Eu4=-@hoxQj27k6_c%rg{MIqdi_m+5()!i30U=21YiChvZ$t(M^D(g6_(^+QlOT@hM>u8dF?R==6L z(9!M^8cdvrR-P@v;K4!Jl@jzCeECKWNTVubL57^?bW4`OijB7RVOTdeU%5^GXAE=V<& zvb5}(vFD7&GCDV@t-50HQLzP8&u(ku0DWsDQMno4Rx5xCy0CbU{a0EkzVktnu24Ev zGj(sqxm_LdreCh_nO=8(MW#v1Xr55Br>-?iJA81(g%9afgFvSjY*gXu-nRTMc~oe| z+65A6NmTind~N(VEo)*yFm`m}F0N7UmpFcH{;9mHA6u4vygZPdHD3m^AvW`~#h*`F zHrE}f#L~EMLc$srjFM>OI5WVpJa#NQm4`sYHVBc;#~}9@Fij4hIsp5vG^1n2vg+xl zE^Iz+_Cw}#;Pa<|%R>|zeR!CEb4cPpjAV{nmOp%W@2AtaSd1h;I}N^hbLjQ_f8jXy z-M`<3$G>1V)`AGnqR*~I5D&-jU`edSWg>vBDf~`DQ`s7I40eD*3n;_!u?xgrqY>gN ztTS`p=5>37N~+E_km&*^GSuniQO07=WPZ@hj`9OnJyRM((>n^O=002+McGDe7M`|?lv)a06p>b>>qxI1&duqqS*?D^R$1Ws7BgvI<~xl<7s zD3zph%PU}LG9C4kNaQ$M>T+$AmY8`UOy3HNW!Vx!84$2BkX>K~=p8-4r)E@nd?Pp& zLHw^Eo6dZ9Y-3Ce*W@P_UqXDZrJ{jj#zO7G!ysogjU`Q$fUjQdeP+6u3g94)KmAvW z)oySZX^W`OE%9D`@kvh_*HTWQS@`AIs$#KzMA;W4_?zi%d`!l|zwfm3;Ld#f|#loC{6q}FH1yNgkgcCpGDPPJlfx-4*ICjUvLG~9l1 z;O70^m@v%VUvG5xB?&?axbK3Aa<_)yu7o|Ch+^=IHzkA3VPyVAVLwMd=$t1MpB6f7r83*%^U9X z6v=}zV>rI=xn?=X2eA`}x-#8f3LziolrPs~#Z2%ewLG>lV0-1tIMzrbh29^h5_lq( z=dGd9WpO(D&D6vsE<-iYp5VDln?@BDyyO>~Xf|F@1}?jAG7a!U({-{e+M;w}SPRXT zd4KU*k^bNw+W}fIE{<&Jw7H_8Tcnrhax$kuvyZ0D>)KA8zPI|@)xW-@6NP$Ccj;#6 zuQxa_n_FJoZPVEJ8=LdB39DHd{ev$Yv3?#BwM4aT==9-Pi>7Oef3=y6^6@1Hi{9oI z28%=lNg6LGC|tDq^SLgmlqE@{;UFk3M?g6slK?2ZuG+^(N>@yR8yfByDMd zQp^~NZrX(9nK_4)inE}Zck*IKkHyzVNeW)-!8o^W$*x#AeTwf9ibnpEpS=676+Rmf z7{Fx!zx^hB+8KB@Fpwj|Vl_5>(7YP>k9Pt}eN(2d+k&WcR~y|{E+fgHx}VvMaK(Y~ zjswf5_wWKO$sP74Yk~qx-jq?%W5EPrt@Ry0_nfJ;Hl!9Evo#gd2b9{G{G614zN-pd z<&8qpo738KbG=T*{JyD_@V0{O;qJa4_GK?>i(VBSa{C*~U{7Fk!TvkP3tyc_X@6-K zV7>voIO;U2{!5k;{g0BTFYS*bgx7ZGR4-Lxw}G8Ya>sFtUpQ!4#D?;5MMwV`qh-PN zOfCmS3qD=2YAO3mfdG9I5oIkC+l9dnA+WA2z{0N`=yg zt6}{1ThK37iSl`XLM{Z6db!s$K8P@B_%3g;nWvfUtLrgjmUEz_-273~8H>^{QKLJc zpq~|LGgjA5%jzxX2HN&ybl*RdsKD$`lFl{vRV9eWQa#s$imjK#dOH}{_-(IS6t+7P#r^kgG7$=;}-I`>BnmWJG)`fTRmdH0elf~R9c#|mFPxpU#j^V{+d z&>e@>}xC(P6s()7O}q zj1@dUF6Vs8PnhBF{{^(c1Ijcg_h@>rX<0Df{HGfjrL*ernn zPBHT&66~~Z`wEI5#1tG8@XetNRa3L@tOa8q7l{PzYVIh5apMOIM?ktUMXM3MpgnwK z@fS&dmvTeYfBX^hx-z@}NTwSWgv{3Db8MAVrV>-yj5YTwOReIi24P` zShqNBJF9t<#xNgQyEj14;4HciBFglYi#6c|x_!-N!$?<(kUAWMemtTtI1*oc$_X(1 zlDaxbk^Z$8gSyxnkZR5>j5yQAx2LFhlWElMkk#A`i>_OwPUZB{O;s9Sj9zWfMdic- zks812WuTOvDGB!zX4;JI zvq0p6{tm<(P(zi*>})4Gci|h&{H4T!CiU8FQKlY#v%zy^&Q^2YPe?A zZhA8J`X5;YawS{0vryL4rZlk)oK!4(IUU4=v)Uvrz5IV9Z9OZioxJ= zd9+oi(*e_A{}M~E_CRP*d1x8~Mf~9tuy}?Ai?c01)L}X;dy$4qCF&m;i`~BIk7TIk!n+08LG**wCQu-C zLJC)?az`5PQ_DHK@V2fO#=anlHoeR6atEKT3d`-XN1UhBNuy$OXLyVknNoZ}m1TEd znaV^8uygX}#}LQQLyIL$mTS!YGt~$w?SbvUgji;{$vk!|npi9DUI|jS(xS@e%xZQy zw~HJdOschQEiWrtV>@z$;tTm1J+6)&!M zVOLh{IQ6PAYE})EWtvtvav+{oBVg64@4dPi@y+aI1Vnj!G!Bcmu-?H{ORijH1PAbNa%-PcIo~QYcqz@+X&M8knjVD2m z9LhVIB+Qx6Eh#i$t|;l=ed*I{?N?JYCu%IFObI*lfN070#}*{a0_4k4J|`=cgjQIT zn=$hfcODG!&R5t%t~-_-Mp& zvq~)XdiPkjov~nEe}6jX$`$k){dV~e^HtZ$rGVW%4#Gdf=%WJp&jf)yn~%L9;Mb`# z=#M|%r9}MxZ@2>~g8_yx;YH)9n~hcQNl7bR35G^f#aACKnI<nA)4{h_KXWLAgzPKZ0NF$o~F$Hpny+gXs2U2oFv_uwsgcTo1U=I z+S#uW4lK%_PL&X^Ir8I7KiKLp4D-g0wPPIz>1NRXQL1xD_3 z91gc6uWV{Xd=dA{4RRFa(CW(~N&9Zv!RI(qSJX3VciEK8j_5h~)KTeg=;ivHP6xpk{Z>-qcSO2ys z#ZEmz^(qit6J;2cJ6UX@bYz6+c9(N@JOf4>=er>$H7|GIK(QNUP$slFnu;gE=$o9_ z#-;@qFd|B5GRTW*lj$7sIMT0MN*N-Xc9pGp(KSM0DIc((C+_X*%Sjk>&A6{(+0M?xdAn>ph79x2J~hWjOq=}W zLJ8&z0KBq!p)|(&4IDsNH&0ki9@S9n>v_B#J5jW>EsfER@_jqz`tBq3U3(;ji=F^M z$#Z7 z+`4W^o&}`rnCP$4zg^H>##FR@T)*l~4?vqUcCvn9WG_?$#+IMwf`55N*0B~H+_L;! zwsN69qdj5H_+8)3T*)Xj%|BGP_{>UmQ-^5M!@NW1FK$ViIqP_mM%1w7aH~zoTQym? zOfBRxirtg6g}e%xdd;LzS`EgiokYUN8a3OjYDpsiaCcZ`zHI=u*TNuy%YjZa_Xy|I zF%$O`+Uuood(ZW$Q2u4K55vLhoIdpWb-xM1H4Ji~28tzC5qk}a{PGLUEEqc`aKHih zBmY8fn-pVSzC7BM9cyc}Q}I0>yGHSirGoRi4UaX{jJQ5Gsb}ZLDti&&;ih~8rAcYU zt4i~cQN8B^;e*>KH42~{g#E~lqtmIL8h}}1eXpkULQH9BY{omoPss>@Rp)k&7|*WL zuUGH$=KquoqT3L;Ts-?mWIgN(&T8(NmeEQ)MBh}3nrq)Pe1s?5!|wnR@`_4)cy3H~PQz~%VpmMRm!dKrf*>>-|Rrgy8u;3cRK_#Y4Auw{9=2_>sNZqQ|P z(U=^4z0K2G!V#L64md^)G`1un_TP@iM=qK_K@b_L)AT88lrilmM!ZHh%*MqXZ#k+8 z6}hbDoa=m?vI~-5*E#G9c~mf}{3Pk)DLXTc6w8BhsHIqTaR18c^dJv7?m*Irp>e_0 zZG3)*^+ReV8Sl(HM`j!Ynzb=i5v@~$^AfjrADq}O5(1)yx#Fj1Vt6@ErmsDd$D5zG zY0sff#(Z7ys?d-xOzu#1P$@-Qq1I^DXsb!g5SttgF9@Y=<}w0FXn_)YD5G5_Q?|Bp z?3(?OBdh~~pq-0-he_xyt!%r5bZ}o8r$wP?o5nlucb>r|XA%JlVw$h~{(T_@8NQ?Z zc8Uz;JV!AT!)JKF$2XbW|IzDv-Pz2nLCZgnzID%3db2CtfdjEjH!ytUz}l znEr)Rr&D?YSEYtWR|ad>24d;awOVbcCm_%_o$NkZ)N2A1f%0^1P>{Nl9k@qY(zslq+^bM3C8=u0ph~6T`Y12@z^N*UOma_6L42e?NjWwy_UswM#E|+t zk_wt9bNzt-_+lEf_~PHEcN_Nx%E*++I{=_c8lKzb=ysi9%c|okHFBe8JqMzwOwHXT zm_Qm;_<}+$r^@0qVuOo9h48o{zC(2ym|V-6CKVTr7^q-8XGmq}-r-R(Sh4YM?HW(> zgpFAlSaB-ga5y5N&15ua`; zk**Cn8>02=k%}a#T6Jj9buCvqBo)w8)k3vqR7(LxmjtXiQ`8JDjmJ})$oTIui@jr# zP@-b|$(@Zi*_uplh>drpDvhpUToRXGZ?Jf&@MEsjFhH%Ku>2t0(bni5r(}>eo!j`3 ziU<6eW1}dIAfbRAHs}3#*ak?MhFC`VMtdWzJiRtc<+@@Z_8IHIB`yQEuom(Prh+!Ylm*ewl@dc4r%ktFR$?*UwSkc7NsIg{(LbwB=IDughQR*I$Nyt9ijHxriRE87IAI28t$# z6y?rX7Q|<}boo{@B>f6+GP9(6M6Onfs6!;!vcFTn5@7o& z>?17JzE)V!%PcR7vP6O3G1>kVQG=90fW?Gv%8DZI3`RxLAofj2T%_0Exntr#xCwWs zg@^zAbA*X;lYsv?n5xUTUTFO0ZZ!hE`z^R}Z$+h0I}K^)xXYbvjLkPx+s|=C>ZC45 zlTumr5j|?L#pyB><0>$zT28{I3Qg+<=ek-I=##_Ugn|pB3l%MB-3d#d%q%-%!Wefn5tihf;pe*F=goU)AujvBbv@ zdx@?8ngmHcn}m}oNSP9KPa?guROth(nFOx)spixraz)bh(q#<^z}Jn^;++<;XupWq zn?NSiELK&gnSJ<3?J*PcFq65*OD5E8Hs&=!7Y4rb(xDsBw#)brP~l|&A}4yV>@w}g z2QXe2H3@w}r(gOkGU}fRTsr*HA9<9MeX--Gf8HgC|6p>1!Rc2g)`Q&MG1)X1?SI5v zio%65gwgUIajf}VaR~#}HO)2QmCosOF35;8=xteb5rra)71t;9kZb(u?9Bw|M< zFFRSB2HGfz&cJdiz|YU9zV2ZN#+vgE=nXl=p!r+B&ntTNRtchq5wRntd+H8Zyso|@ b-x|nZ@bQuAm3!&D+2m2~@9#gM`0w?<1S*Sy From 41bc37990a96caf9915f60dccc9bd7e9267562a7 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 21:30:31 +0700 Subject: [PATCH 014/137] for now, removed any difference between framework transition defaults and the docs. We might want to bring this back and recommend it though - I'm not sure how easy it'll be to bring it in standard with the ability to configure. --- docs/_assets/js/jqm-docs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_assets/js/jqm-docs.js b/docs/_assets/js/jqm-docs.js index 9cdfca68..a1184376 100644 --- a/docs/_assets/js/jqm-docs.js +++ b/docs/_assets/js/jqm-docs.js @@ -52,8 +52,8 @@ function setDefaultTransition(){ $(function(){ - setDefaultTransition(); - $( window ).bind( "throttledresize", setDefaultTransition ); + //setDefaultTransition(); + //$( window ).bind( "throttledresize", setDefaultTransition ); }); From 0a3be2ecf349cd6fac9f5ecbedfaa65a334fa1e4 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 21:30:42 +0700 Subject: [PATCH 015/137] default transition type goes to fade --- js/jquery.mobile.core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 33b31272..1a76143d 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -38,7 +38,7 @@ define( [ "jquery.mobile.widget" ], function() { linkBindingEnabled: true, // Set default page transition - 'none' for no transitions - defaultPageTransition: "slide", + defaultPageTransition: "fade", // Minimum scroll distance that will be remembered when returning to a page minScrollBack: 250, From 47bf7a9d38f1d0d2f282421f8ec6f27179861824 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 00:21:22 +0700 Subject: [PATCH 016/137] an attempt at simplification. not there yet... --- js/jquery.mobile.transition.fadeoutin.js | 36 ++++++++++-------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 6cd395f4..c5fe9428 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -12,26 +12,19 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - screenHeight = $.mobile.getScreenHeight(), + preTransClass = "ui-mobile-pre-transition", doneOut = function() { - if ( $from && $from[ 0 ] !== $to[ 0 ] ) { - $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); - if( !touchOverflow ){ - $from.height( "" ); - } + if ( $from ) { + $from.removeClass( $.mobile.activePageClass + " " + preTransClass + " out in reverse " + name ); } - $to.animationComplete( doneIn ); - - if( !touchOverflow){ - $to.height( screenHeight + toScroll ); - } + $to + .animationComplete( doneIn ) + .addClass( preTransClass ); if( touchOverflow && toScroll ){ - $to.addClass( "ui-mobile-pre-transition" ); - // Send focus to page as it is now display: block $.mobile.focusPage( $to ); @@ -44,22 +37,22 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { } } - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. if( !touchOverflow ){ $.mobile.silentScroll( toScroll ); - $to.height( "" ); } - + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); }, doneIn = function() { - $to.removeClass( "out in reverse " + name ); - - $to.parent().removeClass( viewportClass ); + $to + .removeClass( "out in reverse " + name + " " + preTransClass ) + .parent().removeClass( viewportClass ); + + $.mobile.silentScroll( toScroll ); deferred.resolve( name, reverse, $to, $from ); }; @@ -70,8 +63,9 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $.mobile.hidePageLoadingMsg(); if ( $from ) { - $from.animationComplete( doneOut ); - $from.addClass( name + " out" + reverseClass ); + $from + .animationComplete( doneOut ) + .addClass( name + " out" + reverseClass ); } else { doneOut(); From 41d63056c64c6acffd8b8f2a13fc8b673dc82310 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Thu, 29 Dec 2011 17:28:12 -0500 Subject: [PATCH 017/137] All new loader hotness Created a new loader that has a circle baked into the animated gif so there's less of a chance of artifacts in bad browsers. The edge is chunky because it's a gif but then added 1px of padding to the loader parent and that the border-radius can smooth this out in iOS. Actually looks sharp in Android too because of interaction effects between these rounded corners. Loader spin is faster and more compressed (16 colors). Removed the body-a class on the spinner since we're just setting this to flat black = one less gradient to render. --- css/structure/jquery.mobile.core.css | 4 ++-- css/themes/default/images/ajax-loader.gif | Bin 8787 -> 7825 bytes css/themes/default/jquery.mobile.theme.css | 2 +- js/jquery.mobile.init.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index a45c0bdd..00587f3d 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -64,9 +64,9 @@ div.ui-mobile-viewport { overflow-x: hidden; } /* loading screen */ .ui-loading .ui-loader { display: block; } -.ui-loader { background: #000; opacity: .16; display: none; z-index: 9999999; position: fixed; width: 32px; height: 32px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 7px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } +.ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } .ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } -.ui-loader .ui-icon { display: block; margin: 0; width: 32px; height: 32px; background-color: #000; } +.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } diff --git a/css/themes/default/images/ajax-loader.gif b/css/themes/default/images/ajax-loader.gif index 31aba146a5f20f8d415345d4056a91ee3a3fcaf2..a50a3f950754305634f1526349684ab6d922fc80 100644 GIT binary patch literal 7825 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 LHfkt@K(PD|$sIz( literal 8787 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 diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index c09247a2..fe3adf8c 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -992,7 +992,7 @@ a.ui-link-inherit { /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); - background-size: 32px 32px; + background-size: 46px 46px; } diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index 86be388c..0ab5fad3 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -30,7 +30,7 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig // loading div which appears during Ajax requests // will not appear if $.mobile.loadingMessage is false - var $loader = $( "

    " ); + var $loader = $( "

    " ); $.extend($.mobile, { // turn on/off page loading message. From 0a267cea64d5e785ad0b385c392f3b5aa677a92c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 13:02:10 +0700 Subject: [PATCH 018/137] position loader fixed by default, then check if it's positioned correctly and if not, switch to an absolute positioned scheme, with updates on scroll (or scrollstop in iOS 4). --- css/structure/jquery.mobile.core.css | 2 +- js/jquery.mobile.init.js | 41 ++++++++++++++++++++++------ 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 00587f3d..3a0007c9 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -67,7 +67,7 @@ div.ui-mobile-viewport { overflow-x: hidden; } .ui-loader { background-color: #000; opacity: .18; display: none; z-index: 9999999; position: fixed; width: 46px; height: 46px; top: 50%; box-shadow: 0 1px 1px -1px #fff; margin-left: -18px; margin-top: -18px; left: 50%; padding: 1px; border:0; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; } .ui-loader h1 { font-size: 0px; width: 0; height: 0; overflow: hidden; } .ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; } - +.ui-loader-fakefix { position: absolute; } /*fouc*/ .ui-mobile-rendering > * { visibility: hidden; } diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index 0ab5fad3..53e45ad3 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -31,10 +31,33 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig // loading div which appears during Ajax requests // will not appear if $.mobile.loadingMessage is false var $loader = $( "

    " ); + + // For non-fixed supportin browsers. Position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top + function fakeFixLoader(){ + $loader + .css({ + top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 || + activeBtn.length && activeBtn.offset().top || 100 + }); + } + + // check position of loader to see if it appears to be "fixed" to center + // if not, use abs positioning + function checkLoaderPosition(){ + if( $loader.offset().top < $window.scrollTop() ){ + $loader.addClass( "ui-loader-fakefix" ); + fakeFixLoader(); + $window + .unbind( "scroll", checkLoaderPosition ) + .bind( "scroll", fakeFixLoader ); + } + } + $.extend($.mobile, { // turn on/off page loading message. showPageLoadingMsg: function() { + $html.addClass( "ui-loading" ); if ( $.mobile.loadingMessage ) { var activeBtn = $( "." + $.mobile.activeBtnClass ).first(); @@ -42,19 +65,21 @@ define( [ "jquery.mobile.core", "jquery.mobile.navigation", "jquery.mobile.navig .find( "h1" ) .text( $.mobile.loadingMessage ) .end() - .appendTo( $.mobile.pageContainer ) - // position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top - .css({ - top: $.support.scrollTop && $window.scrollTop() + $window.height() / 2 || - activeBtn.length && activeBtn.offset().top || 100 - }); + .appendTo( $.mobile.pageContainer ); + + checkLoaderPosition(); + $window.bind( "scroll", checkLoaderPosition ); } - - $html.addClass( "ui-loading" ); }, hidePageLoadingMsg: function() { $html.removeClass( "ui-loading" ); + + if( $.mobile.loadingMessage ){ + $loader.removeClass( "ui-loader-fakefix" ); + } + + $( window ).unbind( "scroll", fakeFixLoader ); }, // find and enhance the pages in the dom and transition to the first page. From c72595c4628fe5bf21947a67de08be1c24db406b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:22:31 +0700 Subject: [PATCH 019/137] don't scroll at the end. scroll halfway through instead --- js/jquery.mobile.transition.fadeoutin.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index c5fe9428..50007e41 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -5,13 +5,12 @@ (function( $, window, undefined ) { function fadeOutInTransitionHandler( name, reverse, $to, $from ) { - + var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, preTransClass = "ui-mobile-pre-transition", doneOut = function() { @@ -48,17 +47,11 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { doneIn = function() { - $to - .removeClass( "out in reverse " + name + " " + preTransClass ) - .parent().removeClass( viewportClass ); + $to.removeClass( "out in reverse " + name + " " + preTransClass ); - $.mobile.silentScroll( toScroll ); - deferred.resolve( name, reverse, $to, $from ); }; - $to.parent().addClass( viewportClass ); - //clear page loader $.mobile.hidePageLoadingMsg(); From 1bae528dc0e80a51944a560d7fb45f95318fe0bc Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:23:41 +0700 Subject: [PATCH 020/137] no need for pre-transition class --- css/structure/jquery.mobile.core.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css index 3a0007c9..6a94a822 100644 --- a/css/structure/jquery.mobile.core.css +++ b/css/structure/jquery.mobile.core.css @@ -42,9 +42,6 @@ div.ui-mobile-viewport { overflow-x: hidden; } /* some level of transform keeps elements from blinking out of visibility on iOS */ -webkit-transform: rotateY(0); } -.ui-page.ui-mobile-pre-transition { - display: block; -} .ui-mobile-touch-overflow.ui-native-fixed .ui-content .ui-listview { margin-top: 0; } From 955a37f1e884a3a58af63d0f6c09b32da9756370 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:24:07 +0700 Subject: [PATCH 021/137] add back viewport transitioning class --- js/jquery.mobile.transition.fadeoutin.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 50007e41..7237148f 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,6 +11,7 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, preTransClass = "ui-mobile-pre-transition", doneOut = function() { @@ -47,11 +48,15 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { doneIn = function() { - $to.removeClass( "out in reverse " + name + " " + preTransClass ); + $to + .removeClass( "out in reverse " + name + " " + preTransClass ) + .parent().removeClass( viewportClass ); deferred.resolve( name, reverse, $to, $from ); }; + $to.parent().addClass( viewportClass ); + //clear page loader $.mobile.hidePageLoadingMsg(); From 445d11c704fc0cd01266ab33434787573decba02 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:43:12 +0700 Subject: [PATCH 022/137] don't use pre transitioning class, or viewport class for this transition handler. Instead, activate page early, then scroll to desired spot, and transition in. In order to make this work, I had to add an argument to the end of the promise, letting navigation know that the page is already focused, so don't do it over again. This should make for a smooth transition from point-a to point-b, without a visible scroll jump. Needs testing! --- js/jquery.mobile.navigation.js | 6 ++++-- js/jquery.mobile.transition.fadeoutin.js | 21 +++++++++------------ 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 954a295a..44841930 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -1150,7 +1150,7 @@ define( [ settings.reverse = settings.reverse || historyDir < 0; transitionPages( toPage, fromPage, settings.transition, settings.reverse ) - .done(function() { + .done(function( name, reverse, $to, $from, alreadyFocused ) { removeActiveLinkClass(); //if there's a duplicateCachedPage, remove it from the DOM now that it's hidden @@ -1165,7 +1165,9 @@ define( [ // itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility) // despite visibility: hidden addresses issue #2965 // https://github.com/jquery/jquery-mobile/issues/2965 - $.mobile.focusPage( toPage ); + if( !alreadyFocused ){ + $.mobile.focusPage( toPage ); + } releasePageTransitionLock(); diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 7237148f..d53d34be 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,22 +11,21 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - preTransClass = "ui-mobile-pre-transition", + viewportClass = "viewport-" + name, doneOut = function() { if ( $from ) { - $from.removeClass( $.mobile.activePageClass + " " + preTransClass + " out in reverse " + name ); + $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); } $to .animationComplete( doneIn ) - .addClass( preTransClass ); + .addClass( $.mobile.activePageClass ); + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + if( touchOverflow && toScroll ){ - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); //set page's scrollTop to remembered distance if( $to.is( ".ui-native-fixed" ) ){ @@ -42,21 +41,19 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $.mobile.silentScroll( toScroll ); } - $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); + $to.addClass( name + " in" + reverseClass ); }, doneIn = function() { $to - .removeClass( "out in reverse " + name + " " + preTransClass ) + .removeClass( "out in reverse " + name ) .parent().removeClass( viewportClass ); - deferred.resolve( name, reverse, $to, $from ); + deferred.resolve( name, reverse, $to, $from, true ); }; - $to.parent().addClass( viewportClass ); - //clear page loader $.mobile.hidePageLoadingMsg(); From cbcc523e64a03a5199313c22b0ef278790968807 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Fri, 30 Dec 2011 08:47:00 -0500 Subject: [PATCH 023/137] Faster spinner animation Was 4ms per frame, now 3ms. --- css/themes/default/images/ajax-loader.gif | Bin 7825 -> 7825 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/css/themes/default/images/ajax-loader.gif b/css/themes/default/images/ajax-loader.gif index a50a3f950754305634f1526349684ab6d922fc80..fd1a189c21fed1c7ba00c4bb4fad407bd6d1e5f9 100644 GIT binary patch delta 238 zcmbPeJJEJR2qW`k2TuKsEwYRd*5-?hQZS}8vpkHM#i9jc9$|$u<=BluqCp&Q8JRab zaE3sX7;Qezr3_&jZkFLuhcFE`m+-2=n5X%`_Pyl41Gd#*^EUywRjxu{rhu5i=BdI; zARPi?#+zS@r~sLp1;ipjB3a_E7?~$YTW#)_kO1<5tjYZn9GhQBiUN6?q{BgKB4nO` M4cFhCBdf{?0J*q1yZ`_I delta 238 zcmbPeJJEJR2qVj62TuKsEwYRd*5-?hQZS}8vpkHM#i9jc9$|$u<=BluqCp&Q8Cf)Bpeg From 10a65c9d782c0ea055df940717d3024a6c8e04b6 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 22:33:50 +0700 Subject: [PATCH 024/137] brought back the height settings, and fixed a typo between addClass and removeClass --- js/jquery.mobile.transition.fadeoutin.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index d53d34be..e6b07f66 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,11 +11,14 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, doneOut = function() { if ( $from ) { - $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); + $from + .removeClass( $.mobile.activePageClass + " out in reverse " + name ) + .height( "" ); } $to @@ -38,6 +41,8 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. if( !touchOverflow ){ + $to.height( screenHeight + toScroll ); + $.mobile.silentScroll( toScroll ); } @@ -49,16 +54,21 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $to .removeClass( "out in reverse " + name ) - .parent().removeClass( viewportClass ); + .parent().removeClass( viewportClass ) + .height( "" ); deferred.resolve( name, reverse, $to, $from, true ); }; + + $to + .parent().addClass( viewportClass ); //clear page loader $.mobile.hidePageLoadingMsg(); if ( $from ) { $from + .height( screenHeight + $(window ).scrollTop() ) .animationComplete( doneOut ) .addClass( name + " out" + reverseClass ); } From ae0ad6ff8a0def1b272a578e69708b60111d3494 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Fri, 30 Dec 2011 12:08:30 -0500 Subject: [PATCH 025/137] Shorter fade out (150ms) and fade in (300ms) for speedier transitions. --- css/structure/jquery.mobile.transitions.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index eab76756..d27ba033 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -2,7 +2,7 @@ -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-webkit-keyframes spin { @@ -135,12 +135,14 @@ Built by David Kaneda and maintained by Jonathan Stark. .fade.out { z-index: 0; opacity: 0; + -webkit-animation-duration: 150ms; -webkit-animation-name: fadeout; } .fade.in { opacity: 1; z-index: 10; + -webkit-animation-duration: 300ms; -webkit-animation-name: fadein; } From 71a84e8c6266001cec6aa07380bbf422edd41468 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Fri, 30 Dec 2011 13:02:57 -0500 Subject: [PATCH 026/137] Add -moz prefixes for initial cut at Firefox transition support --- css/structure/jquery.mobile.transitions.css | 140 +++++++++++++++++++- 1 file changed, 138 insertions(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index d27ba033..ec503719 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -4,11 +4,20 @@ -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; + -moz-transform: rotate(360deg); + -moz-animation-name: spin; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } +@-moz-keyframes spin { + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(360deg);} +} /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ Built by David Kaneda and maintained by Jonathan Stark. @@ -16,127 +25,192 @@ Built by David Kaneda and maintained by Jonathan Stark. .in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-in-out; + -moz-animation-duration: 350ms; } .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; + -moz-transform: translateX(-100%); + -moz-animation-name: slideouttoleft; } .slide.in { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromright; + -moz-transform: translateX(0); + -moz-animation-name: slideinfromright; } .slide.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: slideouttoright; + -moz-transform: translateX(100%); + -moz-animation-name: slideouttoright; } .slide.in.reverse { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromleft; + -moz-transform: translateX(0); + -moz-animation-name: slideinfromleft; } .slideup.out { -webkit-animation-name: dontmove; + -moz-animation-name: dontmove; z-index: 0; } .slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; z-index: 10; } .slideup.in.reverse { z-index: 0; -webkit-animation-name: dontmove; + -moz-animation-name: dontmove; } .slideup.out.reverse { - -webkit-transform: translateY(100%); z-index: 10; + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; } .slidedown.out { -webkit-animation-name: dontmove; + -moz-animation-name: dontmove; z-index: 0; } .slidedown.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; + -moz-transform: translateY(0); + -moz-animation-name: slideinfromtop; z-index: 10; } .slidedown.in.reverse { z-index: 0; -webkit-animation-name: dontmove; + -moz-animation-name: dontmove; } .slidedown.out.reverse { -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); z-index: 10; -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } +@-moz-keyframes slideinfromright { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(0); } +} @-webkit-keyframes slideinfromleft { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0); } } +@-moz-keyframes slideinfromleft { + from { -moz-transform: translateX(-100%); } + to { -moz-transform: translateX(0); } +} @-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } } +@-moz-keyframes slideouttoleft { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(-100%); } +} @-webkit-keyframes slideouttoright { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100%); } } +@-moz-keyframes slideouttoright { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(100%); } +} @-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } } +@-moz-keyframes slideinfromtop { + from { -moz-transform: translateY(-100%); } + to { -moz-transform: translateY(0); } +} @-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } +} @-webkit-keyframes slideouttobottom { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } } +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } +} @-webkit-keyframes slideouttotop { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-100%); } } +@-moz-keyframes slideouttotop { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(-100%); } +} + @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} .fade.out { z-index: 0; opacity: 0; -webkit-animation-duration: 150ms; -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; } .fade.in { @@ -144,6 +218,8 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 10; -webkit-animation-duration: 300ms; -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; } /* The properties in this rule are only necessary for the 'flip' transition. @@ -154,6 +230,7 @@ Built by David Kaneda and maintained by Jonathan Stark. */ .viewport-flip { -webkit-perspective: 1000; + -moz-perspective: 1000; position: absolute; } @@ -168,16 +245,23 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-duration: .65s; -webkit-backface-visibility:hidden; -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-animation-duration: .65s; + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ } .flip.out { -webkit-transform: rotateY(-180deg) scale(.8); -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; } .flip.in { -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromleft; + -moz-transform: rotateY(0) scale(1); + -moz-animation-name: flipinfromleft; } /* Shake it all about */ @@ -185,61 +269,93 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.out.reverse { -webkit-transform: rotateY(180deg) scale(.8); -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; } .flip.in.reverse { -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromright; + -moz-transform: rotateY(0) scale(1); + -moz-animation-name: flipinfromright; } @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } +@-moz-keyframes flipinfromright { + from { -moz-transform: rotateY(-180deg) scale(.8); } + to { -moz-transform: rotateY(0) scale(1); } +} @-webkit-keyframes flipinfromleft { from { -webkit-transform: rotateY(180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } } +@-moz-keyframes flipinfromleft { + from { -moz-transform: rotateY(180deg) scale(.8); } + to { -moz-transform: rotateY(0) scale(1); } +} @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(-180deg) scale(.8); } } +@-moz-keyframes flipouttoleft { + from { -moz-transform: rotateY(0) scale(1); } + to { -moz-transform: rotateY(-180deg) scale(.8); } +} @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(180deg) scale(.8); } } +@-moz-keyframes flipouttoright { + from { -moz-transform: rotateY(0) scale(1); } + to { -moz-transform: rotateY(180deg) scale(.8); } +} /* Hackish, but reliable. */ -@-webkit-keyframes dontmove { +@-webkit-keyframes dontmove + { + from { opacity: 1; } + to { opacity: 1; } +} +@-moz-keyframes dontmove + { from { opacity: 1; } to { opacity: 1; } } .pop { -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; } .pop.in { -webkit-transform: scale(1); + -moz-transform: scale(1); opacity: 1; -webkit-animation-name: popin; + -moz-animation-name: popin; z-index: 10; } .pop.in.reverse { z-index: 0; -webkit-animation-name: dontmove; + -moz-animation-name: dontmove; } .pop.out.reverse { -webkit-transform: scale(.2); + -moz-transform: scale(.2); opacity: 0; -webkit-animation-name: popout; + -moz-animation-name: popout; z-index: 10; } @@ -253,6 +369,16 @@ Built by David Kaneda and maintained by Jonathan Stark. opacity: 1; } } +@-moz-keyframes popin { + from { + -moz-transform: scale(.2); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} @-webkit-keyframes popout { from { @@ -263,4 +389,14 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-transform: scale(.2); opacity: 0; } +} +@-moz-keyframes popout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.2); + opacity: 0; + } } \ No newline at end of file From 9aea79e744d0142ea8680cba0047363dc7ab6c79 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 18:32:01 +0700 Subject: [PATCH 027/137] changed plugin name to outInTransitionHandler, as the sequence has nothing to do with "fade" specifically. --- js/jquery.mobile.transition.fadeoutin.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index e6b07f66..6755973a 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -4,7 +4,7 @@ (function( $, window, undefined ) { -function fadeOutInTransitionHandler( name, reverse, $to, $from ) { +function outInTransitionHandler( name, reverse, $to, $from ) { var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", @@ -80,11 +80,11 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { } // Make our transition handler public. -$.mobile.fadeOutInTransitionHandler = fadeOutInTransitionHandler; +$.mobile.outInTransitionHandler = outInTransitionHandler; // If the default transition handler is the 'none' handler, replace it with our handler. if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = fadeOutInTransitionHandler; + $.mobile.defaultTransitionHandler = outInTransitionHandler; } })( jQuery, this ); From 9afa2eaa5ec32aa1d37c49aecb9ad92240730210 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 18:33:09 +0700 Subject: [PATCH 028/137] changed filename --- ....transition.fadeoutin.js => jquery.mobile.transition.outin.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename js/{jquery.mobile.transition.fadeoutin.js => jquery.mobile.transition.outin.js} (100%) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.outin.js similarity index 100% rename from js/jquery.mobile.transition.fadeoutin.js rename to js/jquery.mobile.transition.outin.js From 594eb7b37c71d59f8df002dabdbb7716e7320a29 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 00:44:16 +0700 Subject: [PATCH 029/137] added fade out in transition handler --- js/jquery.mobile.transition.fadeoutin.js | 91 ++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 js/jquery.mobile.transition.fadeoutin.js diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js new file mode 100644 index 00000000..6cd395f4 --- /dev/null +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -0,0 +1,91 @@ +/* +* "transitions" plugin - Page change tranistions +*/ + +(function( $, window, undefined ) { + +function fadeOutInTransitionHandler( name, reverse, $to, $from ) { + + var deferred = new $.Deferred(), + reverseClass = reverse ? " reverse" : "", + active = $.mobile.urlHistory.getActive(), + touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, + toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), + doneOut = function() { + + if ( $from && $from[ 0 ] !== $to[ 0 ] ) { + $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); + if( !touchOverflow ){ + $from.height( "" ); + } + } + + $to.animationComplete( doneIn ); + + if( !touchOverflow){ + $to.height( screenHeight + toScroll ); + } + + if( touchOverflow && toScroll ){ + + $to.addClass( "ui-mobile-pre-transition" ); + + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); + } + } + + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $.mobile.silentScroll( toScroll ); + $to.height( "" ); + } + + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); + + }, + + doneIn = function() { + + $to.removeClass( "out in reverse " + name ); + + $to.parent().removeClass( viewportClass ); + + deferred.resolve( name, reverse, $to, $from ); + }; + + $to.parent().addClass( viewportClass ); + + //clear page loader + $.mobile.hidePageLoadingMsg(); + + if ( $from ) { + $from.animationComplete( doneOut ); + $from.addClass( name + " out" + reverseClass ); + } + else { + doneOut(); + } + + return deferred.promise(); +} + +// Make our transition handler public. +$.mobile.fadeOutInTransitionHandler = fadeOutInTransitionHandler; + +// If the default transition handler is the 'none' handler, replace it with our handler. +if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { + $.mobile.defaultTransitionHandler = fadeOutInTransitionHandler; +} + +})( jQuery, this ); From ac94b063b091c625255545f6f720bb4ea67173cb Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Wed, 28 Dec 2011 23:44:29 -0500 Subject: [PATCH 030/137] Loader design tweaks Removed the spin class from the loader container, tweaked opacity and added slight glow to bottom of loader, increased padding. Downloaded a fresh loader image. --- css/themes/default/images/ajax-loader-old.gif | Bin 0 -> 8787 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/themes/default/images/ajax-loader-old.gif diff --git a/css/themes/default/images/ajax-loader-old.gif b/css/themes/default/images/ajax-loader-old.gif new file mode 100644 index 0000000000000000000000000000000000000000..4f008cf13b627a122eec64f616517b84036b733f GIT binary patch literal 8787 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 b-x|nZ@bQuAm3!&D+2m2~@9#gM`0w?<1S*Sy literal 0 HcmV?d00001 From 80b5cad7b8664518f9f2ca34d11bf4a43f372701 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 29 Dec 2011 19:52:26 +0700 Subject: [PATCH 031/137] removed unused image --- css/themes/default/images/ajax-loader-old.gif | Bin 8787 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 css/themes/default/images/ajax-loader-old.gif diff --git a/css/themes/default/images/ajax-loader-old.gif b/css/themes/default/images/ajax-loader-old.gif deleted file mode 100644 index 4f008cf13b627a122eec64f616517b84036b733f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8787 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 b-x|nZ@bQuAm3!&D+2m2~@9#gM`0w?<1S*Sy From a73e04bf19609ea49af91717f833d0de0eb8ae01 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 00:21:22 +0700 Subject: [PATCH 032/137] an attempt at simplification. not there yet... --- js/jquery.mobile.transition.fadeoutin.js | 36 ++++++++++-------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 6cd395f4..c5fe9428 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -12,26 +12,19 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - screenHeight = $.mobile.getScreenHeight(), + preTransClass = "ui-mobile-pre-transition", doneOut = function() { - if ( $from && $from[ 0 ] !== $to[ 0 ] ) { - $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); - if( !touchOverflow ){ - $from.height( "" ); - } + if ( $from ) { + $from.removeClass( $.mobile.activePageClass + " " + preTransClass + " out in reverse " + name ); } - $to.animationComplete( doneIn ); - - if( !touchOverflow){ - $to.height( screenHeight + toScroll ); - } + $to + .animationComplete( doneIn ) + .addClass( preTransClass ); if( touchOverflow && toScroll ){ - $to.addClass( "ui-mobile-pre-transition" ); - // Send focus to page as it is now display: block $.mobile.focusPage( $to ); @@ -44,22 +37,22 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { } } - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. if( !touchOverflow ){ $.mobile.silentScroll( toScroll ); - $to.height( "" ); } - + $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); }, doneIn = function() { - $to.removeClass( "out in reverse " + name ); - - $to.parent().removeClass( viewportClass ); + $to + .removeClass( "out in reverse " + name + " " + preTransClass ) + .parent().removeClass( viewportClass ); + + $.mobile.silentScroll( toScroll ); deferred.resolve( name, reverse, $to, $from ); }; @@ -70,8 +63,9 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $.mobile.hidePageLoadingMsg(); if ( $from ) { - $from.animationComplete( doneOut ); - $from.addClass( name + " out" + reverseClass ); + $from + .animationComplete( doneOut ) + .addClass( name + " out" + reverseClass ); } else { doneOut(); From cb49d270066eaf34d15f7e37ab4c0baf3591812e Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:22:31 +0700 Subject: [PATCH 033/137] don't scroll at the end. scroll halfway through instead --- js/jquery.mobile.transition.fadeoutin.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index c5fe9428..50007e41 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -5,13 +5,12 @@ (function( $, window, undefined ) { function fadeOutInTransitionHandler( name, reverse, $to, $from ) { - + var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, preTransClass = "ui-mobile-pre-transition", doneOut = function() { @@ -48,17 +47,11 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { doneIn = function() { - $to - .removeClass( "out in reverse " + name + " " + preTransClass ) - .parent().removeClass( viewportClass ); + $to.removeClass( "out in reverse " + name + " " + preTransClass ); - $.mobile.silentScroll( toScroll ); - deferred.resolve( name, reverse, $to, $from ); }; - $to.parent().addClass( viewportClass ); - //clear page loader $.mobile.hidePageLoadingMsg(); From f46135b6fd94bc4358620403bbabf77e0ee899ee Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:24:07 +0700 Subject: [PATCH 034/137] add back viewport transitioning class --- js/jquery.mobile.transition.fadeoutin.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 50007e41..7237148f 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,6 +11,7 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, preTransClass = "ui-mobile-pre-transition", doneOut = function() { @@ -47,11 +48,15 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { doneIn = function() { - $to.removeClass( "out in reverse " + name + " " + preTransClass ); + $to + .removeClass( "out in reverse " + name + " " + preTransClass ) + .parent().removeClass( viewportClass ); deferred.resolve( name, reverse, $to, $from ); }; + $to.parent().addClass( viewportClass ); + //clear page loader $.mobile.hidePageLoadingMsg(); From cb151b5d9ad6f416c9eb8573824f86294d383dc5 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 14:43:12 +0700 Subject: [PATCH 035/137] don't use pre transitioning class, or viewport class for this transition handler. Instead, activate page early, then scroll to desired spot, and transition in. In order to make this work, I had to add an argument to the end of the promise, letting navigation know that the page is already focused, so don't do it over again. This should make for a smooth transition from point-a to point-b, without a visible scroll jump. Needs testing! --- js/jquery.mobile.transition.fadeoutin.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index 7237148f..d53d34be 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,22 +11,21 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - preTransClass = "ui-mobile-pre-transition", + viewportClass = "viewport-" + name, doneOut = function() { if ( $from ) { - $from.removeClass( $.mobile.activePageClass + " " + preTransClass + " out in reverse " + name ); + $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); } $to .animationComplete( doneIn ) - .addClass( preTransClass ); + .addClass( $.mobile.activePageClass ); + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + if( touchOverflow && toScroll ){ - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); //set page's scrollTop to remembered distance if( $to.is( ".ui-native-fixed" ) ){ @@ -42,21 +41,19 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $.mobile.silentScroll( toScroll ); } - $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); + $to.addClass( name + " in" + reverseClass ); }, doneIn = function() { $to - .removeClass( "out in reverse " + name + " " + preTransClass ) + .removeClass( "out in reverse " + name ) .parent().removeClass( viewportClass ); - deferred.resolve( name, reverse, $to, $from ); + deferred.resolve( name, reverse, $to, $from, true ); }; - $to.parent().addClass( viewportClass ); - //clear page loader $.mobile.hidePageLoadingMsg(); From d01da497981774dc0497d42b9ff5e5f2cea22647 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Fri, 30 Dec 2011 22:33:50 +0700 Subject: [PATCH 036/137] brought back the height settings, and fixed a typo between addClass and removeClass --- js/jquery.mobile.transition.fadeoutin.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index d53d34be..e6b07f66 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -11,11 +11,14 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "viewport-" + name, + screenHeight = $.mobile.getScreenHeight(), + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, doneOut = function() { if ( $from ) { - $from.removeClass( $.mobile.activePageClass + " out in reverse " + name ); + $from + .removeClass( $.mobile.activePageClass + " out in reverse " + name ) + .height( "" ); } $to @@ -38,6 +41,8 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. if( !touchOverflow ){ + $to.height( screenHeight + toScroll ); + $.mobile.silentScroll( toScroll ); } @@ -49,16 +54,21 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { $to .removeClass( "out in reverse " + name ) - .parent().removeClass( viewportClass ); + .parent().removeClass( viewportClass ) + .height( "" ); deferred.resolve( name, reverse, $to, $from, true ); }; + + $to + .parent().addClass( viewportClass ); //clear page loader $.mobile.hidePageLoadingMsg(); if ( $from ) { $from + .height( screenHeight + $(window ).scrollTop() ) .animationComplete( doneOut ) .addClass( name + " out" + reverseClass ); } From 42bcd90a4746931d0d3df3d020d7011d8e59ea6a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 18:32:01 +0700 Subject: [PATCH 037/137] changed plugin name to outInTransitionHandler, as the sequence has nothing to do with "fade" specifically. --- js/jquery.mobile.transition.fadeoutin.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js index e6b07f66..6755973a 100644 --- a/js/jquery.mobile.transition.fadeoutin.js +++ b/js/jquery.mobile.transition.fadeoutin.js @@ -4,7 +4,7 @@ (function( $, window, undefined ) { -function fadeOutInTransitionHandler( name, reverse, $to, $from ) { +function outInTransitionHandler( name, reverse, $to, $from ) { var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", @@ -80,11 +80,11 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) { } // Make our transition handler public. -$.mobile.fadeOutInTransitionHandler = fadeOutInTransitionHandler; +$.mobile.outInTransitionHandler = outInTransitionHandler; // If the default transition handler is the 'none' handler, replace it with our handler. if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = fadeOutInTransitionHandler; + $.mobile.defaultTransitionHandler = outInTransitionHandler; } })( jQuery, this ); From 86dfe99a1b5d63fd2dcd88055b53dc4eaf285a24 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 18:33:09 +0700 Subject: [PATCH 038/137] changed filename --- js/jquery.mobile.transition.fadeoutin.js | 90 ------------------------ 1 file changed, 90 deletions(-) delete mode 100644 js/jquery.mobile.transition.fadeoutin.js diff --git a/js/jquery.mobile.transition.fadeoutin.js b/js/jquery.mobile.transition.fadeoutin.js deleted file mode 100644 index 6755973a..00000000 --- a/js/jquery.mobile.transition.fadeoutin.js +++ /dev/null @@ -1,90 +0,0 @@ -/* -* "transitions" plugin - Page change tranistions -*/ - -(function( $, window, undefined ) { - -function outInTransitionHandler( name, reverse, $to, $from ) { - - var deferred = new $.Deferred(), - reverseClass = reverse ? " reverse" : "", - active = $.mobile.urlHistory.getActive(), - touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, - toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - screenHeight = $.mobile.getScreenHeight(), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - doneOut = function() { - - if ( $from ) { - $from - .removeClass( $.mobile.activePageClass + " out in reverse " + name ) - .height( "" ); - } - - $to - .animationComplete( doneIn ) - .addClass( $.mobile.activePageClass ); - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); - - if( touchOverflow && toScroll ){ - - //set page's scrollTop to remembered distance - if( $to.is( ".ui-native-fixed" ) ){ - $to.find( ".ui-content" ).scrollTop( toScroll ); - } - else{ - $to.scrollTop( toScroll ); - } - } - - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $to.height( screenHeight + toScroll ); - - $.mobile.silentScroll( toScroll ); - } - - $to.addClass( name + " in" + reverseClass ); - - }, - - doneIn = function() { - - $to - .removeClass( "out in reverse " + name ) - .parent().removeClass( viewportClass ) - .height( "" ); - - deferred.resolve( name, reverse, $to, $from, true ); - }; - - $to - .parent().addClass( viewportClass ); - - //clear page loader - $.mobile.hidePageLoadingMsg(); - - if ( $from ) { - $from - .height( screenHeight + $(window ).scrollTop() ) - .animationComplete( doneOut ) - .addClass( name + " out" + reverseClass ); - } - else { - doneOut(); - } - - return deferred.promise(); -} - -// Make our transition handler public. -$.mobile.outInTransitionHandler = outInTransitionHandler; - -// If the default transition handler is the 'none' handler, replace it with our handler. -if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = outInTransitionHandler; -} - -})( jQuery, this ); From 72fe72f772606a0f9855e41a1bfcbf5744c7f086 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 18:38:21 +0700 Subject: [PATCH 039/137] added new filename to make and combiner files --- js/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/index.php b/js/index.php index d6758cd1..c263e1c1 100644 --- a/js/index.php +++ b/js/index.php @@ -18,7 +18,7 @@ $files = array( 'jquery.mobile.navigation.js', 'jquery.mobile.navigation.pushstate.js', 'jquery.mobile.transition.js', - 'jquery.mobile.transition.fadeoutin.js', + 'jquery.mobile.transition.outin.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', From 770979698e971e382c12f25c02c9c30354a4a69a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 23:27:44 +0700 Subject: [PATCH 040/137] fixed up the pop out transition for outin handler --- css/structure/jquery.mobile.transitions.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index ec503719..d0522839 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -344,10 +344,18 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 10; } +.pop.out { + z-index: 0; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + +} + + .pop.in.reverse { z-index: 0; - -webkit-animation-name: dontmove; - -moz-animation-name: dontmove; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; } .pop.out.reverse { From 27f81a0ef0cd3a82afb3242b4502dea96f3366a1 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 23:52:02 +0700 Subject: [PATCH 041/137] updated the slide and flip handlers to use combo fade/slide/flip transitions --- css/structure/jquery.mobile.transitions.css | 46 ++++++++++++--------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index d0522839..df04c946 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -39,9 +39,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .slide.in { -webkit-transform: translateX(0); - -webkit-animation-name: slideinfromright; + -webkit-animation-name: fadein; -moz-transform: translateX(0); - -moz-animation-name: slideinfromright; + -moz-animation-name: fadein; } .slide.out.reverse { @@ -53,14 +53,14 @@ Built by David Kaneda and maintained by Jonathan Stark. .slide.in.reverse { -webkit-transform: translateX(0); - -webkit-animation-name: slideinfromleft; + -webkit-animation-name: fadein; -moz-transform: translateX(0); - -moz-animation-name: slideinfromleft; + -moz-animation-name: fadein; } .slideup.out { - -webkit-animation-name: dontmove; - -moz-animation-name: dontmove; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; z-index: 0; } @@ -74,8 +74,8 @@ Built by David Kaneda and maintained by Jonathan Stark. .slideup.in.reverse { z-index: 0; - -webkit-animation-name: dontmove; - -moz-animation-name: dontmove; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; } .slideup.out.reverse { @@ -87,8 +87,8 @@ Built by David Kaneda and maintained by Jonathan Stark. } .slidedown.out { - -webkit-animation-name: dontmove; - -moz-animation-name: dontmove; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; z-index: 0; } @@ -102,8 +102,8 @@ Built by David Kaneda and maintained by Jonathan Stark. .slidedown.in.reverse { z-index: 0; - -webkit-animation-name: dontmove; - -moz-animation-name: dontmove; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; } .slidedown.out.reverse { @@ -258,10 +258,13 @@ Built by David Kaneda and maintained by Jonathan Stark. } .flip.in { - -webkit-transform: rotateY(0) scale(1); - -webkit-animation-name: flipinfromleft; - -moz-transform: rotateY(0) scale(1); - -moz-animation-name: flipinfromleft; + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; + } /* Shake it all about */ @@ -274,10 +277,13 @@ Built by David Kaneda and maintained by Jonathan Stark. } .flip.in.reverse { - -webkit-transform: rotateY(0) scale(1); - -webkit-animation-name: flipinfromright; - -moz-transform: rotateY(0) scale(1); - -moz-animation-name: flipinfromright; + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; + } @-webkit-keyframes flipinfromright { From 44482cd79ca852b890c08879f5f47c50e27ebb74 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 2 Jan 2012 23:55:21 +0700 Subject: [PATCH 042/137] removed spin because we aren't using it no mo --- css/structure/jquery.mobile.transitions.css | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index df04c946..356a13f2 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -1,24 +1,3 @@ -.spin { - -webkit-transform: rotate(360deg); - -webkit-animation-name: spin; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - -moz-transform: rotate(360deg); - -moz-animation-name: spin; - -moz-animation-duration: 1s; - -moz-animation-iteration-count: infinite; - -moz-animation-timing-function: linear; -} -@-webkit-keyframes spin { - from {-webkit-transform: rotate(0deg);} - to {-webkit-transform: rotate(360deg);} -} -@-moz-keyframes spin { - from {-webkit-transform: rotate(0deg);} - to {-webkit-transform: rotate(360deg);} -} - /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ Built by David Kaneda and maintained by Jonathan Stark. */ From ba2da4dac73020832a0989f9227dcdd2bae67c93 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 3 Jan 2012 00:04:13 +0700 Subject: [PATCH 043/137] a little faster on the fades. needs cleanup later --- css/structure/jquery.mobile.transitions.css | 31 +++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 356a13f2..d75c707d 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -18,9 +18,12 @@ Built by David Kaneda and maintained by Jonathan Stark. .slide.in { -webkit-transform: translateX(0); - -webkit-animation-name: fadein; -moz-transform: translateX(0); + -webkit-animation-duration: 100ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 100ms; -moz-animation-name: fadein; + } .slide.out.reverse { @@ -40,6 +43,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .slideup.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + z-index: 0; } @@ -55,6 +61,9 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + } .slideup.out.reverse { @@ -68,6 +77,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .slidedown.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + z-index: 0; } @@ -83,6 +95,9 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + } .slidedown.out.reverse { @@ -239,9 +254,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.in { opacity: 1; z-index: 10; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 100ms; -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; + -moz-animation-duration: 100ms; -moz-animation-name: fadein; } @@ -258,9 +273,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.in.reverse { opacity: 1; z-index: 10; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 100ms; -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; + -moz-animation-duration: 100ms; -moz-animation-name: fadein; } @@ -333,6 +348,9 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + } @@ -341,6 +359,9 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; + } .pop.out.reverse { From 949b919abfc23c9bfdca1c1d9af37c84340488ac Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 3 Jan 2012 00:15:29 +0700 Subject: [PATCH 044/137] rolled that last one back. --- css/structure/jquery.mobile.transitions.css | 31 ++++----------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index d75c707d..356a13f2 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -18,12 +18,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .slide.in { -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -webkit-animation-duration: 100ms; -webkit-animation-name: fadein; - -moz-animation-duration: 100ms; + -moz-transform: translateX(0); -moz-animation-name: fadein; - } .slide.out.reverse { @@ -43,9 +40,6 @@ Built by David Kaneda and maintained by Jonathan Stark. .slideup.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - z-index: 0; } @@ -61,9 +55,6 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - } .slideup.out.reverse { @@ -77,9 +68,6 @@ Built by David Kaneda and maintained by Jonathan Stark. .slidedown.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - z-index: 0; } @@ -95,9 +83,6 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - } .slidedown.out.reverse { @@ -254,9 +239,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.in { opacity: 1; z-index: 10; - -webkit-animation-duration: 100ms; + -webkit-animation-duration: 300ms; -webkit-animation-name: fadein; - -moz-animation-duration: 100ms; + -moz-animation-duration: 300ms; -moz-animation-name: fadein; } @@ -273,9 +258,9 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.in.reverse { opacity: 1; z-index: 10; - -webkit-animation-duration: 100ms; + -webkit-animation-duration: 300ms; -webkit-animation-name: fadein; - -moz-animation-duration: 100ms; + -moz-animation-duration: 300ms; -moz-animation-name: fadein; } @@ -348,9 +333,6 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - } @@ -359,9 +341,6 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - } .pop.out.reverse { From 3b8e4cb8b6ba1e0b8c14098f1ae4e67ed18a266f Mon Sep 17 00:00:00 2001 From: toddparker Date: Mon, 2 Jan 2012 13:41:45 -0500 Subject: [PATCH 045/137] Broke out the global and in and out transition rules for asymmetric timing Also added duplicate buttons at the booth to test scroll position smoothness. --- css/structure/jquery.mobile.transitions.css | 28 +++++++++++++-------- docs/pages/page-transitions.html | 14 +++++++++++ 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 356a13f2..c8137536 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -1,11 +1,17 @@ /* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ Built by David Kaneda and maintained by Jonathan Stark. */ -.in, .out { - -webkit-animation-timing-function: ease-in-out; - -webkit-animation-duration: 350ms; - -moz-animation-timing-function: ease-in-out; - -moz-animation-duration: 350ms; +.in { + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 325ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 325ms; +} +.out { + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 250ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 225ms; } @@ -344,8 +350,8 @@ Built by David Kaneda and maintained by Jonathan Stark. } .pop.out.reverse { - -webkit-transform: scale(.2); - -moz-transform: scale(.2); + -webkit-transform: scale(0); + -moz-transform: scale(0); opacity: 0; -webkit-animation-name: popout; -moz-animation-name: popout; @@ -354,7 +360,7 @@ Built by David Kaneda and maintained by Jonathan Stark. @-webkit-keyframes popin { from { - -webkit-transform: scale(.2); + -webkit-transform: scale(0); opacity: 0; } to { @@ -364,7 +370,7 @@ Built by David Kaneda and maintained by Jonathan Stark. } @-moz-keyframes popin { from { - -moz-transform: scale(.2); + -moz-transform: scale(0); opacity: 0; } to { @@ -379,7 +385,7 @@ Built by David Kaneda and maintained by Jonathan Stark. opacity: 1; } to { - -webkit-transform: scale(.2); + -webkit-transform: scale(0); opacity: 0; } } @@ -389,7 +395,7 @@ Built by David Kaneda and maintained by Jonathan Stark. opacity: 1; } to { - -moz-transform: scale(.2); + -moz-transform: scale(0); opacity: 0; } } \ No newline at end of file diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 9e66b6f2..57dcfbb0 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -248,6 +248,20 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;

    Once you do this, your handler will be invoked any time a transition name is used but not found within the $.mobile.transitionHandlers dictionary.

    +

    Transitions and scroll position

    +

    One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.

    +
    +
    + slide + slideup + slidedown +
    +
    + pop + fade + flip* +
    +
    From 52c44937e789106100016d75d09c3fe3ac187a93 Mon Sep 17 00:00:00 2001 From: toddparker Date: Mon, 2 Jan 2012 13:57:30 -0500 Subject: [PATCH 046/137] Updated -moz out to match --- css/structure/jquery.mobile.transitions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index c8137536..a045c3d4 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -11,7 +11,7 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 250ms; -moz-animation-timing-function: ease-in; - -moz-animation-duration: 225ms; + -moz-animation-duration: 250ms; } From f80d855847d6ec37fca7d1066b628e731d47e77b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 16:23:26 +0700 Subject: [PATCH 047/137] Added a feature test for css 3d transforms, which will allow us to conditionally apply the flip transition (AKA cartwheel, where unsupported). --- js/jquery.mobile.support.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 681e0c19..affa8d6b 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -27,6 +27,12 @@ function propExists( prop ) { } } +// Thanks to Modernizr src for this test idea +function transform3dTest() { + var prop = "transform-3d"; + return $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + prop + "),(" + prop + ")" ); +} + // Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting ) function baseTagTest() { var fauxBase = location.protocol + "//" + location.host + location.pathname + "ui-dir/", @@ -76,6 +82,7 @@ $.extend( $.support, { mediaquery: $.mobile.media( "only all" ), cssPseudoElement: !!propExists( "content" ), touchOverflow: !!propExists( "overflowScrolling" ), + cssTransform3d: transform3dTest(), boxShadow: !!propExists( "boxShadow" ) && !bb, scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini, dynamicBaseTag: baseTagTest() From 0cafec13bd21a527cd82c118701c0a449b7872a8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 16:35:12 +0700 Subject: [PATCH 048/137] fixed a typo in the query --- js/jquery.mobile.support.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index affa8d6b..62e5311b 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -30,7 +30,7 @@ function propExists( prop ) { // Thanks to Modernizr src for this test idea function transform3dTest() { var prop = "transform-3d"; - return $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + prop + "),(" + prop + ")" ); + return $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" ); } // Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting ) From 965f7e2681220ee495824b288ae3898461019a52 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 16:49:31 +0700 Subject: [PATCH 049/137] add class for 3d transform support --- js/jquery.mobile.transition.outin.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/js/jquery.mobile.transition.outin.js b/js/jquery.mobile.transition.outin.js index 6755973a..eddc7a7e 100644 --- a/js/jquery.mobile.transition.outin.js +++ b/js/jquery.mobile.transition.outin.js @@ -87,4 +87,9 @@ if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { $.mobile.defaultTransitionHandler = outInTransitionHandler; } +// add class for where 3d transforms are supported, or not +if( $.support.cssTransform3d ){ + $( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-cssTransform3d" : "ui-unsupported-cssTransform3d" ); +} + })( jQuery, this ); From f72eb291f64932ce406edf7fa990b8b847bd5356 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 16:58:05 +0700 Subject: [PATCH 050/137] woops. add it whether it's supported or not :) --- js/jquery.mobile.transition.outin.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/jquery.mobile.transition.outin.js b/js/jquery.mobile.transition.outin.js index eddc7a7e..83b5bbf4 100644 --- a/js/jquery.mobile.transition.outin.js +++ b/js/jquery.mobile.transition.outin.js @@ -88,8 +88,6 @@ if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { } // add class for where 3d transforms are supported, or not -if( $.support.cssTransform3d ){ - $( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-cssTransform3d" : "ui-unsupported-cssTransform3d" ); -} +$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-cssTransform3d" : "ui-unsupported-cssTransform3d" ); })( jQuery, this ); From 5e0d37dfa887cea3e59afcb592e3a3b27bdbd83c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 17:31:00 +0700 Subject: [PATCH 051/137] for non-3d browsers, use fade instead of flip --- css/structure/jquery.mobile.transitions.css | 22 +++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index a045c3d4..8978cdd6 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -271,6 +271,28 @@ Built by David Kaneda and maintained by Jonathan Stark. } +/* for non-3d supporting browsers, use fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.ui-unsupported-csstransform3d .flip.in, +.ui-unsupported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + + @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } to { -webkit-transform: rotateY(0) scale(1); } From fd236692ea85e23d7da9eb0eb7fddaa332349c00 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 17:32:58 +0700 Subject: [PATCH 052/137] lowercased --- js/jquery.mobile.transition.outin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.transition.outin.js b/js/jquery.mobile.transition.outin.js index 83b5bbf4..6d07b0e7 100644 --- a/js/jquery.mobile.transition.outin.js +++ b/js/jquery.mobile.transition.outin.js @@ -88,6 +88,6 @@ if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { } // add class for where 3d transforms are supported, or not -$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-cssTransform3d" : "ui-unsupported-cssTransform3d" ); +$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" ); })( jQuery, this ); From c471857595997793235a423c90fc2d5ddfbe5b1c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 17:43:35 +0700 Subject: [PATCH 053/137] not needed, as flip already uses fade now in the "in" transition. --- css/structure/jquery.mobile.transitions.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 8978cdd6..193a94de 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -282,16 +282,6 @@ Built by David Kaneda and maintained by Jonathan Stark. -moz-animation-name: fadeout; } -.ui-unsupported-csstransform3d .flip.in, -.ui-unsupported-csstransform3d .flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(.8); } From 7d34652a07fc56a686cff1d89edb4147250b13dd Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 17:48:13 +0700 Subject: [PATCH 054/137] dontmove is no longer in use --- css/structure/jquery.mobile.transitions.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 193a94de..fb216761 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -268,7 +268,6 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-name: fadein; -moz-animation-duration: 300ms; -moz-animation-name: fadein; - } /* for non-3d supporting browsers, use fade */ @@ -320,18 +319,6 @@ Built by David Kaneda and maintained by Jonathan Stark. } -/* Hackish, but reliable. */ - -@-webkit-keyframes dontmove - { - from { opacity: 1; } - to { opacity: 1; } -} -@-moz-keyframes dontmove - { - from { opacity: 1; } - to { opacity: 1; } -} .pop { -webkit-transform-origin: 50% 50%; From f31b792096ac769aea81030dc1097f16f239ffcc Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 17:58:32 +0700 Subject: [PATCH 055/137] tweaked scale and duration of some flip and pop transitions --- css/structure/jquery.mobile.transitions.css | 49 ++++++++++----------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index fb216761..9213d2f3 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -245,11 +245,10 @@ Built by David Kaneda and maintained by Jonathan Stark. .flip.in { opacity: 1; z-index: 10; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 150ms; -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; + -moz-animation-duration: 150ms; -moz-animation-name: fadein; - } /* Shake it all about */ @@ -283,39 +282,39 @@ Built by David Kaneda and maintained by Jonathan Stark. @-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg) scale(.8); } - to { -webkit-transform: rotateY(0) scale(1); } + from { -webkit-transform: rotateY(-180deg); } + to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg) scale(.8); } - to { -moz-transform: rotateY(0) scale(1); } + from { -moz-transform: rotateY(-180deg); } + to { -moz-transform: rotateY(0); } } @-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg) scale(.8); } - to { -webkit-transform: rotateY(0) scale(1); } + from { -webkit-transform: rotateY(180deg); } + to { -webkit-transform: rotateY(0); } } @-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg) scale(.8); } - to { -moz-transform: rotateY(0) scale(1); } + from { -moz-transform: rotateY(180deg); } + to { -moz-transform: rotateY(0); } } @-webkit-keyframes flipouttoleft { - from { -webkit-transform: rotateY(0) scale(1); } - to { -webkit-transform: rotateY(-180deg) scale(.8); } + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-180deg); } } @-moz-keyframes flipouttoleft { - from { -moz-transform: rotateY(0) scale(1); } - to { -moz-transform: rotateY(-180deg) scale(.8); } + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-180deg); } } @-webkit-keyframes flipouttoright { - from { -webkit-transform: rotateY(0) scale(1); } - to { -webkit-transform: rotateY(180deg) scale(.8); } + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(180deg); } } @-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) scale(1); } - to { -moz-transform: rotateY(180deg) scale(.8); } + from { -moz-transform: rotateY(0) ; } + to { -moz-transform: rotateY(180deg) ; } } @@ -349,8 +348,8 @@ Built by David Kaneda and maintained by Jonathan Stark. } .pop.out.reverse { - -webkit-transform: scale(0); - -moz-transform: scale(0); + -webkit-transform: scale(.8); + -moz-transform: scale(.8); opacity: 0; -webkit-animation-name: popout; -moz-animation-name: popout; @@ -359,7 +358,7 @@ Built by David Kaneda and maintained by Jonathan Stark. @-webkit-keyframes popin { from { - -webkit-transform: scale(0); + -webkit-transform: scale(.8); opacity: 0; } to { @@ -369,7 +368,7 @@ Built by David Kaneda and maintained by Jonathan Stark. } @-moz-keyframes popin { from { - -moz-transform: scale(0); + -moz-transform: scale(.8); opacity: 0; } to { @@ -384,7 +383,7 @@ Built by David Kaneda and maintained by Jonathan Stark. opacity: 1; } to { - -webkit-transform: scale(0); + -webkit-transform: scale(.8); opacity: 0; } } @@ -394,7 +393,7 @@ Built by David Kaneda and maintained by Jonathan Stark. opacity: 1; } to { - -moz-transform: scale(0); + -moz-transform: scale(.8); opacity: 0; } } \ No newline at end of file From edfafbf5d77ba3ef898e807e9cfb4924afc37172 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:06:26 +0700 Subject: [PATCH 056/137] split transition CSS into separate files. --- css/structure/index.php | 4 + css/structure/jquery.mobile.transitions.css | 387 ----------------- .../jquery.mobile.transitions.fade.css | 77 ++++ .../jquery.mobile.transitions.flip.css | 382 +++++++++++++++++ .../jquery.mobile.transitions.pop.css | 382 +++++++++++++++++ .../jquery.mobile.transitions.slide.css | 399 ++++++++++++++++++ 6 files changed, 1244 insertions(+), 387 deletions(-) create mode 100644 css/structure/jquery.mobile.transitions.fade.css create mode 100644 css/structure/jquery.mobile.transitions.flip.css create mode 100644 css/structure/jquery.mobile.transitions.pop.css create mode 100644 css/structure/jquery.mobile.transitions.slide.css diff --git a/css/structure/index.php b/css/structure/index.php index ab08918d..3648b712 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -3,6 +3,10 @@ $files = array_merge($files, array( '../../../LICENSE-INFO.txt', '../../structure/jquery.mobile.core.css', '../../structure/jquery.mobile.transitions.css', + '../../structure/jquery.mobile.transitions.fade.css', + '../../structure/jquery.mobile.transitions.pop.css', + '../../structure/jquery.mobile.transitions.slide.css', + '../../structure/jquery.mobile.transitions.flip.css', '../../structure/jquery.mobile.grids.css', '../../structure/jquery.mobile.headerfooter.css', '../../structure/jquery.mobile.navbar.css', diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 9213d2f3..b4a4b258 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -1,6 +1,3 @@ -/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ -Built by David Kaneda and maintained by Jonathan Stark. -*/ .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 325ms; @@ -12,388 +9,4 @@ Built by David Kaneda and maintained by Jonathan Stark. -webkit-animation-duration: 250ms; -moz-animation-timing-function: ease-in; -moz-animation-duration: 250ms; -} - - -.slide.out { - -webkit-transform: translateX(-100%); - -webkit-animation-name: slideouttoleft; - -moz-transform: translateX(-100%); - -moz-animation-name: slideouttoleft; -} - -.slide.in { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slide.out.reverse { - -webkit-transform: translateX(100%); - -webkit-animation-name: slideouttoright; - -moz-transform: translateX(100%); - -moz-animation-name: slideouttoright; -} - -.slide.in.reverse { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slideup.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slideup.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfrombottom; - -moz-transform: translateY(0); - -moz-animation-name: slideinfrombottom; - z-index: 10; -} - -.slideup.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slideup.out.reverse { - z-index: 10; - -webkit-transform: translateY(100%); - -moz-transform: translateY(100%); - -webkit-animation-name: slideouttobottom; - -moz-animation-name: slideouttobottom; -} - -.slidedown.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slidedown.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfromtop; - -moz-transform: translateY(0); - -moz-animation-name: slideinfromtop; - z-index: 10; -} - -.slidedown.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slidedown.out.reverse { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - z-index: 10; - -webkit-animation-name: slideouttotop; - -moz-animation-name: slideouttotop; -} - -@-webkit-keyframes slideinfromright { - from { -webkit-transform: translateX(100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromright { - from { -moz-transform: translateX(100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideinfromleft { - from { -webkit-transform: translateX(-100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromleft { - from { -moz-transform: translateX(-100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideouttoleft { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(-100%); } -} -@-moz-keyframes slideouttoleft { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(-100%); } -} - -@-webkit-keyframes slideouttoright { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(100%); } -} -@-moz-keyframes slideouttoright { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(100%); } -} - -@-webkit-keyframes slideinfromtop { - from { -webkit-transform: translateY(-100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfromtop { - from { -moz-transform: translateY(-100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideinfrombottom { - from { -webkit-transform: translateY(100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfrombottom { - from { -moz-transform: translateY(100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideouttobottom { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(100%); } -} -@-moz-keyframes slideouttobottom { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(100%); } -} - -@-webkit-keyframes slideouttotop { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(-100%); } -} -@-moz-keyframes slideouttotop { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(-100%); } -} - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* The properties in this rule are only necessary for the 'flip' transition. - * We need specify the perspective to create a projection matrix. This will add - * some depth as the element flips. The depth number represents the distance of - * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate - * value. - */ -.viewport-flip { - -webkit-perspective: 1000; - -moz-perspective: 1000; - position: absolute; -} - -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - -.flip { - -webkit-animation-duration: .65s; - -webkit-backface-visibility:hidden; - -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ - -moz-animation-duration: .65s; - -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -} - -.flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); - -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); - -moz-animation-name: flipouttoleft; -} - -.flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; -} - -/* Shake it all about */ - -.flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); - -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); - -moz-animation-name: flipouttoright; -} - -.flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* for non-3d supporting browsers, use fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - - -@-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipouttoleft { - from { -webkit-transform: rotateY(0); } - to { -webkit-transform: rotateY(-180deg); } -} -@-moz-keyframes flipouttoleft { - from { -moz-transform: rotateY(0); } - to { -moz-transform: rotateY(-180deg); } -} - -@-webkit-keyframes flipouttoright { - from { -webkit-transform: rotateY(0) ; } - to { -webkit-transform: rotateY(180deg); } -} -@-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) ; } - to { -moz-transform: rotateY(180deg) ; } -} - - - -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; -} - -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; -} - -.pop.out { - z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); - opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; - z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.fade.css b/css/structure/jquery.mobile.transitions.fade.css new file mode 100644 index 00000000..8fbfef8d --- /dev/null +++ b/css/structure/jquery.mobile.transitions.fade.css @@ -0,0 +1,77 @@ +.pop { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; +} + +.pop.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin; + -moz-animation-name: popin; + z-index: 10; +} + +.pop.out { + z-index: 0; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + +} + +.pop.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.pop.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + opacity: 0; + -webkit-animation-name: popout; + -moz-animation-name: popout; + z-index: 10; +} + +@-webkit-keyframes popin { + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes popin { + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes popout { + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } +} +@-moz-keyframes popout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } +} \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css new file mode 100644 index 00000000..356d0591 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -0,0 +1,382 @@ +.slide.out { + -webkit-transform: translateX(-100%); + -webkit-animation-name: slideouttoleft; + -moz-transform: translateX(-100%); + -moz-animation-name: slideouttoleft; +} + +.slide.in { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slide.out.reverse { + -webkit-transform: translateX(100%); + -webkit-animation-name: slideouttoright; + -moz-transform: translateX(100%); + -moz-animation-name: slideouttoright; +} + +.slide.in.reverse { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slideup.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slideup.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + z-index: 10; +} + +.slideup.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slideup.out.reverse { + z-index: 10; + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; +} + +.slidedown.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slidedown.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfromtop; + -moz-transform: translateY(0); + -moz-animation-name: slideinfromtop; + z-index: 10; +} + +.slidedown.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slidedown.out.reverse { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + z-index: 10; + -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; +} + +@-webkit-keyframes slideinfromright { + from { -webkit-transform: translateX(100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromright { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideinfromleft { + from { -webkit-transform: translateX(-100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromleft { + from { -moz-transform: translateX(-100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideouttoleft { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(-100%); } +} +@-moz-keyframes slideouttoleft { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(-100%); } +} + +@-webkit-keyframes slideouttoright { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(100%); } +} +@-moz-keyframes slideouttoright { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(100%); } +} + +@-webkit-keyframes slideinfromtop { + from { -webkit-transform: translateY(-100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfromtop { + from { -moz-transform: translateY(-100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideinfrombottom { + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideouttobottom { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } +} +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } +} + +@-webkit-keyframes slideouttotop { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes slideouttotop { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(-100%); } +} + +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +.fade.out { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.fade.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* The properties in this rule are only necessary for the 'flip' transition. + * We need specify the perspective to create a projection matrix. This will add + * some depth as the element flips. The depth number represents the distance of + * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate + * value. + */ +.viewport-flip { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} + +.ui-mobile-viewport-transitioning, +.ui-mobile-viewport-transitioning .ui-page { + width: 100%; + height: 100%; + overflow: hidden; +} + +.flip { + -webkit-animation-duration: .65s; + -webkit-backface-visibility:hidden; + -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-animation-duration: .65s; + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ +} + +.flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; +} + +.flip.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 150ms; + -moz-animation-name: fadein; +} + +/* Shake it all about */ + +.flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; +} + +.flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* for non-3d supporting browsers, use fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + + +@-webkit-keyframes flipinfromright { + from { -webkit-transform: rotateY(-180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromright { + from { -moz-transform: rotateY(-180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipinfromleft { + from { -webkit-transform: rotateY(180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromleft { + from { -moz-transform: rotateY(180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipouttoleft { + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-180deg); } +} +@-moz-keyframes flipouttoleft { + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-180deg); } +} + +@-webkit-keyframes flipouttoright { + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(180deg); } +} +@-moz-keyframes flipouttoright { + from { -moz-transform: rotateY(0) ; } + to { -moz-transform: rotateY(180deg) ; } +} + + + +.pop { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; +} + +.pop.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin; + -moz-animation-name: popin; + z-index: 10; +} + +.pop.out { + z-index: 0; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + +} + + +.pop.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.pop.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + opacity: 0; + -webkit-animation-name: popout; + -moz-animation-name: popout; + z-index: 10; +} + +@-webkit-keyframes popin { + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes popin { + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes popout { + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } +} +@-moz-keyframes popout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } +} \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css new file mode 100644 index 00000000..356d0591 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -0,0 +1,382 @@ +.slide.out { + -webkit-transform: translateX(-100%); + -webkit-animation-name: slideouttoleft; + -moz-transform: translateX(-100%); + -moz-animation-name: slideouttoleft; +} + +.slide.in { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slide.out.reverse { + -webkit-transform: translateX(100%); + -webkit-animation-name: slideouttoright; + -moz-transform: translateX(100%); + -moz-animation-name: slideouttoright; +} + +.slide.in.reverse { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slideup.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slideup.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + z-index: 10; +} + +.slideup.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slideup.out.reverse { + z-index: 10; + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; +} + +.slidedown.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slidedown.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfromtop; + -moz-transform: translateY(0); + -moz-animation-name: slideinfromtop; + z-index: 10; +} + +.slidedown.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slidedown.out.reverse { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + z-index: 10; + -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; +} + +@-webkit-keyframes slideinfromright { + from { -webkit-transform: translateX(100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromright { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideinfromleft { + from { -webkit-transform: translateX(-100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromleft { + from { -moz-transform: translateX(-100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideouttoleft { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(-100%); } +} +@-moz-keyframes slideouttoleft { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(-100%); } +} + +@-webkit-keyframes slideouttoright { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(100%); } +} +@-moz-keyframes slideouttoright { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(100%); } +} + +@-webkit-keyframes slideinfromtop { + from { -webkit-transform: translateY(-100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfromtop { + from { -moz-transform: translateY(-100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideinfrombottom { + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideouttobottom { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } +} +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } +} + +@-webkit-keyframes slideouttotop { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes slideouttotop { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(-100%); } +} + +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +.fade.out { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.fade.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* The properties in this rule are only necessary for the 'flip' transition. + * We need specify the perspective to create a projection matrix. This will add + * some depth as the element flips. The depth number represents the distance of + * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate + * value. + */ +.viewport-flip { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} + +.ui-mobile-viewport-transitioning, +.ui-mobile-viewport-transitioning .ui-page { + width: 100%; + height: 100%; + overflow: hidden; +} + +.flip { + -webkit-animation-duration: .65s; + -webkit-backface-visibility:hidden; + -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-animation-duration: .65s; + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ +} + +.flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; +} + +.flip.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 150ms; + -moz-animation-name: fadein; +} + +/* Shake it all about */ + +.flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; +} + +.flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* for non-3d supporting browsers, use fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + + +@-webkit-keyframes flipinfromright { + from { -webkit-transform: rotateY(-180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromright { + from { -moz-transform: rotateY(-180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipinfromleft { + from { -webkit-transform: rotateY(180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromleft { + from { -moz-transform: rotateY(180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipouttoleft { + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-180deg); } +} +@-moz-keyframes flipouttoleft { + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-180deg); } +} + +@-webkit-keyframes flipouttoright { + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(180deg); } +} +@-moz-keyframes flipouttoright { + from { -moz-transform: rotateY(0) ; } + to { -moz-transform: rotateY(180deg) ; } +} + + + +.pop { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; +} + +.pop.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin; + -moz-animation-name: popin; + z-index: 10; +} + +.pop.out { + z-index: 0; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + +} + + +.pop.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.pop.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + opacity: 0; + -webkit-animation-name: popout; + -moz-animation-name: popout; + z-index: 10; +} + +@-webkit-keyframes popin { + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes popin { + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes popout { + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } +} +@-moz-keyframes popout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } +} \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css new file mode 100644 index 00000000..9213d2f3 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -0,0 +1,399 @@ +/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ +Built by David Kaneda and maintained by Jonathan Stark. +*/ +.in { + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 325ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 325ms; +} +.out { + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 250ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 250ms; +} + + +.slide.out { + -webkit-transform: translateX(-100%); + -webkit-animation-name: slideouttoleft; + -moz-transform: translateX(-100%); + -moz-animation-name: slideouttoleft; +} + +.slide.in { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slide.out.reverse { + -webkit-transform: translateX(100%); + -webkit-animation-name: slideouttoright; + -moz-transform: translateX(100%); + -moz-animation-name: slideouttoright; +} + +.slide.in.reverse { + -webkit-transform: translateX(0); + -webkit-animation-name: fadein; + -moz-transform: translateX(0); + -moz-animation-name: fadein; +} + +.slideup.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slideup.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + z-index: 10; +} + +.slideup.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slideup.out.reverse { + z-index: 10; + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; +} + +.slidedown.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + z-index: 0; +} + +.slidedown.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfromtop; + -moz-transform: translateY(0); + -moz-animation-name: slideinfromtop; + z-index: 10; +} + +.slidedown.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slidedown.out.reverse { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + z-index: 10; + -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; +} + +@-webkit-keyframes slideinfromright { + from { -webkit-transform: translateX(100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromright { + from { -moz-transform: translateX(100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideinfromleft { + from { -webkit-transform: translateX(-100%); } + to { -webkit-transform: translateX(0); } +} +@-moz-keyframes slideinfromleft { + from { -moz-transform: translateX(-100%); } + to { -moz-transform: translateX(0); } +} + +@-webkit-keyframes slideouttoleft { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(-100%); } +} +@-moz-keyframes slideouttoleft { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(-100%); } +} + +@-webkit-keyframes slideouttoright { + from { -webkit-transform: translateX(0); } + to { -webkit-transform: translateX(100%); } +} +@-moz-keyframes slideouttoright { + from { -moz-transform: translateX(0); } + to { -moz-transform: translateX(100%); } +} + +@-webkit-keyframes slideinfromtop { + from { -webkit-transform: translateY(-100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfromtop { + from { -moz-transform: translateY(-100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideinfrombottom { + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideouttobottom { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } +} +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } +} + +@-webkit-keyframes slideouttotop { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes slideouttotop { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(-100%); } +} + +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} + +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +.fade.out { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.fade.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* The properties in this rule are only necessary for the 'flip' transition. + * We need specify the perspective to create a projection matrix. This will add + * some depth as the element flips. The depth number represents the distance of + * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate + * value. + */ +.viewport-flip { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} + +.ui-mobile-viewport-transitioning, +.ui-mobile-viewport-transitioning .ui-page { + width: 100%; + height: 100%; + overflow: hidden; +} + +.flip { + -webkit-animation-duration: .65s; + -webkit-backface-visibility:hidden; + -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-animation-duration: .65s; + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ +} + +.flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; +} + +.flip.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 150ms; + -moz-animation-name: fadein; +} + +/* Shake it all about */ + +.flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; +} + +.flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + +/* for non-3d supporting browsers, use fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + + +@-webkit-keyframes flipinfromright { + from { -webkit-transform: rotateY(-180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromright { + from { -moz-transform: rotateY(-180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipinfromleft { + from { -webkit-transform: rotateY(180deg); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipinfromleft { + from { -moz-transform: rotateY(180deg); } + to { -moz-transform: rotateY(0); } +} + +@-webkit-keyframes flipouttoleft { + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-180deg); } +} +@-moz-keyframes flipouttoleft { + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-180deg); } +} + +@-webkit-keyframes flipouttoright { + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(180deg); } +} +@-moz-keyframes flipouttoright { + from { -moz-transform: rotateY(0) ; } + to { -moz-transform: rotateY(180deg) ; } +} + + + +.pop { + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; +} + +.pop.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin; + -moz-animation-name: popin; + z-index: 10; +} + +.pop.out { + z-index: 0; + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + +} + + +.pop.in.reverse { + z-index: 0; + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.pop.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + opacity: 0; + -webkit-animation-name: popout; + -moz-animation-name: popout; + z-index: 10; +} + +@-webkit-keyframes popin { + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes popin { + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes popout { + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } +} +@-moz-keyframes popout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } +} \ No newline at end of file From bc2b4faf0b04be9643fac330ac8d4f6e6677ff5c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:08:07 +0700 Subject: [PATCH 057/137] renamed the new transition handler transition.js --- js/jquery.mobile.transition.js | 123 +++++++++++++-------------- js/jquery.mobile.transition.outin.js | 93 -------------------- 2 files changed, 58 insertions(+), 158 deletions(-) delete mode 100644 js/jquery.mobile.transition.outin.js diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 315c1159..6d07b0e7 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -2,99 +2,92 @@ * "transitions" plugin - Page change tranistions */ -//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); -//>>description: Page change tranistions. -//>>label: Page Transitions - -// TODO the dependency defined here for transitions is to make sure -// that the defaultTransitionHandler is defined _after_ navigation has been defined -// This requires a rework/rethinking -define( [ "jquery.mobile.core", "order!jquery.mobile.navigation" ], function() { -//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { -function css3TransitionHandler( name, reverse, $to, $from ) { - +function outInTransitionHandler( name, reverse, $to, $from ) { + var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", active = $.mobile.urlHistory.getActive(), touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, screenHeight = $.mobile.getScreenHeight(), - doneFunc = function() { + viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + doneOut = function() { - $to.add( $from ).removeClass( "out in reverse " + name ); - - if ( $from && $from[ 0 ] !== $to[ 0 ] ) { - $from.removeClass( $.mobile.activePageClass ); + if ( $from ) { + $from + .removeClass( $.mobile.activePageClass + " out in reverse " + name ) + .height( "" ); } - - $to.parent().removeClass( viewportClass ); - //reset $to height back - if( !touchOverflow ){ - $to.height( "" ); - } + $to + .animationComplete( doneIn ) + .addClass( $.mobile.activePageClass ); - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $.mobile.silentScroll( toScroll ); - } + // Send focus to page as it is now display: block + $.mobile.focusPage( $to ); + + if( touchOverflow && toScroll ){ - //trigger show/hide events - if( $from ) { - if( !touchOverflow ){ - $from.height( "" ); + //set page's scrollTop to remembered distance + if( $to.is( ".ui-native-fixed" ) ){ + $to.find( ".ui-content" ).scrollTop( toScroll ); + } + else{ + $to.scrollTop( toScroll ); } } + + // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. + if( !touchOverflow ){ + $to.height( screenHeight + toScroll ); + + $.mobile.silentScroll( toScroll ); + } + + $to.addClass( name + " in" + reverseClass ); + + }, + + doneIn = function() { - deferred.resolve( name, reverse, $to, $from ); + $to + .removeClass( "out in reverse " + name ) + .parent().removeClass( viewportClass ) + .height( "" ); + + deferred.resolve( name, reverse, $to, $from, true ); }; - - $to.animationComplete( doneFunc ); - - $to.parent().addClass( viewportClass ); - - // Scroll to top, hide addr bar - window.scrollTo( 0, $.mobile.defaultHomeScroll ); - - if( !touchOverflow){ - $to.height( screenHeight + toScroll ); - } - - if( touchOverflow && toScroll ){ - $to.addClass( "ui-mobile-pre-transition" ); - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); - - //set page's scrollTop to remembered distance - if( $to.is( ".ui-native-fixed" ) ){ - $to.find( ".ui-content" ).scrollTop( toScroll ); - } - else{ - $to.scrollTop( toScroll ); - } - } + $to + .parent().addClass( viewportClass ); //clear page loader $.mobile.hidePageLoadingMsg(); if ( $from ) { - $from.addClass( name + " out" + reverseClass ); + $from + .height( screenHeight + $(window ).scrollTop() ) + .animationComplete( doneOut ) + .addClass( name + " out" + reverseClass ); + } + else { + doneOut(); } - - $to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass ); return deferred.promise(); } // Make our transition handler public. -$.mobile.css3TransitionHandler = css3TransitionHandler; +$.mobile.outInTransitionHandler = outInTransitionHandler; + +// If the default transition handler is the 'none' handler, replace it with our handler. +if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { + $.mobile.defaultTransitionHandler = outInTransitionHandler; +} + +// add class for where 3d transforms are supported, or not +$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" ); })( jQuery, this ); -//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); -}); -//>>excludeEnd("jqmBuildExclude"); diff --git a/js/jquery.mobile.transition.outin.js b/js/jquery.mobile.transition.outin.js deleted file mode 100644 index 6d07b0e7..00000000 --- a/js/jquery.mobile.transition.outin.js +++ /dev/null @@ -1,93 +0,0 @@ -/* -* "transitions" plugin - Page change tranistions -*/ - -(function( $, window, undefined ) { - -function outInTransitionHandler( name, reverse, $to, $from ) { - - var deferred = new $.Deferred(), - reverseClass = reverse ? " reverse" : "", - active = $.mobile.urlHistory.getActive(), - touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, - toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - screenHeight = $.mobile.getScreenHeight(), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - doneOut = function() { - - if ( $from ) { - $from - .removeClass( $.mobile.activePageClass + " out in reverse " + name ) - .height( "" ); - } - - $to - .animationComplete( doneIn ) - .addClass( $.mobile.activePageClass ); - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); - - if( touchOverflow && toScroll ){ - - //set page's scrollTop to remembered distance - if( $to.is( ".ui-native-fixed" ) ){ - $to.find( ".ui-content" ).scrollTop( toScroll ); - } - else{ - $to.scrollTop( toScroll ); - } - } - - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $to.height( screenHeight + toScroll ); - - $.mobile.silentScroll( toScroll ); - } - - $to.addClass( name + " in" + reverseClass ); - - }, - - doneIn = function() { - - $to - .removeClass( "out in reverse " + name ) - .parent().removeClass( viewportClass ) - .height( "" ); - - deferred.resolve( name, reverse, $to, $from, true ); - }; - - $to - .parent().addClass( viewportClass ); - - //clear page loader - $.mobile.hidePageLoadingMsg(); - - if ( $from ) { - $from - .height( screenHeight + $(window ).scrollTop() ) - .animationComplete( doneOut ) - .addClass( name + " out" + reverseClass ); - } - else { - doneOut(); - } - - return deferred.promise(); -} - -// Make our transition handler public. -$.mobile.outInTransitionHandler = outInTransitionHandler; - -// If the default transition handler is the 'none' handler, replace it with our handler. -if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = outInTransitionHandler; -} - -// add class for where 3d transforms are supported, or not -$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" ); - -})( jQuery, this ); From c37ad79ed0d3db3d1e6a91196f30353e6217cc25 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:09:02 +0700 Subject: [PATCH 058/137] updated make and concat files for new transition handler --- js/index.php | 1 - 1 file changed, 1 deletion(-) diff --git a/js/index.php b/js/index.php index c263e1c1..4a4a2e06 100644 --- a/js/index.php +++ b/js/index.php @@ -18,7 +18,6 @@ $files = array( 'jquery.mobile.navigation.js', 'jquery.mobile.navigation.pushstate.js', 'jquery.mobile.transition.js', - 'jquery.mobile.transition.outin.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', From 9cd79a6adb19300608f41fc02f3e10eb0323ebf1 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:10:18 +0700 Subject: [PATCH 059/137] missed slide in the new transitions file split out --- .../jquery.mobile.transitions.slide.css | 244 ------------------ 1 file changed, 244 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 9213d2f3..ada5cf22 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,20 +1,3 @@ -/* Transitions from jQtouch (with small modifications): http://www.jqtouch.com/ -Built by David Kaneda and maintained by Jonathan Stark. -*/ -.in { - -webkit-animation-timing-function: ease-out; - -webkit-animation-duration: 325ms; - -moz-animation-timing-function: ease-out; - -moz-animation-duration: 325ms; -} -.out { - -webkit-animation-timing-function: ease-in; - -webkit-animation-duration: 250ms; - -moz-animation-timing-function: ease-in; - -moz-animation-duration: 250ms; -} - - .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -170,230 +153,3 @@ Built by David Kaneda and maintained by Jonathan Stark. from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } } - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* The properties in this rule are only necessary for the 'flip' transition. - * We need specify the perspective to create a projection matrix. This will add - * some depth as the element flips. The depth number represents the distance of - * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate - * value. - */ -.viewport-flip { - -webkit-perspective: 1000; - -moz-perspective: 1000; - position: absolute; -} - -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - -.flip { - -webkit-animation-duration: .65s; - -webkit-backface-visibility:hidden; - -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ - -moz-animation-duration: .65s; - -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -} - -.flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); - -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); - -moz-animation-name: flipouttoleft; -} - -.flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; -} - -/* Shake it all about */ - -.flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); - -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); - -moz-animation-name: flipouttoright; -} - -.flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* for non-3d supporting browsers, use fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - - -@-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipouttoleft { - from { -webkit-transform: rotateY(0); } - to { -webkit-transform: rotateY(-180deg); } -} -@-moz-keyframes flipouttoleft { - from { -moz-transform: rotateY(0); } - to { -moz-transform: rotateY(-180deg); } -} - -@-webkit-keyframes flipouttoright { - from { -webkit-transform: rotateY(0) ; } - to { -webkit-transform: rotateY(180deg); } -} -@-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) ; } - to { -moz-transform: rotateY(180deg) ; } -} - - - -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; -} - -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; -} - -.pop.out { - z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); - opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; - z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } -} \ No newline at end of file From 5012030885d45ca86361c6513b396b4d4999063d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:11:52 +0700 Subject: [PATCH 060/137] updated comment to credit jqTouch for original transitions ideas, though these are now quite different --- css/structure/jquery.mobile.transitions.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index b4a4b258..564167bf 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -1,3 +1,4 @@ +/* Transitions originally inspired by those from jQtouch, nice work, folks */ .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 325ms; From d854f813764a5ca9ec039e8da10f0dfe01a686f1 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:16:23 +0700 Subject: [PATCH 061/137] moved ui-viewport-transitioning rules into here --- css/structure/jquery.mobile.transitions.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 564167bf..d4960a95 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -1,13 +1,20 @@ /* Transitions originally inspired by those from jQtouch, nice work, folks */ +.ui-mobile-viewport-transitioning, +.ui-mobile-viewport-transitioning .ui-page { + width: 100%; + height: 100%; + overflow: hidden; +} + .in { -webkit-animation-timing-function: ease-out; - -webkit-animation-duration: 325ms; + -webkit-animation-duration: 150ms; -moz-animation-timing-function: ease-out; - -moz-animation-duration: 325ms; + -moz-animation-duration: 150ms; } .out { -webkit-animation-timing-function: ease-in; - -webkit-animation-duration: 250ms; + -webkit-animation-duration: 300ms; -moz-animation-timing-function: ease-in; - -moz-animation-duration: 250ms; + -moz-animation-duration: 300ms; } \ No newline at end of file From 3fdaa38bd74c6e09383f872203ef2cb0e0054415 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:17:52 +0700 Subject: [PATCH 062/137] whitespace --- css/structure/jquery.mobile.transitions.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index d4960a95..862f0adc 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -12,6 +12,7 @@ -moz-animation-timing-function: ease-out; -moz-animation-duration: 150ms; } + .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 300ms; From 3bf147e10b52e256d9796682280c80922cd2f6d1 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:18:09 +0700 Subject: [PATCH 063/137] cleaned these up so only the right rules are in the right files --- .../jquery.mobile.transitions.fade.css | 98 ++---- .../jquery.mobile.transitions.flip.css | 281 ---------------- .../jquery.mobile.transitions.pop.css | 307 +----------------- 3 files changed, 31 insertions(+), 655 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.fade.css b/css/structure/jquery.mobile.transitions.fade.css index 8fbfef8d..a22c76a5 100644 --- a/css/structure/jquery.mobile.transitions.fade.css +++ b/css/structure/jquery.mobile.transitions.fade.css @@ -1,77 +1,37 @@ -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } } -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } } -.pop.out { +@-webkit-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +@-moz-keyframes fadeout { + from { opacity: 1; } + to { opacity: 0; } +} + +.fade.out { z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.fade.in { + opacity: 1; z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 356d0591..135f4439 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -1,195 +1,3 @@ -.slide.out { - -webkit-transform: translateX(-100%); - -webkit-animation-name: slideouttoleft; - -moz-transform: translateX(-100%); - -moz-animation-name: slideouttoleft; -} - -.slide.in { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slide.out.reverse { - -webkit-transform: translateX(100%); - -webkit-animation-name: slideouttoright; - -moz-transform: translateX(100%); - -moz-animation-name: slideouttoright; -} - -.slide.in.reverse { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slideup.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slideup.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfrombottom; - -moz-transform: translateY(0); - -moz-animation-name: slideinfrombottom; - z-index: 10; -} - -.slideup.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slideup.out.reverse { - z-index: 10; - -webkit-transform: translateY(100%); - -moz-transform: translateY(100%); - -webkit-animation-name: slideouttobottom; - -moz-animation-name: slideouttobottom; -} - -.slidedown.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slidedown.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfromtop; - -moz-transform: translateY(0); - -moz-animation-name: slideinfromtop; - z-index: 10; -} - -.slidedown.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slidedown.out.reverse { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - z-index: 10; - -webkit-animation-name: slideouttotop; - -moz-animation-name: slideouttotop; -} - -@-webkit-keyframes slideinfromright { - from { -webkit-transform: translateX(100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromright { - from { -moz-transform: translateX(100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideinfromleft { - from { -webkit-transform: translateX(-100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromleft { - from { -moz-transform: translateX(-100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideouttoleft { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(-100%); } -} -@-moz-keyframes slideouttoleft { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(-100%); } -} - -@-webkit-keyframes slideouttoright { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(100%); } -} -@-moz-keyframes slideouttoright { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(100%); } -} - -@-webkit-keyframes slideinfromtop { - from { -webkit-transform: translateY(-100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfromtop { - from { -moz-transform: translateY(-100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideinfrombottom { - from { -webkit-transform: translateY(100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfrombottom { - from { -moz-transform: translateY(100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideouttobottom { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(100%); } -} -@-moz-keyframes slideouttobottom { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(100%); } -} - -@-webkit-keyframes slideouttotop { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(-100%); } -} -@-moz-keyframes slideouttotop { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(-100%); } -} - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - /* The properties in this rule are only necessary for the 'flip' transition. * We need specify the perspective to create a projection matrix. This will add * some depth as the element flips. The depth number represents the distance of @@ -202,13 +10,6 @@ position: absolute; } -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - .flip { -webkit-animation-duration: .65s; -webkit-backface-visibility:hidden; @@ -263,7 +64,6 @@ -moz-animation-name: fadeout; } - @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg); } to { -webkit-transform: rotateY(0); } @@ -298,85 +98,4 @@ @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0) ; } to { -moz-transform: rotateY(180deg) ; } -} - - - -.pop { - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; -} - -.pop.in { - -webkit-transform: scale(1); - -moz-transform: scale(1); - opacity: 1; - -webkit-animation-name: popin; - -moz-animation-name: popin; - z-index: 10; -} - -.pop.out { - z-index: 0; - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -} - - -.pop.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.pop.out.reverse { - -webkit-transform: scale(.8); - -moz-transform: scale(.8); - opacity: 0; - -webkit-animation-name: popout; - -moz-animation-name: popout; - z-index: 10; -} - -@-webkit-keyframes popin { - from { - -webkit-transform: scale(.8); - opacity: 0; - } - to { - -webkit-transform: scale(1); - opacity: 1; - } -} -@-moz-keyframes popin { - from { - -moz-transform: scale(.8); - opacity: 0; - } - to { - -moz-transform: scale(1); - opacity: 1; - } -} - -@-webkit-keyframes popout { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(.8); - opacity: 0; - } -} -@-moz-keyframes popout { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(.8); - opacity: 0; - } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 356d0591..d72110b1 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -1,307 +1,3 @@ -.slide.out { - -webkit-transform: translateX(-100%); - -webkit-animation-name: slideouttoleft; - -moz-transform: translateX(-100%); - -moz-animation-name: slideouttoleft; -} - -.slide.in { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slide.out.reverse { - -webkit-transform: translateX(100%); - -webkit-animation-name: slideouttoright; - -moz-transform: translateX(100%); - -moz-animation-name: slideouttoright; -} - -.slide.in.reverse { - -webkit-transform: translateX(0); - -webkit-animation-name: fadein; - -moz-transform: translateX(0); - -moz-animation-name: fadein; -} - -.slideup.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slideup.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfrombottom; - -moz-transform: translateY(0); - -moz-animation-name: slideinfrombottom; - z-index: 10; -} - -.slideup.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slideup.out.reverse { - z-index: 10; - -webkit-transform: translateY(100%); - -moz-transform: translateY(100%); - -webkit-animation-name: slideouttobottom; - -moz-animation-name: slideouttobottom; -} - -.slidedown.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - z-index: 0; -} - -.slidedown.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfromtop; - -moz-transform: translateY(0); - -moz-animation-name: slideinfromtop; - z-index: 10; -} - -.slidedown.in.reverse { - z-index: 0; - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slidedown.out.reverse { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - z-index: 10; - -webkit-animation-name: slideouttotop; - -moz-animation-name: slideouttotop; -} - -@-webkit-keyframes slideinfromright { - from { -webkit-transform: translateX(100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromright { - from { -moz-transform: translateX(100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideinfromleft { - from { -webkit-transform: translateX(-100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromleft { - from { -moz-transform: translateX(-100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideouttoleft { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(-100%); } -} -@-moz-keyframes slideouttoleft { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(-100%); } -} - -@-webkit-keyframes slideouttoright { - from { -webkit-transform: translateX(0); } - to { -webkit-transform: translateX(100%); } -} -@-moz-keyframes slideouttoright { - from { -moz-transform: translateX(0); } - to { -moz-transform: translateX(100%); } -} - -@-webkit-keyframes slideinfromtop { - from { -webkit-transform: translateY(-100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfromtop { - from { -moz-transform: translateY(-100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideinfrombottom { - from { -webkit-transform: translateY(100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfrombottom { - from { -moz-transform: translateY(100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideouttobottom { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(100%); } -} -@-moz-keyframes slideouttobottom { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(100%); } -} - -@-webkit-keyframes slideouttotop { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(-100%); } -} -@-moz-keyframes slideouttotop { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(-100%); } -} - -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} - -@-webkit-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} -@-moz-keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -.fade.out { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.fade.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* The properties in this rule are only necessary for the 'flip' transition. - * We need specify the perspective to create a projection matrix. This will add - * some depth as the element flips. The depth number represents the distance of - * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate - * value. - */ -.viewport-flip { - -webkit-perspective: 1000; - -moz-perspective: 1000; - position: absolute; -} - -.ui-mobile-viewport-transitioning, -.ui-mobile-viewport-transitioning .ui-page { - width: 100%; - height: 100%; - overflow: hidden; -} - -.flip { - -webkit-animation-duration: .65s; - -webkit-backface-visibility:hidden; - -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ - -moz-animation-duration: .65s; - -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -} - -.flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); - -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); - -moz-animation-name: flipouttoleft; -} - -.flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; -} - -/* Shake it all about */ - -.flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); - -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); - -moz-animation-name: flipouttoright; -} - -.flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* for non-3d supporting browsers, use fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - - -@-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipouttoleft { - from { -webkit-transform: rotateY(0); } - to { -webkit-transform: rotateY(-180deg); } -} -@-moz-keyframes flipouttoleft { - from { -moz-transform: rotateY(0); } - to { -moz-transform: rotateY(-180deg); } -} - -@-webkit-keyframes flipouttoright { - from { -webkit-transform: rotateY(0) ; } - to { -webkit-transform: rotateY(180deg); } -} -@-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) ; } - to { -moz-transform: rotateY(180deg) ; } -} - - - .pop { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; @@ -323,7 +19,6 @@ } - .pop.in.reverse { z-index: 0; -webkit-animation-name: fadein; @@ -349,6 +44,7 @@ opacity: 1; } } + @-moz-keyframes popin { from { -moz-transform: scale(.8); @@ -370,6 +66,7 @@ opacity: 0; } } + @-moz-keyframes popout { from { -moz-transform: scale(1); From c0e635bf726d34aa1d92587dacccf9e20bb59aa1 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:19:31 +0700 Subject: [PATCH 064/137] removed flip in rules, no longer in use --- .../jquery.mobile.transitions.flip.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 135f4439..38207fe8 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -64,24 +64,6 @@ -moz-animation-name: fadeout; } -@-webkit-keyframes flipinfromright { - from { -webkit-transform: rotateY(-180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromright { - from { -moz-transform: rotateY(-180deg); } - to { -moz-transform: rotateY(0); } -} - -@-webkit-keyframes flipinfromleft { - from { -webkit-transform: rotateY(180deg); } - to { -webkit-transform: rotateY(0); } -} -@-moz-keyframes flipinfromleft { - from { -moz-transform: rotateY(180deg); } - to { -moz-transform: rotateY(0); } -} - @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-180deg); } @@ -90,7 +72,6 @@ from { -moz-transform: rotateY(0); } to { -moz-transform: rotateY(-180deg); } } - @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } to { -webkit-transform: rotateY(180deg); } From 3ec1085b70d0eefeafa64c3b55cd27d8adc62d99 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:19:53 +0700 Subject: [PATCH 065/137] removed old comment --- css/structure/jquery.mobile.transitions.flip.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 38207fe8..5cdb6036 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -35,8 +35,6 @@ -moz-animation-name: fadein; } -/* Shake it all about */ - .flip.out.reverse { -webkit-transform: rotateY(180deg) scale(.8); -webkit-animation-name: flipouttoright; From bce5a5a33d66ed66fa1bbc226a0d53a99f7f361f Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:21:34 +0700 Subject: [PATCH 066/137] flipped the default timing for in and out - they were backwards --- css/structure/jquery.mobile.transitions.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 862f0adc..b818d6b3 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -8,14 +8,14 @@ .in { -webkit-animation-timing-function: ease-out; - -webkit-animation-duration: 150ms; + -webkit-animation-duration: 300ms; -moz-animation-timing-function: ease-out; - -moz-animation-duration: 150ms; + -moz-animation-duration: 300ms; } .out { -webkit-animation-timing-function: ease-in; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 150ms; -moz-animation-timing-function: ease-in; - -moz-animation-duration: 300ms; + -moz-animation-duration: 150ms; } \ No newline at end of file From 13cdc5d7c43362093ef57bd19cf2d1f7b15bc7c2 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 18:41:09 +0700 Subject: [PATCH 067/137] added a rotate transition, just for fun. --- css/structure/index.php | 1 + .../jquery.mobile.transitions.rotate.css | 72 +++++++++++++++++++ docs/pages/page-transitions.html | 3 + 3 files changed, 76 insertions(+) create mode 100644 css/structure/jquery.mobile.transitions.rotate.css diff --git a/css/structure/index.php b/css/structure/index.php index 3648b712..06ae787d 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -7,6 +7,7 @@ $files = array_merge($files, array( '../../structure/jquery.mobile.transitions.pop.css', '../../structure/jquery.mobile.transitions.slide.css', '../../structure/jquery.mobile.transitions.flip.css', + '../../structure/jquery.mobile.transitions.rotate.css', '../../structure/jquery.mobile.grids.css', '../../structure/jquery.mobile.headerfooter.css', '../../structure/jquery.mobile.navbar.css', diff --git a/css/structure/jquery.mobile.transitions.rotate.css b/css/structure/jquery.mobile.transitions.rotate.css new file mode 100644 index 00000000..83bdd1ec --- /dev/null +++ b/css/structure/jquery.mobile.transitions.rotate.css @@ -0,0 +1,72 @@ +@-webkit-keyframes rotateinfromleft { + from { -webkit-transform: rotate(-90deg); } + to { -webkit-transform: rotate(0deg); } +} +@-moz-keyframes rotateinfromleft { + from { -moz-transform: rotate(-90deg); } + to { -moz-transform: rotate(0deg); } +} + +@-webkit-keyframes rotateinfromright { + from { -webkit-transform: rotate(90deg); } + to { -webkit-transform: rotate(0deg); } +} + +@-moz-keyframes rotateinfromright { + from { -moz-transform: rotate(90deg); } + to { -moz-transform: rotate(0deg); } +} + +@-webkit-keyframes rotateouttoright { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(90deg); } +} + +@-moz-keyframes rotateouttoright { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(90deg); } +} + +@-webkit-keyframes rotateouttoleft { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(-90deg); } +} + +@-moz-keyframes rotateouttoleft { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(-90deg); } +} + +.rotate { + -webkit-transform-origin: 50% 80%; + -webkit-transform-origin: 50% 80%; +} + +.rotate.out { + -webkit-transform: rotate(-90deg); + -webkit-animation-name: rotateouttoleft; + -moz-transform: rotate(-90deg); + -moz-animation-name: rotateouttoleft; +} + +.rotate.in { + -webkit-transform: rotate(0deg); + -webkit-animation-name: rotateinfromright; + -moz-transform: rotate(0deg); + -moz-animation-name: rotateinfromright; +} + +.rotate.out.reverse { + -webkit-transform: rotate(90deg); + -webkit-animation-name: rotateouttoright; + -moz-transform: rotate(90deg); + -moz-animation-name: rotateouttoright; +} + +.rotate.in.reverse { + -webkit-transform: rotate(0deg); + -webkit-animation-name: rotateinfromleft; + -moz-transform: rotate(0deg); + -moz-animation-name: rotateinfromleft; +} + diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 57dcfbb0..2e9c204f 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -37,7 +37,9 @@ fade flip* + +

    rotate

    Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

    @@ -262,6 +264,7 @@ $.mobile.defaultTransitionHandler = myTransitionHandler; flip* +

    rotate

    From 81c98eb1e1af1460897d65ff4d671cce5435cfbe Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 4 Jan 2012 21:32:09 +0700 Subject: [PATCH 068/137] updated description of what happens with flip on non 3d --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 2e9c204f..fc1311d1 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -43,7 +43,7 @@

    Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

    -

    NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.

    +

    NOTE: The flip transition will only work on platforms with 3D Transform support. Devices that lack 3D support, will get a fade transition.

    Setting a transition on a link or form submit

    From 373abd76230abfc7f548fb51911cc04d23ddb705 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 11:53:10 -0500 Subject: [PATCH 069/137] Re-org file, scoped all flip rules to the 3d supported class to avoid android seeing these Cleaned up unsupported rules, added to top of file - needed both fade in and out rules --- .../jquery.mobile.transitions.flip.css | 109 ++++++++++-------- 1 file changed, 63 insertions(+), 46 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 5cdb6036..6f08802b 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -4,54 +4,9 @@ * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate * value. */ -.viewport-flip { - -webkit-perspective: 1000; - -moz-perspective: 1000; - position: absolute; -} -.flip { - -webkit-animation-duration: .65s; - -webkit-backface-visibility:hidden; - -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ - -moz-animation-duration: .65s; - -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -} -.flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); - -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); - -moz-animation-name: flipouttoleft; -} - -.flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; -} - -.flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); - -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); - -moz-animation-name: flipouttoright; -} - -.flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - -/* for non-3d supporting browsers, use fade */ +/* for non-3d supporting browsers, fallback to fade */ .ui-unsupported-csstransform3d .flip.out, .ui-unsupported-csstransform3d .flip.out.reverse { z-index: 0; @@ -62,6 +17,68 @@ -moz-animation-name: fadeout; } +.ui-unsupported-csstransform3d .flip.in, +.ui-unsupported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + + +/* for 3d supporting browsers, use flip */ + +.ui-supported-csstransform3d .viewport-flip { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} + +.ui-supported-csstransform3d .flip { + -webkit-animation-duration: .65s; + -webkit-backface-visibility:hidden; + -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-animation-duration: .65s; + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ +} + +.ui-supported-csstransform3d .flip.out { + -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-180deg) scale(.8); + -moz-animation-name: flipouttoleft; +} + +.ui-supported-csstransform3d .flip.in { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 150ms; + -moz-animation-name: fadein; +} + +.ui-supported-csstransform3d .flip.out.reverse { + -webkit-transform: rotateY(180deg) scale(.8); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(180deg) scale(.8); + -moz-animation-name: flipouttoright; +} + +.ui-supported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} + + + @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-180deg); } From 0edc6271a5a9382913deebc5a6be4f30e79c6b76 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 13:55:06 -0500 Subject: [PATCH 070/137] Added "nofade" transition, slide/up/down for non-3D devices - Introduced a class (nofade) which is similar to dontmove for overwriting the fade in/out classes. We're not scoping all classes to with supported or not like in flip so we need to negate the fade rules with a new animation - Added a selector block at the top to lengthen all slide animations to 300ms to reduce blinkiness on Android. Shorter caused animations to break out of sequence. Needs refinement on timing. - Added rules to apply the "nofade" classes to the replace the fade in/out animations for non-3D browsers. Had to set the duration equal to the slide animations to keep it all in sync. --- css/structure/jquery.mobile.transitions.css | 19 +++++++-- .../jquery.mobile.transitions.slide.css | 42 +++++++++++++++++++ 2 files changed, 57 insertions(+), 4 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index b818d6b3..95fd137a 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -8,14 +8,25 @@ .in { -webkit-animation-timing-function: ease-out; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-out; - -moz-animation-duration: 300ms; + -moz-animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; - -webkit-animation-duration: 150ms; + -webkit-animation-duration: 225ms; -moz-animation-timing-function: ease-in; - -moz-animation-duration: 150ms; + -moz-animation-duration: 225; +} + + + +@-webkit-keyframes nofade { + from { opacity:1; } + to { opacity:1; } +} +@-moz-keyframes nofade { + from { opacity:1; } + to { opacity:1; } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index ada5cf22..214f0f3f 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,3 +1,40 @@ +/* give the transition more time if sliding to prevent hiccups, different from the global defaults */ +.slide.in, +.slide.out, +.slide.out.reverse, +.slideup.in, +.slideup.out.reverse, +.slidedown.in, +.slidedown.in.reverse { + -webkit-animation-duration: 300ms; + -moz-animation-duration: 300ms; + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; +} + +/* in non-3D browsers, get rid of the fade in animation */ +.ui-unsupported-csstransform3d .slide.in, +.ui-unsupported-csstransform3d .slide.in.reverse, +.ui-unsupported-csstransform3d .slideup.in.reverse, +.ui-unsupported-csstransform3d .slidedown.in.reverse { + z-index:10; + -webkit-animation-name: nofade; + -webkit-animation-duration: 300ms; + -moz-animation-name: nofade; + -moz-animation-duration: 300ms; +} + +/* in non-3D browsers, get rid of the fade out animation */ +.ui-unsupported-csstransform3d .slideup.out, +.ui-unsupported-csstransform3d .slidedown.out + { + z-index:0; + -webkit-animation-name: nofade; + -webkit-animation-duration: 300ms; +} + +/* slide */ + .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -26,6 +63,9 @@ -moz-animation-name: fadein; } + +/* slide up */ + .slideup.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; @@ -54,6 +94,8 @@ -moz-animation-name: slideouttobottom; } +/* slide down */ + .slidedown.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; From 9531ff46f89c5630de433f742ca88c1fc8fd9fc4 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 14:01:45 -0500 Subject: [PATCH 071/137] A few more slide tweaks, still blinky or skips frames in unpredictable ways --- .../jquery.mobile.transitions.slide.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 214f0f3f..8c55383e 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -6,10 +6,8 @@ .slideup.out.reverse, .slidedown.in, .slidedown.in.reverse { - -webkit-animation-duration: 300ms; - -moz-animation-duration: 300ms; - -webkit-animation-timing-function: ease-in; - -moz-animation-timing-function: ease-in; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; } /* in non-3D browsers, get rid of the fade in animation */ @@ -19,9 +17,11 @@ .ui-unsupported-csstransform3d .slidedown.in.reverse { z-index:10; -webkit-animation-name: nofade; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 350ms; + -webkit-animation-name: nofade; -moz-animation-name: nofade; - -moz-animation-duration: 300ms; + -moz-animation-duration: 350ms; + -moz-animation-timing-function: ease-in-out; } /* in non-3D browsers, get rid of the fade out animation */ @@ -30,7 +30,11 @@ { z-index:0; -webkit-animation-name: nofade; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 350ms; + -webkit-animation-timing-function: ease-in-out; + -moz-animation-name: nofade; + -moz-animation-duration: 350ms; + -moz-animation-timing-function: ease-in-out; } /* slide */ From 4d5e2ec43740ae3560d5bd1dd3af0b34a43c50ac Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 15:28:22 -0500 Subject: [PATCH 072/137] Slide transition improvements - Switched from opacity to outline for nofade - Re-vamped the non-3D slides to eliminate blinking --- css/structure/jquery.mobile.transitions.css | 9 ++-- .../jquery.mobile.transitions.slide.css | 45 ++++++++++--------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 95fd137a..819c3ade 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -21,12 +21,13 @@ } +/* a dummy transition to override animations in non-3D browsers */ @-webkit-keyframes nofade { - from { opacity:1; } - to { opacity:1; } + from { outline:0; } + to { outline:0; } } @-moz-keyframes nofade { - from { opacity:1; } - to { opacity:1; } + from { outline:0; } + to { outline:0; } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 8c55383e..7e3af5b8 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,40 +1,41 @@ -/* give the transition more time if sliding to prevent hiccups, different from the global defaults */ -.slide.in, -.slide.out, -.slide.out.reverse, -.slideup.in, -.slideup.out.reverse, -.slidedown.in, -.slidedown.in.reverse { - -webkit-animation-duration: 350ms; - -moz-animation-duration: 350ms; -} - -/* in non-3D browsers, get rid of the fade in animation */ +/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ .ui-unsupported-csstransform3d .slide.in, .ui-unsupported-csstransform3d .slide.in.reverse, .ui-unsupported-csstransform3d .slideup.in.reverse, .ui-unsupported-csstransform3d .slidedown.in.reverse { z-index:10; -webkit-animation-name: nofade; - -webkit-animation-duration: 350ms; - -webkit-animation-name: nofade; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; -moz-animation-name: nofade; - -moz-animation-duration: 350ms; - -moz-animation-timing-function: ease-in-out; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; } -/* in non-3D browsers, get rid of the fade out animation */ +/* in non-3D browsers, get rid of the fade out animation and use the same timing */ .ui-unsupported-csstransform3d .slideup.out, .ui-unsupported-csstransform3d .slidedown.out { z-index:0; -webkit-animation-name: nofade; - -webkit-animation-duration: 350ms; - -webkit-animation-timing-function: ease-in-out; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-in; -moz-animation-name: nofade; - -moz-animation-duration: 350ms; - -moz-animation-timing-function: ease-in-out; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; +} + +/* in non-3D browsers, use similiar timing for slides that we don't need to exclude fades from */ +.ui-unsupported-csstransform3d .slide.out, +.ui-unsupported-csstransform3d .slide.out.reverse, +.ui-unsupported-csstransform3d .slideup.in, +.ui-unsupported-csstransform3d .slideup.out.reverse, +.ui-unsupported-csstransform3d .slidedown.out.reverse, +.ui-unsupported-csstransform3d .slidedown.in { + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-out; } /* slide */ From 6ddc8c0e9d4af8fc5ef947845f9d673ad2f3a53c Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 18:23:51 -0500 Subject: [PATCH 073/137] First cut at making pop work for non-3D browsers. Still rough, but works. I had to create a new set of basic keyframes for non-3D because we had opacity baked into our keyframes. As an upside, I could tweak the scale factor differently between Android (0 > 1) and 3D (0.8 > 1). --- .../jquery.mobile.transitions.pop.css | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index d72110b1..383230e5 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -16,7 +16,6 @@ z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - } .pop.in.reverse { @@ -76,4 +75,48 @@ -moz-transform: scale(.8); opacity: 0; } -} \ No newline at end of file +} + +/* for non-3d supporting browsers, remove the fade and just animate size */ + +.ui-unsupported-csstransform3d .pop.out, +.ui-unsupported-csstransform3d .pop.in.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 200ms; + -webkit-animation-name: nofade; +} + +.ui-unsupported-csstransform3d .pop.in { + -webkit-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin-basic; + -webkit-animation-duration: 325ms; + z-index: 10; +} +.ui-unsupported-csstransform3d .pop.out.reverse { + -webkit-transform: scale(0); + opacity: 1; + -webkit-animation-name: popout-basic; + -webkit-animation-duration: 325ms; + z-index: 10; +} + +@-webkit-keyframes popin-basic { + from { + -webkit-transform: scale(0); + } + to { + -webkit-transform: scale(1); + } +} + +@-webkit-keyframes popout-basic { + from { + -webkit-transform: scale(1); + } + to { + -webkit-transform: scale(0); + } +} + From 74a8f2c2c39556bdd203cdf323fb448a00539c30 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 4 Jan 2012 18:31:28 -0500 Subject: [PATCH 074/137] Moved non-3D rules to the bottom to hide the ugliness Rule order doesn't seem to matter because of specificity. --- .../jquery.mobile.transitions.flip.css | 49 +++++------ .../jquery.mobile.transitions.slide.css | 83 +++++++++---------- 2 files changed, 64 insertions(+), 68 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 6f08802b..f5900038 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -5,31 +5,6 @@ * value. */ - -/* for non-3d supporting browsers, fallback to fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.ui-unsupported-csstransform3d .flip.in, -.ui-unsupported-csstransform3d .flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} - - -/* for 3d supporting browsers, use flip */ - .ui-supported-csstransform3d .viewport-flip { -webkit-perspective: 1000; -moz-perspective: 1000; @@ -94,4 +69,26 @@ @-moz-keyframes flipouttoright { from { -moz-transform: rotateY(0) ; } to { -moz-transform: rotateY(180deg) ; } -} \ No newline at end of file +} + + +/* for non-3d supporting browsers, fallback to fade */ +.ui-unsupported-csstransform3d .flip.out, +.ui-unsupported-csstransform3d .flip.out.reverse { + z-index: 0; + opacity: 0; + -webkit-animation-duration: 150ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 150ms; + -moz-animation-name: fadeout; +} + +.ui-unsupported-csstransform3d .flip.in, +.ui-unsupported-csstransform3d .flip.in.reverse { + opacity: 1; + z-index: 10; + -webkit-animation-duration: 300ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 300ms; + -moz-animation-name: fadein; +} diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index 7e3af5b8..b31eb5df 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,45 +1,3 @@ -/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ -.ui-unsupported-csstransform3d .slide.in, -.ui-unsupported-csstransform3d .slide.in.reverse, -.ui-unsupported-csstransform3d .slideup.in.reverse, -.ui-unsupported-csstransform3d .slidedown.in.reverse { - z-index:10; - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* in non-3D browsers, get rid of the fade out animation and use the same timing */ -.ui-unsupported-csstransform3d .slideup.out, -.ui-unsupported-csstransform3d .slidedown.out - { - z-index:0; - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-in; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* in non-3D browsers, use similiar timing for slides that we don't need to exclude fades from */ -.ui-unsupported-csstransform3d .slide.out, -.ui-unsupported-csstransform3d .slide.out.reverse, -.ui-unsupported-csstransform3d .slideup.in, -.ui-unsupported-csstransform3d .slideup.out.reverse, -.ui-unsupported-csstransform3d .slidedown.out.reverse, -.ui-unsupported-csstransform3d .slidedown.in { - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-out; -} - -/* slide */ - .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -200,3 +158,44 @@ from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } } + + +/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ +.ui-unsupported-csstransform3d .slide.in, +.ui-unsupported-csstransform3d .slide.in.reverse, +.ui-unsupported-csstransform3d .slideup.in.reverse, +.ui-unsupported-csstransform3d .slidedown.in.reverse { + z-index:10; + -webkit-animation-name: nofade; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; + -moz-animation-name: nofade; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; +} + +/* Also get rid of the fade out animation and use the same timing */ +.ui-unsupported-csstransform3d .slideup.out, +.ui-unsupported-csstransform3d .slidedown.out + { + z-index:0; + -webkit-animation-name: nofade; + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-in; + -moz-animation-name: nofade; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-in; +} + +/* use similiar timing for slides that we don't need to exclude fades from */ +.ui-unsupported-csstransform3d .slide.out, +.ui-unsupported-csstransform3d .slide.out.reverse, +.ui-unsupported-csstransform3d .slideup.in, +.ui-unsupported-csstransform3d .slideup.out.reverse, +.ui-unsupported-csstransform3d .slidedown.out.reverse, +.ui-unsupported-csstransform3d .slidedown.in { + -webkit-animation-duration: 500ms; + -webkit-animation-timing-function: ease-out; + -moz-animation-duration: 500ms; + -moz-animation-timing-function: ease-out; +} \ No newline at end of file From 9d2f96fc915940535356ccea370593dbe9d0e53a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 14:05:53 +0700 Subject: [PATCH 075/137] removed z-index rules, as pages no longer overlap in transitions --- css/structure/jquery.mobile.transitions.pop.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 383230e5..7f050ca4 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -9,17 +9,14 @@ opacity: 1; -webkit-animation-name: popin; -moz-animation-name: popin; - z-index: 10; } .pop.out { - z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; } .pop.in.reverse { - z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; } @@ -30,7 +27,6 @@ opacity: 0; -webkit-animation-name: popout; -moz-animation-name: popout; - z-index: 10; } @-webkit-keyframes popin { @@ -81,7 +77,6 @@ .ui-unsupported-csstransform3d .pop.out, .ui-unsupported-csstransform3d .pop.in.reverse { - z-index: 0; opacity: 0; -webkit-animation-duration: 200ms; -webkit-animation-name: nofade; @@ -92,14 +87,12 @@ opacity: 1; -webkit-animation-name: popin-basic; -webkit-animation-duration: 325ms; - z-index: 10; } .ui-unsupported-csstransform3d .pop.out.reverse { -webkit-transform: scale(0); opacity: 1; -webkit-animation-name: popout-basic; -webkit-animation-duration: 325ms; - z-index: 10; } @-webkit-keyframes popin-basic { From 7be58bc085821a12d1f0067e028d8034f579651b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 14:14:58 +0700 Subject: [PATCH 076/137] removed or moved opacity rules for simpler cascade --- css/structure/jquery.mobile.transitions.pop.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 7f050ca4..fc3c3f98 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -14,6 +14,7 @@ .pop.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + opacity: 0; } .pop.in.reverse { @@ -24,7 +25,6 @@ .pop.out.reverse { -webkit-transform: scale(.8); -moz-transform: scale(.8); - opacity: 0; -webkit-animation-name: popout; -moz-animation-name: popout; } @@ -77,20 +77,16 @@ .ui-unsupported-csstransform3d .pop.out, .ui-unsupported-csstransform3d .pop.in.reverse { - opacity: 0; -webkit-animation-duration: 200ms; -webkit-animation-name: nofade; } .ui-unsupported-csstransform3d .pop.in { - -webkit-transform: scale(1); - opacity: 1; -webkit-animation-name: popin-basic; -webkit-animation-duration: 325ms; } .ui-unsupported-csstransform3d .pop.out.reverse { -webkit-transform: scale(0); - opacity: 1; -webkit-animation-name: popout-basic; -webkit-animation-duration: 325ms; } From 7341d7c9d0fd6cc34073025257c1d65756e7fb1d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 14:17:59 +0700 Subject: [PATCH 077/137] whitespace --- css/structure/jquery.mobile.transitions.pop.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index fc3c3f98..6a25f7f0 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -107,5 +107,4 @@ to { -webkit-transform: scale(0); } -} - +} \ No newline at end of file From f6ec2436b7976c291ea711c3d0fbe77cb323730e Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 14:55:45 +0700 Subject: [PATCH 078/137] brought back a full flip transition for 3d supporting browsers, using 90deg pairs. Needs further testing --- .../jquery.mobile.transitions.flip.css | 54 ++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index f5900038..340e0ccc 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -10,66 +10,72 @@ -moz-perspective: 1000; position: absolute; } - .ui-supported-csstransform3d .flip { - -webkit-animation-duration: .65s; -webkit-backface-visibility:hidden; -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ - -moz-animation-duration: .65s; -moz-backface-visibility:hidden; -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ } .ui-supported-csstransform3d .flip.out { - -webkit-transform: rotateY(-180deg) scale(.8); + -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; - -moz-transform: rotateY(-180deg) scale(.8); + -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; } .ui-supported-csstransform3d .flip.in { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 150ms; - -moz-animation-name: fadein; + -webkit-animation-name: flipintoright; + -moz-animation-name: flipintoright; } .ui-supported-csstransform3d .flip.out.reverse { - -webkit-transform: rotateY(180deg) scale(.8); + -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; - -moz-transform: rotateY(180deg) scale(.8); + -moz-transform: rotateY(90deg) scale(.9); -moz-animation-name: flipouttoright; } .ui-supported-csstransform3d .flip.in.reverse { - opacity: 1; - z-index: 10; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; + -webkit-animation-name: flipintoleft; + -moz-animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } - to { -webkit-transform: rotateY(-180deg); } + to { -webkit-transform: rotateY(-90deg) scale(.9); } } @-moz-keyframes flipouttoleft { from { -moz-transform: rotateY(0); } - to { -moz-transform: rotateY(-180deg); } + to { -moz-transform: rotateY(-90deg) scale(.9); } } @-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) ; } - to { -webkit-transform: rotateY(180deg); } + to { -webkit-transform: rotateY(90deg) scale(.9); } } @-moz-keyframes flipouttoright { - from { -moz-transform: rotateY(0) ; } - to { -moz-transform: rotateY(180deg) ; } + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(90deg) scale(.9); } } +@-webkit-keyframes flipintoleft { + from { -webkit-transform: rotateY(-90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipintoleft { + from { -moz-transform: rotateY(-90deg) scale(.9); } + to { -moz-transform: rotateY(0); } +} +@-webkit-keyframes flipintoright { + from { -webkit-transform: rotateY(90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipintoright { + from { -moz-transform: rotateY(90deg) scale(.9); } + to { -moz-transform: rotateY(0); } +} + /* for non-3d supporting browsers, fallback to fade */ From 11848a68299bb37eb0477d47c75af8a4321f80e8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 15:33:26 +0700 Subject: [PATCH 079/137] z index not needed --- css/structure/jquery.mobile.transitions.flip.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 340e0ccc..4bfec34d 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -81,7 +81,6 @@ /* for non-3d supporting browsers, fallback to fade */ .ui-unsupported-csstransform3d .flip.out, .ui-unsupported-csstransform3d .flip.out.reverse { - z-index: 0; opacity: 0; -webkit-animation-duration: 150ms; -webkit-animation-name: fadeout; @@ -92,7 +91,6 @@ .ui-unsupported-csstransform3d .flip.in, .ui-unsupported-csstransform3d .flip.in.reverse { opacity: 1; - z-index: 10; -webkit-animation-duration: 300ms; -webkit-animation-name: fadein; -moz-animation-duration: 300ms; From 22162fd5e7ab5572308477e21ead0ed022b2e2f0 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 17:13:30 +0700 Subject: [PATCH 080/137] removed z-index rules, no longer needed --- css/structure/jquery.mobile.transitions.slide.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index b31eb5df..b0d6babe 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -32,7 +32,6 @@ .slideup.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - z-index: 0; } .slideup.in { @@ -40,17 +39,14 @@ -webkit-animation-name: slideinfrombottom; -moz-transform: translateY(0); -moz-animation-name: slideinfrombottom; - z-index: 10; } .slideup.in.reverse { - z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; } .slideup.out.reverse { - z-index: 10; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-animation-name: slideouttobottom; @@ -62,7 +58,6 @@ .slidedown.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; - z-index: 0; } .slidedown.in { @@ -70,11 +65,9 @@ -webkit-animation-name: slideinfromtop; -moz-transform: translateY(0); -moz-animation-name: slideinfromtop; - z-index: 10; } .slidedown.in.reverse { - z-index: 0; -webkit-animation-name: fadein; -moz-animation-name: fadein; } @@ -82,7 +75,6 @@ .slidedown.out.reverse { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); - z-index: 10; -webkit-animation-name: slideouttotop; -moz-animation-name: slideouttotop; } @@ -165,7 +157,6 @@ .ui-unsupported-csstransform3d .slide.in.reverse, .ui-unsupported-csstransform3d .slideup.in.reverse, .ui-unsupported-csstransform3d .slidedown.in.reverse { - z-index:10; -webkit-animation-name: nofade; -webkit-animation-duration: 500ms; -webkit-animation-timing-function: ease-out; @@ -178,7 +169,6 @@ .ui-unsupported-csstransform3d .slideup.out, .ui-unsupported-csstransform3d .slidedown.out { - z-index:0; -webkit-animation-name: nofade; -webkit-animation-duration: 500ms; -webkit-animation-timing-function: ease-in; From 70ef72595291e82e2ac78f5c6f5a737e3a1c4867 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 17:16:18 +0700 Subject: [PATCH 081/137] removed "none" transition handler from Nav.js. Updated the new out-in transition handler so that it supports "none" transitions in addition to our new default css3 animation sequence. The new transition handler is set as the default, and available publicly as $.mobile.defaultTransitionHandler and $.mobile.transitionHandlers["default"]. --- js/jquery.mobile.navigation.js | 55 ++-------------------------------- js/jquery.mobile.transition.js | 36 ++++++++++++---------- 2 files changed, 23 insertions(+), 68 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 44841930..3dfcf31c 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -504,7 +504,7 @@ define( [ //find the transition handler for the specified transition. If there //isn't one in our transitionHandlers dictionary, use the default one. //call the handler immediately to kick-off the transition. - var th = $.mobile.transitionHandlers[transition || "none"] || $.mobile.defaultTransitionHandler, + var th = $.mobile.transitionHandlers[ transition || "default" ] || $.mobile.defaultTransitionHandler, promise = th( transition, reverse, toPage, fromPage ); promise.done(function() { @@ -581,58 +581,7 @@ define( [ $.mobile.dialogHashKey = dialogHashKey; - //default non-animation transition handler - $.mobile.noneTransitionHandler = function( name, reverse, $to, $from ) { - var active = $.mobile.urlHistory.getActive(), - touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled, - toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), - viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - screenHeight = $.mobile.getScreenHeight(); - - if( !touchOverflow){ - $to.height( screenHeight + toScroll ); - } - - if( touchOverflow && toScroll ){ - - $to.addClass( "ui-mobile-pre-transition" ); - - // Send focus to page as it is now display: block - $.mobile.focusPage( $to ); - - //set page's scrollTop to remembered distance - if( $to.is( ".ui-native-fixed" ) ){ - $to.find( ".ui-content" ).scrollTop( toScroll ); - } - else{ - $to.scrollTop( toScroll ); - } - } - - //clear page loader - $.mobile.hidePageLoadingMsg(); - - if ( $from ) { - $from.removeClass( $.mobile.activePageClass ); - } - - $to.addClass( $.mobile.activePageClass ); - - // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet. - if( !touchOverflow ){ - $.mobile.silentScroll( toScroll ); - } - - return $.Deferred().resolve( name, reverse, $to, $from ).promise(); - }; - - //default handler for unknown transitions - $.mobile.defaultTransitionHandler = $.mobile.noneTransitionHandler; - - //transition handler dictionary for 3rd party transitions - $.mobile.transitionHandlers = { - none: $.mobile.defaultTransitionHandler - }; + //enable cross-domain page support $.mobile.allowCrossDomainPages = false; diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 6d07b0e7..ec87d671 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -13,6 +13,7 @@ function outInTransitionHandler( name, reverse, $to, $from ) { toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), screenHeight = $.mobile.getScreenHeight(), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, + none = !$.support.cssTransitions || !name || name === "none", doneOut = function() { if ( $from ) { @@ -21,9 +22,11 @@ function outInTransitionHandler( name, reverse, $to, $from ) { .height( "" ); } - $to - .animationComplete( doneIn ) - .addClass( $.mobile.activePageClass ); + $to.addClass( $.mobile.activePageClass ); + + if( !none ){ + $to.animationComplete( doneIn ); + } // Send focus to page as it is now display: block $.mobile.focusPage( $to ); @@ -45,13 +48,16 @@ function outInTransitionHandler( name, reverse, $to, $from ) { $.mobile.silentScroll( toScroll ); } - + $to.addClass( name + " in" + reverseClass ); + if( none ){ + doneIn(); + } + }, doneIn = function() { - $to .removeClass( "out in reverse " + name ) .parent().removeClass( viewportClass ) @@ -66,10 +72,10 @@ function outInTransitionHandler( name, reverse, $to, $from ) { //clear page loader $.mobile.hidePageLoadingMsg(); - if ( $from ) { + if ( $from && !none ) { $from - .height( screenHeight + $(window ).scrollTop() ) .animationComplete( doneOut ) + .height( screenHeight + $(window ).scrollTop() ) .addClass( name + " out" + reverseClass ); } else { @@ -79,15 +85,15 @@ function outInTransitionHandler( name, reverse, $to, $from ) { return deferred.promise(); } -// Make our transition handler public. -$.mobile.outInTransitionHandler = outInTransitionHandler; - -// If the default transition handler is the 'none' handler, replace it with our handler. -if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) { - $.mobile.defaultTransitionHandler = outInTransitionHandler; -} - // add class for where 3d transforms are supported, or not $( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" ); +// Make our transition handler the public default. +$.mobile.defaultTransitionHandler = outInTransitionHandler; + +//transition handler dictionary for 3rd party transitions +$.mobile.transitionHandlers = { + "default": $.mobile.defaultTransitionHandler +}; + })( jQuery, this ); From c39cf6e6bc6c822620d018330c0d6a531e93443b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 17:37:02 +0700 Subject: [PATCH 082/137] updated docs page to describe the new transition handler and how it works. --- docs/pages/page-transitions.html | 68 +++++++++++++++++++------------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index fc1311d1..eb1ce243 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -28,35 +28,33 @@
    - slide - slideup - slidedown -
    -
    - pop + none fade + pop flip*
    - +
    + slide + slideup + slidedown + rotate +
    -

    rotate

    -

    Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

    +

    Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

    NOTE: The flip transition will only work on platforms with 3D Transform support. Devices that lack 3D support, will get a fade transition.

    Setting a transition on a link or form submit

    -

    By default, the framework applies the right to left slide transition. To set a custom transition effect, add the data-transition attribute to the link.

    +

    By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.

    <a href="index.html" data-transition="pop">I'll pop</a>

    When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the data-direction="reverse" attribute to a link. Note: (this was formerly data-back="true", which will remain supported until 1.0)

    - -

    For smoother page transitions, consider enabling the touchOverflow feature.

    - +

    Global configuration of transitions

    Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also set configured.

    @@ -89,7 +87,7 @@ } -

    During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.

    +

    During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.

    If your transition supports a reverse direction, you need to create CSS rules that use the reverse class in addition to the transition class name and the "in" and "out" classes:

    @@ -124,9 +122,18 @@

    In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:

    
-.in, .out {
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-duration: 350ms;
+.in {
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-timing-function: ease-out;
+	-moz-animation-duration: 350ms;
+}
+
+.out {
+	-webkit-animation-timing-function: ease-in;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-timing-function: ease-in;
+	-moz-animation-duration: 225;
 }
    @@ -138,15 +145,14 @@

    After the new page is loaded, the $.mobile.transitionHandlers dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option $.mobile.defaultTransitionHandler is invoked.

    -

    By default, the $.mobile.transitionHandlers dictionary is only populated with a single handler entry called "none". This handler simply removes the "ui-page-active" class from the page we are transitioning "from", and places it on the page we are transitioning "to". The transition is instantaneous; no animation, no fanfare.

    +

    By default, the $.mobile.transitionHandlers dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the "ui-page-active" class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.

    -

    The $.defaultTransitionHandler points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.

    +

    The $.mobile.defaultTransitionHandler points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.

    -

    Both the "none" and "css3" transition handlers are available off of the $.mobile namespace:

    +

    The default transition handler is available on the $.mobile namespace:

    
-$.mobile.noneTransitionHandler
-$.mobile.css3TransitionHandler
+$.mobile.transitionHandlers[ "default" ];

    Transition Handlers

    @@ -249,21 +255,27 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;

    Once you do this, your handler will be invoked any time a transition name is used but not found within the $.mobile.transitionHandlers dictionary.

    + +

    A model for Custom transition handler development

    +

    Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using jquery.mobile.transitions.js as a coding reference.

    Transitions and scroll position

    One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.

    - slide - slideup - slidedown -
    -
    - pop + none fade + pop flip*
    +
    + slide + slideup + slidedown + rotate +
    +

    rotate

    From 3271066c97a8a08f6629a27e76239d76326db858 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 17:49:03 +0700 Subject: [PATCH 083/137] updated the rotate transition to move the page out of view --- .../jquery.mobile.transitions.rotate.css | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.rotate.css b/css/structure/jquery.mobile.transitions.rotate.css index 83bdd1ec..7f273d89 100644 --- a/css/structure/jquery.mobile.transitions.rotate.css +++ b/css/structure/jquery.mobile.transitions.rotate.css @@ -1,51 +1,51 @@ @-webkit-keyframes rotateinfromleft { - from { -webkit-transform: rotate(-90deg); } + from { -webkit-transform: rotate(-180deg); } to { -webkit-transform: rotate(0deg); } } @-moz-keyframes rotateinfromleft { - from { -moz-transform: rotate(-90deg); } + from { -moz-transform: rotate(-180deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes rotateinfromright { - from { -webkit-transform: rotate(90deg); } + from { -webkit-transform: rotate(180deg); } to { -webkit-transform: rotate(0deg); } } @-moz-keyframes rotateinfromright { - from { -moz-transform: rotate(90deg); } + from { -moz-transform: rotate(180deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes rotateouttoright { from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(90deg); } + to { -webkit-transform: rotate(180deg); } } @-moz-keyframes rotateouttoright { from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(90deg); } + to { -moz-transform: rotate(180deg); } } @-webkit-keyframes rotateouttoleft { from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(-90deg); } + to { -webkit-transform: rotate(-180deg); } } @-moz-keyframes rotateouttoleft { from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(-90deg); } + to { -moz-transform: rotate(-180deg); } } .rotate { - -webkit-transform-origin: 50% 80%; - -webkit-transform-origin: 50% 80%; + -webkit-transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; } .rotate.out { - -webkit-transform: rotate(-90deg); + -webkit-transform: rotate(-180deg); -webkit-animation-name: rotateouttoleft; - -moz-transform: rotate(-90deg); + -moz-transform: rotate(-180deg); -moz-animation-name: rotateouttoleft; } @@ -57,9 +57,9 @@ } .rotate.out.reverse { - -webkit-transform: rotate(90deg); + -webkit-transform: rotate(180deg); -webkit-animation-name: rotateouttoright; - -moz-transform: rotate(90deg); + -moz-transform: rotate(180deg); -moz-animation-name: rotateouttoright; } From 69558f2cbde035f69c8b7caab46701558f63131c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 18:11:37 +0700 Subject: [PATCH 084/137] Added a new core option called maxTransitionWidth, which defaults to 1000. Accepts any number or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value. This is useful because transitions get very wonky on wider screens. --- js/jquery.mobile.core.js | 3 +++ js/jquery.mobile.transition.js | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 1a76143d..3d3370ba 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -39,6 +39,9 @@ define( [ "jquery.mobile.widget" ], function() { // Set default page transition - 'none' for no transitions defaultPageTransition: "fade", + + // Set maximum window width for transitions to apply + maxTransitionWidth: 1000, // Minimum scroll distance that will be remembered when returning to a page minScrollBack: 250, diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index ec87d671..0325bb21 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -13,7 +13,8 @@ function outInTransitionHandler( name, reverse, $to, $from ) { toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ), screenHeight = $.mobile.getScreenHeight(), viewportClass = "ui-mobile-viewport-transitioning viewport-" + name, - none = !$.support.cssTransitions || !name || name === "none", + maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth, + none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none", doneOut = function() { if ( $from ) { From b019e01201ad4d4b3d4c9f302ddb16d15da0cbd3 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 5 Jan 2012 18:15:17 +0700 Subject: [PATCH 085/137] updated docs to describe the maxTransitionWidth option. --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index eb1ce243..f1e52fe3 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -59,7 +59,7 @@

    Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also set configured.

    - +

    By default, transitions are disabled when the window width is greater than 1000px. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to 1000. The option accepts any number or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value. This is useful because transitions get very wonky on wider screens.

    Creating custom CSS-based transitions

    From 0b80c127780a9722a6ff58c94e8184caa688a3ff Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Thu, 5 Jan 2012 16:12:46 -0500 Subject: [PATCH 086/137] Updated page transition scripting/support test to allow for Firefox. --- js/jquery.mobile.navigation.js | 2 +- js/jquery.mobile.support.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 3dfcf31c..18dca9be 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -561,7 +561,7 @@ define( [ //animation complete callback $.fn.animationComplete = function( callback ) { if( $.support.cssTransitions ) { - return $( this ).one( 'webkitAnimationEnd', callback ); + return $( this ).one( 'webkitAnimationEnd animationend', callback ); } else{ // defer execution for consistency between webkit/non webkit diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 62e5311b..8c84354b 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -77,7 +77,11 @@ $.mobile.browser.ie = (function() { $.extend( $.support, { orientation: "orientation" in window && "onorientationchange" in window, touch: "ontouchend" in document, - cssTransitions: "WebKitTransitionEvent" in window, + cssTransitions: "WebKitTransitionEvent" in window || (function() { + var div = document.createElement( "div" ); + div.setAttribute('style', '-moz-transition: height 100ms linear'); + return !!div.style.MozTransition; + })(), pushState: "pushState" in history && "replaceState" in history, mediaquery: $.mobile.media( "only all" ), cssPseudoElement: !!propExists( "content" ), From 86e9c9df6871cbcc00042ce2f103894045e8437c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 15:52:43 +0700 Subject: [PATCH 087/137] removed fallback transition CSS for non-3D browsers --- css/structure/jquery.mobile.transitions.css | 12 ------ .../jquery.mobile.transitions.flip.css | 37 ++++-------------- .../jquery.mobile.transitions.pop.css | 36 ----------------- .../jquery.mobile.transitions.slide.css | 39 ------------------- 4 files changed, 7 insertions(+), 117 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.css b/css/structure/jquery.mobile.transitions.css index 819c3ade..7bccb841 100644 --- a/css/structure/jquery.mobile.transitions.css +++ b/css/structure/jquery.mobile.transitions.css @@ -18,16 +18,4 @@ -webkit-animation-duration: 225ms; -moz-animation-timing-function: ease-in; -moz-animation-duration: 225; -} - - -/* a dummy transition to override animations in non-3D browsers */ - -@-webkit-keyframes nofade { - from { outline:0; } - to { outline:0; } -} -@-moz-keyframes nofade { - from { outline:0; } - to { outline:0; } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index 4bfec34d..adafe1d1 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -5,44 +5,42 @@ * value. */ -.ui-supported-csstransform3d .viewport-flip { +.viewport-flip { -webkit-perspective: 1000; -moz-perspective: 1000; position: absolute; } -.ui-supported-csstransform3d .flip { +.flip { -webkit-backface-visibility:hidden; -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -moz-backface-visibility:hidden; -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ } -.ui-supported-csstransform3d .flip.out { +.flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; } -.ui-supported-csstransform3d .flip.in { +.flip.in { -webkit-animation-name: flipintoright; -moz-animation-name: flipintoright; } -.ui-supported-csstransform3d .flip.out.reverse { +.flip.out.reverse { -webkit-transform: rotateY(90deg) scale(.9); -webkit-animation-name: flipouttoright; -moz-transform: rotateY(90deg) scale(.9); -moz-animation-name: flipouttoright; } -.ui-supported-csstransform3d .flip.in.reverse { +.flip.in.reverse { -webkit-animation-name: flipintoleft; -moz-animation-name: flipintoleft; } - - @-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0); } to { -webkit-transform: rotateY(-90deg) scale(.9); } @@ -74,25 +72,4 @@ @-moz-keyframes flipintoright { from { -moz-transform: rotateY(90deg) scale(.9); } to { -moz-transform: rotateY(0); } -} - - - -/* for non-3d supporting browsers, fallback to fade */ -.ui-unsupported-csstransform3d .flip.out, -.ui-unsupported-csstransform3d .flip.out.reverse { - opacity: 0; - -webkit-animation-duration: 150ms; - -webkit-animation-name: fadeout; - -moz-animation-duration: 150ms; - -moz-animation-name: fadeout; -} - -.ui-unsupported-csstransform3d .flip.in, -.ui-unsupported-csstransform3d .flip.in.reverse { - opacity: 1; - -webkit-animation-duration: 300ms; - -webkit-animation-name: fadein; - -moz-animation-duration: 300ms; - -moz-animation-name: fadein; -} +} \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 6a25f7f0..9f9e9409 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -71,40 +71,4 @@ -moz-transform: scale(.8); opacity: 0; } -} - -/* for non-3d supporting browsers, remove the fade and just animate size */ - -.ui-unsupported-csstransform3d .pop.out, -.ui-unsupported-csstransform3d .pop.in.reverse { - -webkit-animation-duration: 200ms; - -webkit-animation-name: nofade; -} - -.ui-unsupported-csstransform3d .pop.in { - -webkit-animation-name: popin-basic; - -webkit-animation-duration: 325ms; -} -.ui-unsupported-csstransform3d .pop.out.reverse { - -webkit-transform: scale(0); - -webkit-animation-name: popout-basic; - -webkit-animation-duration: 325ms; -} - -@-webkit-keyframes popin-basic { - from { - -webkit-transform: scale(0); - } - to { - -webkit-transform: scale(1); - } -} - -@-webkit-keyframes popout-basic { - from { - -webkit-transform: scale(1); - } - to { - -webkit-transform: scale(0); - } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index b0d6babe..fbc1e9e5 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -149,43 +149,4 @@ @-moz-keyframes slideouttotop { from { -moz-transform: translateY(0); } to { -moz-transform: translateY(-100%); } -} - - -/* in non-3D browsers, get rid of the fade in animation and give them more duration to prevent jumping */ -.ui-unsupported-csstransform3d .slide.in, -.ui-unsupported-csstransform3d .slide.in.reverse, -.ui-unsupported-csstransform3d .slideup.in.reverse, -.ui-unsupported-csstransform3d .slidedown.in.reverse { - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* Also get rid of the fade out animation and use the same timing */ -.ui-unsupported-csstransform3d .slideup.out, -.ui-unsupported-csstransform3d .slidedown.out - { - -webkit-animation-name: nofade; - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-in; - -moz-animation-name: nofade; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-in; -} - -/* use similiar timing for slides that we don't need to exclude fades from */ -.ui-unsupported-csstransform3d .slide.out, -.ui-unsupported-csstransform3d .slide.out.reverse, -.ui-unsupported-csstransform3d .slideup.in, -.ui-unsupported-csstransform3d .slideup.out.reverse, -.ui-unsupported-csstransform3d .slidedown.out.reverse, -.ui-unsupported-csstransform3d .slidedown.in { - -webkit-animation-duration: 500ms; - -webkit-animation-timing-function: ease-out; - -moz-animation-duration: 500ms; - -moz-animation-timing-function: ease-out; } \ No newline at end of file From 40d9fa978a731474c112992922a66697d036d610 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 16:13:44 +0700 Subject: [PATCH 088/137] split the slide transitions into 3 files for slide, slidedown, and slideup --- css/structure/index.php | 2 + .../jquery.mobile.transitions.slide.css | 108 +----------------- .../jquery.mobile.transitions.slidedown.css | 42 +++++++ .../jquery.mobile.transitions.slideup.css | 42 +++++++ 4 files changed, 87 insertions(+), 107 deletions(-) create mode 100644 css/structure/jquery.mobile.transitions.slidedown.css create mode 100644 css/structure/jquery.mobile.transitions.slideup.css diff --git a/css/structure/index.php b/css/structure/index.php index 06ae787d..a8d62beb 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -6,6 +6,8 @@ $files = array_merge($files, array( '../../structure/jquery.mobile.transitions.fade.css', '../../structure/jquery.mobile.transitions.pop.css', '../../structure/jquery.mobile.transitions.slide.css', + '../../structure/jquery.mobile.transitions.slidedown.css', + '../../structure/jquery.mobile.transitions.slideup.css', '../../structure/jquery.mobile.transitions.flip.css', '../../structure/jquery.mobile.transitions.rotate.css', '../../structure/jquery.mobile.grids.css', diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index fbc1e9e5..fea66a5e 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -1,3 +1,4 @@ +/* slide transition */ .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; @@ -26,77 +27,6 @@ -moz-animation-name: fadein; } - -/* slide up */ - -.slideup.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; -} - -.slideup.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfrombottom; - -moz-transform: translateY(0); - -moz-animation-name: slideinfrombottom; -} - -.slideup.in.reverse { - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slideup.out.reverse { - -webkit-transform: translateY(100%); - -moz-transform: translateY(100%); - -webkit-animation-name: slideouttobottom; - -moz-animation-name: slideouttobottom; -} - -/* slide down */ - -.slidedown.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; -} - -.slidedown.in { - -webkit-transform: translateY(0); - -webkit-animation-name: slideinfromtop; - -moz-transform: translateY(0); - -moz-animation-name: slideinfromtop; -} - -.slidedown.in.reverse { - -webkit-animation-name: fadein; - -moz-animation-name: fadein; -} - -.slidedown.out.reverse { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -webkit-animation-name: slideouttotop; - -moz-animation-name: slideouttotop; -} - -@-webkit-keyframes slideinfromright { - from { -webkit-transform: translateX(100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromright { - from { -moz-transform: translateX(100%); } - to { -moz-transform: translateX(0); } -} - -@-webkit-keyframes slideinfromleft { - from { -webkit-transform: translateX(-100%); } - to { -webkit-transform: translateX(0); } -} -@-moz-keyframes slideinfromleft { - from { -moz-transform: translateX(-100%); } - to { -moz-transform: translateX(0); } -} - @-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } @@ -113,40 +43,4 @@ @-moz-keyframes slideouttoright { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100%); } -} - -@-webkit-keyframes slideinfromtop { - from { -webkit-transform: translateY(-100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfromtop { - from { -moz-transform: translateY(-100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideinfrombottom { - from { -webkit-transform: translateY(100%); } - to { -webkit-transform: translateY(0); } -} -@-moz-keyframes slideinfrombottom { - from { -moz-transform: translateY(100%); } - to { -moz-transform: translateY(0); } -} - -@-webkit-keyframes slideouttobottom { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(100%); } -} -@-moz-keyframes slideouttobottom { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(100%); } -} - -@-webkit-keyframes slideouttotop { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(-100%); } -} -@-moz-keyframes slideouttotop { - from { -moz-transform: translateY(0); } - to { -moz-transform: translateY(-100%); } } \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slidedown.css b/css/structure/jquery.mobile.transitions.slidedown.css new file mode 100644 index 00000000..3cb2ce84 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.slidedown.css @@ -0,0 +1,42 @@ +/* slide down */ +.slidedown.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; +} + +.slidedown.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfromtop; + -moz-transform: translateY(0); + -moz-animation-name: slideinfromtop; +} + +.slidedown.in.reverse { + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slidedown.out.reverse { + -webkit-transform: translateY(-100%); + -moz-transform: translateY(-100%); + -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; +} + +@-webkit-keyframes slideinfromtop { + from { -webkit-transform: translateY(-100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfromtop { + from { -moz-transform: translateY(-100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideouttotop { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(-100%); } +} +@-moz-keyframes slideouttotop { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(-100%); } +} \ No newline at end of file diff --git a/css/structure/jquery.mobile.transitions.slideup.css b/css/structure/jquery.mobile.transitions.slideup.css new file mode 100644 index 00000000..dab83155 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.slideup.css @@ -0,0 +1,42 @@ +/* slide up */ +.slideup.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; +} + +.slideup.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; +} + +.slideup.in.reverse { + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.slideup.out.reverse { + -webkit-transform: translateY(100%); + -moz-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; +} + +@-webkit-keyframes slideinfrombottom { + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } +} +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } +} + +@-webkit-keyframes slideouttobottom { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } +} +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } +} \ No newline at end of file From fd700aaa153cfb3802533920aa4be6be1a829050 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 16:20:24 +0700 Subject: [PATCH 089/137] removed the experimental rotate transition --- .../jquery.mobile.transitions.rotate.css | 72 ------------------- 1 file changed, 72 deletions(-) delete mode 100644 css/structure/jquery.mobile.transitions.rotate.css diff --git a/css/structure/jquery.mobile.transitions.rotate.css b/css/structure/jquery.mobile.transitions.rotate.css deleted file mode 100644 index 7f273d89..00000000 --- a/css/structure/jquery.mobile.transitions.rotate.css +++ /dev/null @@ -1,72 +0,0 @@ -@-webkit-keyframes rotateinfromleft { - from { -webkit-transform: rotate(-180deg); } - to { -webkit-transform: rotate(0deg); } -} -@-moz-keyframes rotateinfromleft { - from { -moz-transform: rotate(-180deg); } - to { -moz-transform: rotate(0deg); } -} - -@-webkit-keyframes rotateinfromright { - from { -webkit-transform: rotate(180deg); } - to { -webkit-transform: rotate(0deg); } -} - -@-moz-keyframes rotateinfromright { - from { -moz-transform: rotate(180deg); } - to { -moz-transform: rotate(0deg); } -} - -@-webkit-keyframes rotateouttoright { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(180deg); } -} - -@-moz-keyframes rotateouttoright { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(180deg); } -} - -@-webkit-keyframes rotateouttoleft { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(-180deg); } -} - -@-moz-keyframes rotateouttoleft { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(-180deg); } -} - -.rotate { - -webkit-transform-origin: 50% 100%; - -webkit-transform-origin: 50% 100%; -} - -.rotate.out { - -webkit-transform: rotate(-180deg); - -webkit-animation-name: rotateouttoleft; - -moz-transform: rotate(-180deg); - -moz-animation-name: rotateouttoleft; -} - -.rotate.in { - -webkit-transform: rotate(0deg); - -webkit-animation-name: rotateinfromright; - -moz-transform: rotate(0deg); - -moz-animation-name: rotateinfromright; -} - -.rotate.out.reverse { - -webkit-transform: rotate(180deg); - -webkit-animation-name: rotateouttoright; - -moz-transform: rotate(180deg); - -moz-animation-name: rotateouttoright; -} - -.rotate.in.reverse { - -webkit-transform: rotate(0deg); - -webkit-animation-name: rotateinfromleft; - -moz-transform: rotate(0deg); - -moz-animation-name: rotateinfromleft; -} - From 0dd88f4f8833c21545b930e2177ffe00e0fa0762 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 16:22:57 +0700 Subject: [PATCH 090/137] implemented fallback transition definitions for non-3D-supporting browsers, for all transitions except "fade". By default, these are all set to fall back to "fade", and they'll fall back to "none" if 3D is unsupported and no fallback is defined. They can be overridden at mobileinit, like any other jQM default. --- js/index.php | 6 ++++++ js/jquery.mobile.transition.flip.js | 9 +++++++++ js/jquery.mobile.transition.js | 7 +++++++ js/jquery.mobile.transition.pop.js | 9 +++++++++ js/jquery.mobile.transition.slide.js | 9 +++++++++ js/jquery.mobile.transition.slidedown.js | 9 +++++++++ js/jquery.mobile.transition.slideup.js | 9 +++++++++ 7 files changed, 58 insertions(+) create mode 100644 js/jquery.mobile.transition.flip.js create mode 100644 js/jquery.mobile.transition.pop.js create mode 100644 js/jquery.mobile.transition.slide.js create mode 100644 js/jquery.mobile.transition.slidedown.js create mode 100644 js/jquery.mobile.transition.slideup.js diff --git a/js/index.php b/js/index.php index 4a4a2e06..fac0c2ff 100644 --- a/js/index.php +++ b/js/index.php @@ -18,6 +18,12 @@ $files = array( 'jquery.mobile.navigation.js', 'jquery.mobile.navigation.pushstate.js', 'jquery.mobile.transition.js', + 'jquery.mobile.transition.js', + 'jquery.mobile.transition.pop.js', + 'jquery.mobile.transition.slide.js', + 'jquery.mobile.transition.slidedown.js', + 'jquery.mobile.transition.slideup.js', + 'jquery.mobile.transition.flip.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', diff --git a/js/jquery.mobile.transition.flip.js b/js/jquery.mobile.transition.flip.js new file mode 100644 index 00000000..9df38cdd --- /dev/null +++ b/js/jquery.mobile.transition.flip.js @@ -0,0 +1,9 @@ +/* +* fallback transition for flip in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.flip = "fade"; + +})( jQuery, this ); diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 0325bb21..07f20810 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -6,6 +6,11 @@ function outInTransitionHandler( name, reverse, $to, $from ) { + // first, override name if there's no 3D transform support and a fallback is defined + if( name && !$.support.cssTransform3d ){ + name = $.mobile.transitionFallbacks[ name ] || "none"; + } + var deferred = new $.Deferred(), reverseClass = reverse ? " reverse" : "", active = $.mobile.urlHistory.getActive(), @@ -97,4 +102,6 @@ $.mobile.transitionHandlers = { "default": $.mobile.defaultTransitionHandler }; +$.mobile.transitionFallbacks = {}; + })( jQuery, this ); diff --git a/js/jquery.mobile.transition.pop.js b/js/jquery.mobile.transition.pop.js new file mode 100644 index 00000000..3f621f29 --- /dev/null +++ b/js/jquery.mobile.transition.pop.js @@ -0,0 +1,9 @@ +/* +* fallback transition for pop in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.pop = "fade"; + +})( jQuery, this ); diff --git a/js/jquery.mobile.transition.slide.js b/js/jquery.mobile.transition.slide.js new file mode 100644 index 00000000..d7a8cf80 --- /dev/null +++ b/js/jquery.mobile.transition.slide.js @@ -0,0 +1,9 @@ +/* +* fallback transition for slide in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.slide = "fade"; + +})( jQuery, this ); diff --git a/js/jquery.mobile.transition.slidedown.js b/js/jquery.mobile.transition.slidedown.js new file mode 100644 index 00000000..08d60222 --- /dev/null +++ b/js/jquery.mobile.transition.slidedown.js @@ -0,0 +1,9 @@ +/* +* fallback transition for slidedown in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.slidedown = "fade"; + +})( jQuery, this ); diff --git a/js/jquery.mobile.transition.slideup.js b/js/jquery.mobile.transition.slideup.js new file mode 100644 index 00000000..2b37ff40 --- /dev/null +++ b/js/jquery.mobile.transition.slideup.js @@ -0,0 +1,9 @@ +/* +* fallback transition for slideup in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.slideup = "fade"; + +})( jQuery, this ); From d1edb4f98c9d62d13d8eebb5e9e7cdfea93d4474 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 16:24:10 +0700 Subject: [PATCH 091/137] better comment --- js/jquery.mobile.transition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 07f20810..ecdf66fb 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -6,7 +6,7 @@ function outInTransitionHandler( name, reverse, $to, $from ) { - // first, override name if there's no 3D transform support and a fallback is defined + // override name if there's no 3D transform support and a fallback is defined, or if not, to "none" if( name && !$.support.cssTransform3d ){ name = $.mobile.transitionFallbacks[ name ] || "none"; } From ffa23bc137515bf6a42c57dda0d9639b2efdedd3 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 17:14:44 +0700 Subject: [PATCH 092/137] removed rotate transition from concat files and docs --- css/structure/index.php | 1 - docs/pages/page-transitions.html | 1 - 2 files changed, 2 deletions(-) diff --git a/css/structure/index.php b/css/structure/index.php index a8d62beb..2caf80b5 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -9,7 +9,6 @@ $files = array_merge($files, array( '../../structure/jquery.mobile.transitions.slidedown.css', '../../structure/jquery.mobile.transitions.slideup.css', '../../structure/jquery.mobile.transitions.flip.css', - '../../structure/jquery.mobile.transitions.rotate.css', '../../structure/jquery.mobile.grids.css', '../../structure/jquery.mobile.headerfooter.css', '../../structure/jquery.mobile.navbar.css', diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index f1e52fe3..c31dedbd 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -37,7 +37,6 @@ slide slideup slidedown - rotate From 8f5e263bd89c67ab2d5d6e6eaeb3718ea83459b3 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 21:09:12 +0700 Subject: [PATCH 093/137] added an experimental 3D transition, "flow" --- css/structure/index.php | 1 + .../jquery.mobile.transitions.flow.css | 85 +++++++++++++++++++ docs/pages/page-transitions.html | 3 +- 3 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 css/structure/jquery.mobile.transitions.flow.css diff --git a/css/structure/index.php b/css/structure/index.php index 2caf80b5..0687ecf9 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -9,6 +9,7 @@ $files = array_merge($files, array( '../../structure/jquery.mobile.transitions.slidedown.css', '../../structure/jquery.mobile.transitions.slideup.css', '../../structure/jquery.mobile.transitions.flip.css', + '../../structure/jquery.mobile.transitions.flow.css', '../../structure/jquery.mobile.grids.css', '../../structure/jquery.mobile.headerfooter.css', '../../structure/jquery.mobile.navbar.css', diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css new file mode 100644 index 00000000..1a3c2eda --- /dev/null +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -0,0 +1,85 @@ +/* flow transition */ +.flow { + -webkit-transform-origin: 30% 30%; + -moz-transform-origin: 30% 30%; +} +.flow.out { + -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); + -webkit-animation-name: flowouttoleft; + -webkit-animation-timing-function: ease; + -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); + -moz-animation-name: flowouttoleft; + -moz-animation-timing-function: ease; +} + +.flow.in { + -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; + -webkit-animation-name: flowinfromright; + -webkit-animation-timing-function: ease; + -moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; + -moz-animation-name: flowinfromright; + -moz-animation-timing-function: ease; +} + +.flow.out.reverse { + -webkit-transform: translateX(100%); + -webkit-animation-name: flowouttoright; + -moz-transform: translateX(100%); + -moz-animation-name: flowouttoright; +} + +.flow.in.reverse { + -webkit-animation-name: flowinfromleft; + -moz-animation-name: flowinfromleft; +} + +@-webkit-keyframes flowouttoleft { + 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } +} +@-moz-keyframes flowouttoleft { + 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } +} + +@-webkit-keyframes flowouttoright { + 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } +} +@-moz-keyframes flowouttoright { + 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } +} + +@-webkit-keyframes flowinfromleft { + 0% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } +} +@-moz-keyframes flowinfromleft { + 0% { -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } +} +@-webkit-keyframes flowinfromright { + 0% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } +} +@-moz-keyframes flowinfromright { + 0% { -moz-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0); } +} \ No newline at end of file diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index c31dedbd..6c16f357 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -37,6 +37,7 @@ slide slideup slidedown + flow @@ -271,7 +272,7 @@ $.mobile.defaultTransitionHandler = myTransitionHandler; slide slideup slidedown - rotate + flow From a7e15820d80a023305235556fb72b49c0f121e20 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 21:24:09 +0700 Subject: [PATCH 094/137] changed up the timing and origin --- css/structure/jquery.mobile.transitions.flow.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index 1a3c2eda..e87fc76c 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -1,24 +1,28 @@ /* flow transition */ .flow { - -webkit-transform-origin: 30% 30%; - -moz-transform-origin: 30% 30%; + -webkit-transform-origin: 50% 30%; + -moz-transform-origin: 50% 30%; } .flow.out { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); -webkit-animation-name: flowouttoleft; -webkit-animation-timing-function: ease; + -webkit-animation-duration: 500ms; -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); -moz-animation-name: flowouttoleft; -moz-animation-timing-function: ease; + -moz-animation-duration: 500ms; } .flow.in { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; -webkit-animation-name: flowinfromright; -webkit-animation-timing-function: ease; + -webkit-animation-duration: 400ms; -moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; -moz-animation-name: flowinfromright; -moz-animation-timing-function: ease; + -moz-animation-duration: 400ms; } .flow.out.reverse { From 75d0d95bea600f363a981c246d7adbd8afcabbfe Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 22:35:35 +0700 Subject: [PATCH 095/137] pulled out the 3D madness --- .../jquery.mobile.transitions.flow.css | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index e87fc76c..c5800f0d 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -4,25 +4,25 @@ -moz-transform-origin: 50% 30%; } .flow.out { - -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); + -webkit-transform: translateX(-100%) scale(.7); -webkit-animation-name: flowouttoleft; -webkit-animation-timing-function: ease; - -webkit-animation-duration: 500ms; - -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); + -webkit-animation-duration: 400ms; + -moz-transform: translateX(-100%) scale(.7); -moz-animation-name: flowouttoleft; -moz-animation-timing-function: ease; - -moz-animation-duration: 500ms; + -moz-animation-duration: 400ms; } .flow.in { - -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; + -webkit-transform: translateX(0) scale(1); -webkit-animation-name: flowinfromright; -webkit-animation-timing-function: ease; - -webkit-animation-duration: 400ms; - -moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; + -webkit-animation-duration: 300ms; + -moz-transform: translateX(0) scale(1); -moz-animation-name: flowinfromright; -moz-animation-timing-function: ease; - -moz-animation-duration: 400ms; + -moz-animation-duration: 300ms; } .flow.out.reverse { @@ -38,52 +38,52 @@ } @-webkit-keyframes flowouttoleft { - 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } - 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 0% { -webkit-transform: translateX(0) scale(1); } + 60% { -webkit-transform: translateX(0) scale(.7); } + 70% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(-100%) scale(.7); } } @-moz-keyframes flowouttoleft { - 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } - 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 0% { -webkit-transform: translateX(0) scale(1); } + 60% { -webkit-transform: translateX(0) scale(.7); } + 70% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { - 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } - 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 0% { -webkit-transform: translateX(0) scale(1); } + 60% { -webkit-transform: translateX(0) scale(.7); } + 70% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(100%) scale(.7); } } @-moz-keyframes flowouttoright { - 0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } - 60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } + 0% { -webkit-transform: translateX(0) scale(1); } + 60% { -webkit-transform: translateX(0) scale(.7); } + 70% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(100%) scale(.7); } } @-webkit-keyframes flowinfromleft { - 0% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 0% { -webkit-transform: translateX(-100%) scale(.7); } + 30% { -webkit-transform: translateX(0) scale(.7); } + 40% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromleft { - 0% { -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 0% { -moz-transform: translateX(-100%) scale(.7); } + 30% { -webkit-transform: translateX(0) scale(.7); } + 40% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(0) scale(1); } } @-webkit-keyframes flowinfromright { - 0% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; } + 0% { -webkit-transform: translateX(100%) scale(.7); } + 30% { -webkit-transform: translateX(0) scale(.7); } + 40% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromright { - 0% { -moz-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); } - 100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0); } + 0% { -moz-transform: translateX(100%) scale(.7); } + 30% { -webkit-transform: translateX(0) scale(.7); } + 40% { -webkit-transform: translateX(0) scale(.7); } + 100% { -webkit-transform: translateX(0) scale(1); } } \ No newline at end of file From 8d0c2402ca52993ab00bd319ae1b61ccfaa8e9d5 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 22:48:06 +0700 Subject: [PATCH 096/137] better check for supporting fallback --- js/jquery.mobile.transition.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index ecdf66fb..a2a8cb1a 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -7,8 +7,8 @@ function outInTransitionHandler( name, reverse, $to, $from ) { // override name if there's no 3D transform support and a fallback is defined, or if not, to "none" - if( name && !$.support.cssTransform3d ){ - name = $.mobile.transitionFallbacks[ name ] || "none"; + if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){ + name = $.mobile.transitionFallbacks[ name ]; } var deferred = new $.Deferred(), From c09c767bd51e8329c72d8480ef6fb7aef91eaf36 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Mon, 9 Jan 2012 22:51:35 +0700 Subject: [PATCH 097/137] added fallback transition for flow --- js/jquery.mobile.transition.flow.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 js/jquery.mobile.transition.flow.js diff --git a/js/jquery.mobile.transition.flow.js b/js/jquery.mobile.transition.flow.js new file mode 100644 index 00000000..41a03fdc --- /dev/null +++ b/js/jquery.mobile.transition.flow.js @@ -0,0 +1,9 @@ +/* +* fallback transition for flow in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.flow = "fade"; + +})( jQuery, this ); From 4f570f309579d50e7f38ffa932583588c1a0ba35 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 12:59:24 +0700 Subject: [PATCH 098/137] one too many transition js refs --- js/index.php | 1 - 1 file changed, 1 deletion(-) diff --git a/js/index.php b/js/index.php index fac0c2ff..26f61e97 100644 --- a/js/index.php +++ b/js/index.php @@ -18,7 +18,6 @@ $files = array( 'jquery.mobile.navigation.js', 'jquery.mobile.navigation.pushstate.js', 'jquery.mobile.transition.js', - 'jquery.mobile.transition.js', 'jquery.mobile.transition.pop.js', 'jquery.mobile.transition.slide.js', 'jquery.mobile.transition.slidedown.js', From 7e0de23e61bf5557152d7102ae8d070ffd9dad6b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 13:00:55 +0700 Subject: [PATCH 099/137] added reference to flow transition fallback --- js/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/js/index.php b/js/index.php index 26f61e97..d13ae045 100644 --- a/js/index.php +++ b/js/index.php @@ -23,6 +23,7 @@ $files = array( 'jquery.mobile.transition.slidedown.js', 'jquery.mobile.transition.slideup.js', 'jquery.mobile.transition.flip.js', + 'jquery.mobile.transition.flow.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', From 679a46dbf0c5fcd300c3bcd7faff902168df587f Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 13:23:55 +0700 Subject: [PATCH 100/137] even when stubbing out the function for testing, this $.fn needs to return this (it's relied upon for chaining in nav) --- tests/unit/navigation/navigation_transitions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/unit/navigation/navigation_transitions.js b/tests/unit/navigation/navigation_transitions.js index 5a44806c..2cb526c1 100644 --- a/tests/unit/navigation/navigation_transitions.js +++ b/tests/unit/navigation/navigation_transitions.js @@ -54,6 +54,7 @@ //stub to prevent class removal $.fn.animationComplete = function(callback){ callbackQueue.unshift(callback); + return this; }; clearPageTransitionStack(); From 6e2f1cd64fbc16e32395e88df5b0ea5da2af5da0 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 14:06:24 +0700 Subject: [PATCH 101/137] moved the hide loader call back to nav again --- js/jquery.mobile.navigation.js | 3 +++ js/jquery.mobile.transition.js | 5 +---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 18dca9be..730e6ebb 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -500,6 +500,9 @@ define( [ } toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } ); + + //clear page loader + $.mobile.hidePageLoadingMsg(); //find the transition handler for the specified transition. If there //isn't one in our transitionHandlers dictionary, use the default one. diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index a2a8cb1a..45039698 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -73,10 +73,7 @@ function outInTransitionHandler( name, reverse, $to, $from ) { }; $to - .parent().addClass( viewportClass ); - - //clear page loader - $.mobile.hidePageLoadingMsg(); + .parent().addClass( viewportClass ); if ( $from && !none ) { $from From 67aec832cbb2dfb94074e8d4707c44977e4ba0a9 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 14:07:07 +0700 Subject: [PATCH 102/137] removed old commented out code --- js/jquery.mobile.navigation.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 730e6ebb..d5deb1a3 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -478,19 +478,6 @@ define( [ // bind to scrollstop for the first page as "pagechange" won't be fired in that case getScrollElem().bind( "scrollstop", delayedSetLastScroll ); - // 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 ) { From e35327c8941905076475694259962af7ac25e52a Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 10 Jan 2012 17:30:28 +0700 Subject: [PATCH 103/137] rewrote the transitions test suite and handlers to account for our new sequence. The main difference is most tests are async now, and use two functions: onFromComplete and onToComplete to test conditions before each page's animationComplete handler finishes (while animation classes are still present, for instance). onToComplete must call start() so that pages stay in proper sequences, as fromComplete may not always run depending on pages in play, and it's only halfway done in the trans.Needs more tests now! --- .../unit/navigation/navigation_transitions.js | 154 ++++++++++-------- 1 file changed, 88 insertions(+), 66 deletions(-) diff --git a/tests/unit/navigation/navigation_transitions.js b/tests/unit/navigation/navigation_transitions.js index 2cb526c1..95f4dbdc 100644 --- a/tests/unit/navigation/navigation_transitions.js +++ b/tests/unit/navigation/navigation_transitions.js @@ -20,27 +20,22 @@ }, //animationComplete callback queue - callbackQueue = [], + fromQueue = [], + toQueue = [], - finishPageTransition = function(){ - callbackQueue.pop()(); + resetQueues = function(){ + fromQueue = []; + toQueue = []; }, - - clearPageTransitionStack = function(){ - stop(); - var checkTransitionStack = function(){ - if(callbackQueue.length>0) { - setTimeout(function(){ - finishPageTransition(); - checkTransitionStack(); - },0); - } - else { - start(); - } - }; - checkTransitionStack(); + + onFromComplete = function( f ){ + fromQueue.push( f ); }, + + onToComplete = function( f ){ + toQueue.push( f ); + }, + //wipe all urls clearUrlHistory = function(){ @@ -51,13 +46,19 @@ module('jquery.mobile.navigation.js', { setup: function(){ - //stub to prevent class removal - $.fn.animationComplete = function(callback){ - callbackQueue.unshift(callback); + //stub to allow callback before function is returned to transition handler + $.fn.animationComplete = function( callback ){ + animationCompleteFn.call( this, function(){ + var queue = $(this).is(".out") ? fromQueue : toQueue; + for( var i = 0, il = queue.length; i < il; i++ ){ + queue.pop()( this ); + } + callback(); + }); return this; }; - clearPageTransitionStack(); + resetQueues(); clearUrlHistory(); }, @@ -66,87 +67,108 @@ $.fn.animationComplete = animationCompleteFn; } }); + + /* + NOTES: + Our default transition handler now has either one or two animationComplete calls - two if there are two pages in play (from and to) + To is required, so each async function must call start() onToComplete, not onFromComplete. + */ + - test( "changePage applys perspective class to mobile viewport for flip", function(){ + asyncTest( "changePage applies perspective class to mobile viewport for flip", function(){ + expect(1); + + onToComplete( function( el ){ + ok($("body").hasClass(perspective), "has perspective class"); + start(); + } ); + $("#foo > a").click(); - ok($("body").hasClass(perspective), "has perspective class"); }); - - test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){ + + asyncTest( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){ + expect(1); + + onToComplete( function( el ){ + ok(!$("body").hasClass(perspective), "doesn't have perspective class"); + start(); + } ); + $("#bar > a").click(); - - ok(!$("body").hasClass(perspective), "doesn't have perspective class"); }); - - test( "changePage applys transition class to mobile viewport for default transition", function(){ + + asyncTest( "changePage applies transition class to mobile viewport for default transition", function(){ + expect(1); + + onToComplete( function( el ){ + ok($("body").hasClass(transitioning), "has transitioning class"); + start(); + } ); + $("#baz > a").click(); - ok($("body").hasClass(transitioning), "has transitioning class"); }); - - test( "explicit transition preferred for page navigation reversal (ie back)", function(){ - $("#fade-trans > a").click(); - stop(); - setTimeout(function(){ - finishPageTransition(); + + asyncTest( "explicit transition preferred for page navigation reversal (ie back)", function(){ + expect( 1 ); + + onToComplete(function(){ $("#flip-trans > a").click(); - setTimeout(function(){ - finishPageTransition(); + onToComplete(function(){ $("#fade-trans > a").click(); - setTimeout(function(){ + onToComplete(function(){ ok($("#flip-trans").hasClass("fade"), "has fade class"); start(); - },0); - },0); - },0); + }); + }); + }); + + $("#fade-trans > a").click(); }); - test( "default transition is slide", function(){ - $("#default-trans > a").click(); - stop(); - setTimeout(function(){ - ok($("#no-trans").hasClass("slide"), "has slide class"); + asyncTest( "default transition is fade", function(){ + onToComplete(function(){ + ok($("#no-trans").hasClass("fade"), "has fade class"); start(); - },0); + }) + + $("#default-trans > a").click(); }); - test( "changePage queues requests", function(){ + asyncTest( "changePage queues requests", function(){ + expect(4) var firstPage = $("#foo"), secondPage = $("#bar"); $.mobile.changePage(firstPage); $.mobile.changePage(secondPage); - stop(); - setTimeout(function(){ + onToComplete(function(){ ok(isTransitioningIn(firstPage), "first page begins transition"); ok(!isTransitioningIn(secondPage), "second page doesn't transition yet"); - - finishPageTransition(); - - setTimeout(function(){ + onToComplete(function(){ ok(!isTransitioningIn(firstPage), "first page transition should be complete"); ok(isTransitioningIn(secondPage), "second page should begin transitioning"); start(); - },0); - },0); + + }); + }); }); - test( "default transition is pop for a dialog", function(){ + asyncTest( "default transition is pop for a dialog", function(){ expect( 1 ); - stop(); - setTimeout(function(){ - $("#default-trans-dialog > a").click(); - - ok($("#no-trans-dialog").hasClass("pop"), "expected the pop class to be present but instead was " + $("#no-trans-dialog").attr('class')); - + onToComplete(function(){ + ok($("#no-trans-dialog").hasClass("pop"), "has pop class" ); start(); - }, 900); + }); + + $("#default-trans-dialog > a").click(); }); test( "animationComplete return value", function(){ $.fn.animationComplete = animationCompleteFn; equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]); }); + })(jQuery); From fab717a4590c42acbbd8b4cf87601cc5c9c01756 Mon Sep 17 00:00:00 2001 From: toddparker Date: Tue, 10 Jan 2012 10:29:04 -0500 Subject: [PATCH 104/137] Added in drop shadow on pages in "flow" transition, adjusted timing to be longer --- css/structure/jquery.mobile.transitions.flow.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index c5800f0d..b5f1e30b 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -2,27 +2,30 @@ .flow { -webkit-transform-origin: 50% 30%; -moz-transform-origin: 50% 30%; + -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); + -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); + } .flow.out { -webkit-transform: translateX(-100%) scale(.7); -webkit-animation-name: flowouttoleft; -webkit-animation-timing-function: ease; - -webkit-animation-duration: 400ms; - -moz-transform: translateX(-100%) scale(.7); + -webkit-animation-duration: 500ms; + -moz-transform: translateX(-100%) scale(.7); -moz-animation-name: flowouttoleft; -moz-animation-timing-function: ease; - -moz-animation-duration: 400ms; + -moz-animation-duration: 500ms; } .flow.in { -webkit-transform: translateX(0) scale(1); -webkit-animation-name: flowinfromright; -webkit-animation-timing-function: ease; - -webkit-animation-duration: 300ms; + -webkit-animation-duration: 400ms; -moz-transform: translateX(0) scale(1); -moz-animation-name: flowinfromright; -moz-animation-timing-function: ease; - -moz-animation-duration: 300ms; + -moz-animation-duration: 400ms; } .flow.out.reverse { From 3da8b6e2455f67089038a83fdb6a1774c9e9317e Mon Sep 17 00:00:00 2001 From: toddparker Date: Tue, 10 Jan 2012 10:31:36 -0500 Subject: [PATCH 105/137] Whitespace --- css/structure/jquery.mobile.transitions.flow.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index b5f1e30b..641f4395 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -4,7 +4,6 @@ -moz-transform-origin: 50% 30%; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); - } .flow.out { -webkit-transform: translateX(-100%) scale(.7); From a2145cb2b52ad432027945bd63f4268bed64c59c Mon Sep 17 00:00:00 2001 From: toddparker Date: Tue, 10 Jan 2012 11:15:19 -0500 Subject: [PATCH 106/137] Added docs to cover the new transitions --- docs/pages/page-transitions.html | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 6c16f357..f2f16302 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -31,7 +31,7 @@ none fade pop - flip* + flip
    slide @@ -41,11 +41,11 @@
    + +

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,00 pixels, all transitions are set to "none". These behaviors are all configurable (see below).

    +

    Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

    -

    NOTE: The flip transition will only work on platforms with 3D Transform support. Devices that lack 3D support, will get a fade transition.

    - -

    Setting a transition on a link or form submit

    By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.

    @@ -58,9 +58,21 @@

    Global configuration of transitions

    Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also set configured.

    - -

    By default, transitions are disabled when the window width is greater than 1000px. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to 1000. The option accepts any number or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value. This is useful because transitions get very wonky on wider screens.

    + +

    Browser support and performance

    +

    All transitions are built with CSS keyframe animations and include both -webkit vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and -moz rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.

    + +

    Defining fallback transitions for non-3D support

    +

    By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

    + +

    The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

    + $.mobile.fallbackTransition.slideout = "none" + +

    Setting a max width for transitions

    +

    By default, transitions are disabled (set to "none") when the window width is greater than 1000px. We do this because many transitions can be distracting and perform poorly on larger screens. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to 1000. The option accepts any number or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value. This is useful because transitions get very wonky on wider screens.

    + +

    Creating custom CSS-based transitions

    @@ -266,7 +278,7 @@ $.mobile.defaultTransitionHandler = myTransitionHandler; none fade pop - flip* + flip
    slide From d7f9cee654bea9a160d769a679b3489e82b14614 Mon Sep 17 00:00:00 2001 From: toddparker Date: Tue, 10 Jan 2012 11:27:24 -0500 Subject: [PATCH 107/137] Removed setDefaultTransition in docs.js This isn't needed anymore. --- docs/_assets/js/jqm-docs.js | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/docs/_assets/js/jqm-docs.js b/docs/_assets/js/jqm-docs.js index a1184376..a34f4364 100644 --- a/docs/_assets/js/jqm-docs.js +++ b/docs/_assets/js/jqm-docs.js @@ -36,26 +36,6 @@ $(function(){ }); }); -function setDefaultTransition(){ - var winwidth = $( window ).width(), - trans ="slide"; - - if( winwidth >= 1000 ){ - trans = "none"; - } - else if( winwidth >= 650 ){ - trans = "fade"; - } - - $.mobile.defaultPageTransition = trans; -} - - -$(function(){ - //setDefaultTransition(); - //$( window ).bind( "throttledresize", setDefaultTransition ); -}); - // Turn off AJAX for local file browsing if ( location.protocol.substr(0,4) === 'file' || From 92fd8f663ca9032ee8ed4dab96ac73aeb097ad65 Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Mon, 9 Jan 2012 11:01:07 -0800 Subject: [PATCH 108/137] Fixes #3394 - jquery.mobile.init was not being included in the built bundle --- Makefile | 1 + 1 file changed, 1 insertion(+) diff --git a/Makefile b/Makefile index 224545d4..dbb955a9 100644 --- a/Makefile +++ b/Makefile @@ -116,6 +116,7 @@ js: init include=jquery.mobile,jquery.mobile.exports exclude=jquery,order \ out=${OUTPUT}/${NAME}.compiled.js \ pragmasOnSave.jqmBuildExclude=true \ + findNestedDependencies=true \ skipModuleInsertion=true \ optimize=none @@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${NAME}.js From b07f34778709db8d22f17a10db7dd241267eb15b Mon Sep 17 00:00:00 2001 From: Chetan K Jain Date: Tue, 10 Jan 2012 21:00:14 +0530 Subject: [PATCH 109/137] fixes #3400 --- docs/api/methods.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/methods.html b/docs/api/methods.html index dc84eb9d..d4835330 100755 --- a/docs/api/methods.html +++ b/docs/api/methods.html @@ -466,7 +466,7 @@ var isRel = $.mobile.path.isRelativeUrl("#foo");
    url (string, required) A relative or absolute URL.
    · Return Value
    -
    This function returns a boolean true if the URL is absolute, false if it is absolute.
    +
    This function returns a boolean true if the URL is absolute, false if not.
    From 8567dd6b073635bfde9e4d430c28c606b30151a3 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Tue, 10 Jan 2012 12:14:27 -0500 Subject: [PATCH 110/137] Fixed theme CSS inclusion on docs index. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 1493973c..f87353d1 100755 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ jQuery Mobile: Demos and Documentation - + From 1f5449e552f406b4aa2b91f746a78e0f37b68e75 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Mon, 9 Jan 2012 15:36:03 -0500 Subject: [PATCH 111/137] Added page turning transition. --- css/structure/index.php | 1 + .../jquery.mobile.transitions.turn.css | 78 +++++++++++++++++++ docs/pages/page-transitions.html | 10 +-- js/index.php | 1 + js/jquery.mobile.transition.turn.js | 9 +++ 5 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 css/structure/jquery.mobile.transitions.turn.css create mode 100644 js/jquery.mobile.transition.turn.js diff --git a/css/structure/index.php b/css/structure/index.php index 0687ecf9..ec4ff6ff 100644 --- a/css/structure/index.php +++ b/css/structure/index.php @@ -9,6 +9,7 @@ $files = array_merge($files, array( '../../structure/jquery.mobile.transitions.slidedown.css', '../../structure/jquery.mobile.transitions.slideup.css', '../../structure/jquery.mobile.transitions.flip.css', + '../../structure/jquery.mobile.transitions.turn.css', '../../structure/jquery.mobile.transitions.flow.css', '../../structure/jquery.mobile.grids.css', '../../structure/jquery.mobile.headerfooter.css', diff --git a/css/structure/jquery.mobile.transitions.turn.css b/css/structure/jquery.mobile.transitions.turn.css new file mode 100644 index 00000000..c606b1f9 --- /dev/null +++ b/css/structure/jquery.mobile.transitions.turn.css @@ -0,0 +1,78 @@ +/* The properties in this rule are only necessary for the 'flip' transition. + * We need specify the perspective to create a projection matrix. This will add + * some depth as the element flips. The depth number represents the distance of + * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate + * value. + */ + +.viewport-turn { + -webkit-perspective: 1000; + -moz-perspective: 1000; + position: absolute; +} +.turn { + -webkit-backface-visibility:hidden; + -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -webkit-transform-origin: 0; + + -moz-backface-visibility:hidden; + -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-transform-origin: 0; +} + +.turn.out { + -webkit-transform: rotateY(-90deg) scale(.9); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-90deg) scale(.9); + -moz-animation-name: flipouttoleft; +} + +.turn.in { + -webkit-animation-name: flipintoright; + -moz-animation-name: flipintoright; +} + +.turn.out.reverse { + -webkit-transform: rotateY(90deg) scale(.9); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(90deg) scale(.9); + -moz-animation-name: flipouttoright; +} + +.turn.in.reverse { + -webkit-animation-name: flipintoleft; + -moz-animation-name: flipintoleft; +} + +@-webkit-keyframes flipouttoleft { + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-90deg) scale(.9); } +} +@-moz-keyframes flipouttoleft { + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-90deg) scale(.9); } +} +@-webkit-keyframes flipouttoright { + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(90deg) scale(.9); } +} +@-moz-keyframes flipouttoright { + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(90deg) scale(.9); } +} +@-webkit-keyframes flipintoleft { + from { -webkit-transform: rotateY(-90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipintoleft { + from { -moz-transform: rotateY(-90deg) scale(.9); } + to { -moz-transform: rotateY(0); } +} +@-webkit-keyframes flipintoright { + from { -webkit-transform: rotateY(90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } +} +@-moz-keyframes flipintoright { + from { -moz-transform: rotateY(90deg) scale(.9); } + to { -moz-transform: rotateY(0); } +} diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index f2f16302..297f41c8 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -25,19 +25,19 @@

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

    -
    none fade pop flip + turn
    - slide - slideup - slidedown - flow + slide + slideup + slidedown + flow
    diff --git a/js/index.php b/js/index.php index d13ae045..6745506d 100644 --- a/js/index.php +++ b/js/index.php @@ -24,6 +24,7 @@ $files = array( 'jquery.mobile.transition.slideup.js', 'jquery.mobile.transition.flip.js', 'jquery.mobile.transition.flow.js', + 'jquery.mobile.transition.turn.js', 'jquery.mobile.degradeInputs.js', 'jquery.mobile.dialog.js', 'jquery.mobile.page.sections.js', diff --git a/js/jquery.mobile.transition.turn.js b/js/jquery.mobile.transition.turn.js new file mode 100644 index 00000000..1b10639c --- /dev/null +++ b/js/jquery.mobile.transition.turn.js @@ -0,0 +1,9 @@ +/* +* fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general +*/ + +(function( $, window, undefined ) { + +$.mobile.transitionFallbacks.turn = "fade"; + +})( jQuery, this ); From 68216bbd793aa89598a7a0a14dd1740e42ba6621 Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Tue, 10 Jan 2012 17:00:11 -0500 Subject: [PATCH 112/137] Missing a 0, thanks @agcolom! --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 297f41c8..2abaf8d1 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -42,7 +42,7 @@
    -

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,00 pixels, all transitions are set to "none". These behaviors are all configurable (see below).

    +

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,000 pixels, all transitions are set to "none". These behaviors are all configurable (see below).

    Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

    From e4d7ff92e8b72ae54282a3e87d7e89cb6141ab73 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 10:01:47 +0700 Subject: [PATCH 113/137] special case for dialogs - the theme class will apply to the page container when a dialog is shown, and that class will be removed when the dialog is hidden. This allows the transition to appear to affect only the inset window portion of the dialog page. --- css/structure/jquery.mobile.dialog.css | 4 +++- css/structure/jquery.mobile.transitions.flow.css | 5 +++++ js/jquery.mobile.dialog.js | 8 ++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.dialog.css b/css/structure/jquery.mobile.dialog.css index 8f27f44e..b80f68f1 100644 --- a/css/structure/jquery.mobile.dialog.css +++ b/css/structure/jquery.mobile.dialog.css @@ -1,5 +1,7 @@ .ui-dialog { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; } - +.ui-dialog-page { + background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */ +} .ui-dialog .ui-header { margin-top: 15%; } diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index 641f4395..9a990527 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -5,6 +5,11 @@ -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); } +.ui-dialog-page.flow { + -moz-transform-origin: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} .flow.out { -webkit-transform: translateX(-100%) scale(.7); -webkit-animation-name: flowouttoleft; diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 27258850..23902b6a 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -62,6 +62,14 @@ $.widget( "mobile.dialog", $.mobile.widget, { }) .bind( "pagehide", function() { $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass ); + if( self.options.overlayTheme ){ + $.mobile.pageContainer.removeClass( "ui-body-" + self.options.overlayTheme ); + } + }) + .bind( "pagebeforeshow", function(){ + if( self.options.overlayTheme ){ + $.mobile.pageContainer.addClass( "ui-body-" + self.options.overlayTheme ); + } }); }, From 5b6401327f4c71412659afc45e05876408cb5580 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 10:50:22 +0700 Subject: [PATCH 114/137] By caching the href value to data and switching the href to a #, we can avoid address bar showing in iOS on every click. The click handler resets the href during its initial steps if this data is present. Note that the address bar will still likely drop down when you click the browser's back button. The only time the back button will not drop the address bar appears to be when the back button does not trigger a pushstate operation - so pushstate would either have to be disabled, or the page would have to be local (multipage), or the page would need to be a dialog (since then going back would only be a hashchange). Still, progress. --- js/jquery.mobile.navigation.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index d5deb1a3..76f30c8a 100755 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -1231,6 +1231,11 @@ define( [ $activeClickedLink = $( link ).closest( ".ui-btn" ).not( ".ui-disabled" ); $activeClickedLink.addClass( $.mobile.activeBtnClass ); $( "." + $.mobile.activePageClass + " .ui-btn" ).not( link ).blur(); + + // By caching the href value to data and switching the href to a #, we can avoid address bar showing in iOS. The click handler resets the href during its initial steps if this data is present + $( link ) + .jqmData( "href", $( link ).attr( "href" ) ) + .attr( "href", "#" ); } } }); @@ -1254,6 +1259,11 @@ define( [ httpCleanup = function(){ window.setTimeout( function() { removeActiveLinkClass( true ); }, 200 ); }; + + // If there's data cached for the real href value, set the link's href back to it again. This pairs with an address bar workaround from the vclick handler + if( $link.jqmData( "href" ) ){ + $link.attr( "href", $link.jqmData( "href" ) ); + } //if there's a data-rel=back attr, go back in history if( $link.is( ":jqmData(rel='back')" ) ) { @@ -1329,7 +1339,7 @@ define( [ //this may need to be more specific as we use data-rel more role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined; - + $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } ); event.preventDefault(); }); From 4125bc6756e6e61f6827bf2fb728e1c1c094ae3d Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 11:27:24 +0700 Subject: [PATCH 115/137] disable the maxTransitionWidth during testing by default so that window width doesn't conflict with tests. --- tests/unit/navigation/navigation_transitions.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tests/unit/navigation/navigation_transitions.js b/tests/unit/navigation/navigation_transitions.js index 95f4dbdc..be9533e0 100644 --- a/tests/unit/navigation/navigation_transitions.js +++ b/tests/unit/navigation/navigation_transitions.js @@ -5,6 +5,7 @@ var perspective = "viewport-flip", transitioning = "ui-mobile-viewport-transitioning", animationCompleteFn = $.fn.animationComplete, + defaultMaxTrans = $.mobile.maxTransitionWidth, //TODO centralize class names? transitionTypes = "in out fade slide flip reverse pop", @@ -18,6 +19,14 @@ isTransitioningIn = function(page){ return page.hasClass("in") && isTransitioning(page); }, + + disableMaxTransWidth = function(){ + $.mobile.maxTransitionWidth = false; + }, + + enableMaxTransWidth = function(){ + $.mobile.maxTransitionWidth = defaultMaxTrans; + }, //animationComplete callback queue fromQueue = [], @@ -46,6 +55,9 @@ module('jquery.mobile.navigation.js', { setup: function(){ + // disable this option so we can test transitions regardless of window width + disableMaxTransWidth(); + //stub to allow callback before function is returned to transition handler $.fn.animationComplete = function( callback ){ animationCompleteFn.call( this, function(){ @@ -65,6 +77,7 @@ teardown: function(){ // unmock animation complete $.fn.animationComplete = animationCompleteFn; + enableMaxTransWidth(); } }); From 8f54d625277adfad2b7d0de119327c65a22e5d42 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 21:31:06 +0700 Subject: [PATCH 116/137] added some unit tests for maxTransitionWidth option --- .../unit/navigation/navigation_transitions.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/tests/unit/navigation/navigation_transitions.js b/tests/unit/navigation/navigation_transitions.js index be9533e0..e2c304cc 100644 --- a/tests/unit/navigation/navigation_transitions.js +++ b/tests/unit/navigation/navigation_transitions.js @@ -183,5 +183,39 @@ $.fn.animationComplete = animationCompleteFn; equals($("#foo").animationComplete(function(){})[0], $("#foo")[0]); }); + + + // reusable function for a few tests below + function testTransitionMaxWidth( val, expected ){ + expect( 1 ); + + $.mobile.maxTransitionWidth = val; + + var transitionOccurred = false; + + onToComplete(function(){ + transitionOccurred = true; + }); + + + return setTimeout(function(){ + ok( transitionOccurred === expected, (expected ? "" : "no ") + "transition occurred" ); + start(); + }, 5000); + + $.mobile.changePage( $(".ui-page:not(.ui-page-active)").first() ); + + } + + asyncTest( "maxTransitionWidth property disables transitions when value is less than browser width", function(){ + testTransitionMaxWidth( $( window ).width() - 1, false ); + }); + + asyncTest( "maxTransitionWidth property disables transitions when value is false", function(){ + testTransitionMaxWidth( false, false ); + }); + + + })(jQuery); From c46a94d59806049f734cd59296157eba6df5947c Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 21:42:55 +0700 Subject: [PATCH 117/137] removed the sample link to the delayed-load page. no longer needed --- docs/about/testingloader.php | 78 ------------------------------------ index.html | 1 - 2 files changed, 79 deletions(-) delete mode 100644 docs/about/testingloader.php diff --git a/docs/about/testingloader.php b/docs/about/testingloader.php deleted file mode 100644 index ea845f74..00000000 --- a/docs/about/testingloader.php +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - jQuery Mobile Docs - Testing the loader - - - - - - - - - -
    - -
    -

    Testing the loader

    - Home -
    - -
    - - -
    - -

    Loader tested - wheee!

    - -

    Content goes here, etc.Test the loader from a link instead!

    - -

    Or a button

    - - -

    Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

    - -

    Content goes here, etc.jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.

    - - -
    - -
    - -
    - -

    More in this section

    - - -
    -
    - - -
    - -
    -

    © 2011 The jQuery Project

    -
    - - - -
    - - - - - diff --git a/index.html b/index.html index f87353d1..8b32a067 100755 --- a/index.html +++ b/index.html @@ -33,7 +33,6 @@
  • Features
  • Accessibility
  • Supported platforms
    • -
  • Test this for loader
    • From c0f39a6c7fb3ad670382526c1d21e2ea90f8b638 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 22:01:23 +0700 Subject: [PATCH 118/137] don't append themeswitcher to the dialogs - updated now that the dialog markup changed --- docs/_assets/js/jqm-docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_assets/js/jqm-docs.js b/docs/_assets/js/jqm-docs.js index a34f4364..e0ab7de5 100644 --- a/docs/_assets/js/jqm-docs.js +++ b/docs/_assets/js/jqm-docs.js @@ -2,7 +2,7 @@ define( [ "jquery.mobile" ], function() { $('div').live('pagecreate',function(event){ - if( !$(this).is('.ui-dialog')){ + if( !$(this).is('.ui-dialog-page')){ var appendEl = $(this).find('.ui-footer:last'); if( !appendEl.length ){ From 347014530e78a582a59f1ba7dc938a88efc4e371 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Wed, 11 Jan 2012 23:29:50 +0700 Subject: [PATCH 119/137] if there's an overlay theme, we're going to remove it from the page container. First though, check that the incoming page isn't a dialog with the same overlay theme. If so, don't remove the class, as it'll remove it for the next one too --- js/jquery.mobile.dialog.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 23902b6a..38535c6d 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -60,10 +60,15 @@ $.widget( "mobile.dialog", $.mobile.widget, { .attr( "data-" + $.mobile.ns + "direction", "reverse" ); } }) - .bind( "pagehide", function() { + .bind( "pagehide", function( e, ui ) { $( this ).find( "." + $.mobile.activeBtnClass ).removeClass( $.mobile.activeBtnClass ); + + // if there's an overlay theme, we're going to remove it from the page container. + // First though, check that the incoming page isn't a dialog with the same theme. If so, don't remove. if( self.options.overlayTheme ){ - $.mobile.pageContainer.removeClass( "ui-body-" + self.options.overlayTheme ); + if( !ui.nextPage || !ui.nextPage.is( ".ui-dialog-page.ui-overlay-" + self.options.overlayTheme ) ){ + $.mobile.pageContainer.removeClass( "ui-overlay-" + self.options.overlayTheme ); + } } }) .bind( "pagebeforeshow", function(){ From f7d59da646f760393f8c2c4369a383f3923c9c98 Mon Sep 17 00:00:00 2001 From: Mat Marquis Date: Mon, 9 Jan 2012 15:36:03 -0500 Subject: [PATCH 120/137] Updated 3d transform test to accomodate FF10. --- css/structure/jquery.mobile.transitions.flip.css | 2 +- js/jquery.mobile.support.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index adafe1d1..b4cb7873 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -14,7 +14,7 @@ -webkit-backface-visibility:hidden; -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ -moz-backface-visibility:hidden; - -moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-transform:translateX(0); } .flip.out { diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index 8c84354b..f5f70018 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -30,7 +30,7 @@ function propExists( prop ) { // Thanks to Modernizr src for this test idea function transform3dTest() { var prop = "transform-3d"; - return $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" ); + return propExists( 'perspective' ) || $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" ); } // Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting ) From 0fb90244736e218a3b573383da035a7a282272ee Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 11 Jan 2012 20:53:41 -0500 Subject: [PATCH 121/137] Turned maxTransitionWidth to false by default Useful for testing, we may set this back to a value once we've seen more feedback. Improved the comment a bit. --- js/jquery.mobile.core.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 3d3370ba..19c8485c 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -40,8 +40,8 @@ define( [ "jquery.mobile.widget" ], function() { // Set default page transition - 'none' for no transitions defaultPageTransition: "fade", - // Set maximum window width for transitions to apply - maxTransitionWidth: 1000, + // Set maximum window width for transitions to apply - 'false' for no limit + maxTransitionWidth: false, // Minimum scroll distance that will be remembered when returning to a page minScrollBack: 250, From 4c26cd15e2e3939c5ad317089c4a2acfb296fc37 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 11 Jan 2012 21:45:11 -0500 Subject: [PATCH 122/137] Re-vamp of transition button design, added page demos Added a new page to contrast the dialog vs. page transitions. Page has fixed toolbars and form elements to really stress the transitions. Switched to a table design with a button for dialog and page for each transition. --- docs/pages/page-transitions.html | 198 +++++++++++++++++++++++++------ 1 file changed, 162 insertions(+), 36 deletions(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 2abaf8d1..1fa6bf7f 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -23,23 +23,61 @@

    Page transitions

    -

    The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

    +

    The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

    -
    -
    - none - fade - pop - flip - turn -
    -
    - slide - slideup - slidedown - flow -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    fade

    		dialogpage

    pop

    		dialogpage

    flip

    		dialogpage

    turn

    		dialogpage

    flow

    		dialogpage

    slide

    		dialogpage

    slideup

    		dialogpage

    slidedown

    		dialogpage

    none

    		dialogpage

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,000 pixels, all transitions are set to "none". These behaviors are all configurable (see below).

    @@ -273,20 +311,57 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;

    Transitions and scroll position

    One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.

    -
    -
    - none - fade - pop - flip -
    -
    - slide - slideup - slidedown - flow -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    fade

    		dialogpage

    pop

    		dialogpage

    flip

    		dialogpage

    turn

    		dialogpage

    flow

    		dialogpage

    slide

    		dialogpage

    slideup

    		dialogpage

    slidedown

    		dialogpage

    none

    		dialogpage
    + +

    rotate

    @@ -330,19 +405,70 @@ $.mobile.defaultTransitionHandler = myTransitionHandler; -
    +
    -

    Ta-da!

    +

    Dialog

    -

    That was an animated page transition effect that we added with a data-transition attribute on the link.

    -

    Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.

    -

    What do you think?

    - I like it +

    That was an animated page transition effect to a dialog that we added with a data-transition attribute on the link.

    +

    Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.

    + + Take me back
    + +
    + +
    +

    Page

    +
    + +
    +

    That was an animated page transition effect to a page that we added with a data-transition attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.

    +

    Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.

    + +
    + +

    Here's a few form elements

    + +

    These are here to see if this slows down rendering.

    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + Take me back +
    + +
    +
    + + +
    +
    +
    From 9726f21e098ce1b4379861912c337054eac735cc Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 11 Jan 2012 22:07:04 -0500 Subject: [PATCH 123/137] SetScrollBack to 10 (from 250), CSS tweaks to table --- docs/pages/page-transitions.html | 9 ++++++--- js/jquery.mobile.core.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 1fa6bf7f..0ec60a95 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -26,12 +26,15 @@

    The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

    - +
    diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index 19c8485c..f33e392a 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -44,7 +44,7 @@ define( [ "jquery.mobile.widget" ], function() { maxTransitionWidth: false, // Minimum scroll distance that will be remembered when returning to a page - minScrollBack: 250, + minScrollBack: 10, // Set default dialog transition - 'none' for no transitions defaultDialogTransition: "pop", From 7df216aa3336631b92ed21deefa3fa4c6b6696aa Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 11 Jan 2012 22:09:16 -0500 Subject: [PATCH 124/137] Tweaked max width blurb to match the "false" default to avoid confusion --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index 0ec60a95..c860d3ca 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -111,7 +111,7 @@ $.mobile.fallbackTransition.slideout = "none"

    Setting a max width for transitions

    -

    By default, transitions are disabled (set to "none") when the window width is greater than 1000px. We do this because many transitions can be distracting and perform poorly on larger screens. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to 1000. The option accepts any number or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value. This is useful because transitions get very wonky on wider screens.

    +

    By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to false. The option accepts any number representing a pixel width or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value.

    From c51477732715a01800363043cf7271160151d1d5 Mon Sep 17 00:00:00 2001 From: toddparker Date: Wed, 11 Jan 2012 22:14:28 -0500 Subject: [PATCH 125/137] Removed blurb about shutting off transitions over 1,000 pixels --- docs/pages/page-transitions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index c860d3ca..f1077607 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -83,7 +83,7 @@

    fade

    		 dialog
    -

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms and be viewing on a screen width of 1,000 pixels or less. By default, devices that lack 3D support will fallback to "fade" for all transition types. Above 1,000 pixels, all transitions are set to "none". These behaviors are all configurable (see below).

    +

    NOTE: To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support will fallback to "fade" for all transition types. This behavior is configurable (see below).

    Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

    From ca98419cb055e60ac3b18203363299af24e9bee8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 11:53:30 +0700 Subject: [PATCH 126/137] class name was body instead of overlay. Fixed --- js/jquery.mobile.dialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js index 38535c6d..fbd0f734 100644 --- a/js/jquery.mobile.dialog.js +++ b/js/jquery.mobile.dialog.js @@ -73,7 +73,7 @@ $.widget( "mobile.dialog", $.mobile.widget, { }) .bind( "pagebeforeshow", function(){ if( self.options.overlayTheme ){ - $.mobile.pageContainer.addClass( "ui-body-" + self.options.overlayTheme ); + $.mobile.pageContainer.addClass( "ui-overlay-" + self.options.overlayTheme ); } }); }, From 155adc14c127f780265da6f4a5c6a2a568420896 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 12:27:14 +0700 Subject: [PATCH 127/137] CSS for ui-overlay-x applies to container now too - removed double class --- css/themes/default/jquery.mobile.theme.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index fe3adf8c..cca0d3ed 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -60,7 +60,7 @@ color: #2489CE /*{a-bar-link-visited}*/; } .ui-body-a, -.ui-dialog-page.ui-overlay-a { +.ui-overlay-a { border: 1px solid #2A2A2A /*{a-body-border}*/; background: #222222 /*{a-body-background-color}*/; color: #fff /*{a-body-color}*/; @@ -200,7 +200,7 @@ color: #ddf0f8 /*{b-bar-link-visited}*/; } .ui-body-b, -.ui-dialog-page.ui-overlay-b { +.ui-overlay-b { border: 1px solid #C6C6C6 /*{b-body-border}*/; background: #cccccc /*{b-body-background-color}*/; color: #333333 /*{b-body-color}*/; @@ -342,7 +342,7 @@ font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; } .ui-body-c, -.ui-dialog-page.ui-overlay-c { +.ui-overlay-c { border: 1px solid #B3B3B3 /*{c-body-border}*/; color: #333333 /*{c-body-color}*/; text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/; @@ -484,7 +484,7 @@ } .ui-body-d, -.ui-dialog-page.ui-overlay-d { +.ui-overlay-d { border: 1px solid #ccc /*{d-body-border}*/; color: #333333 /*{d-body-color}*/; text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ #fff /*{d-body-shadow-color}*/; @@ -625,7 +625,7 @@ } .ui-body-e, -.ui-dialog-page.ui-overlay-e { +.ui-overlay-e { border: 1px solid #F7C942 /*{e-body-border}*/; color: #333333 /*{e-body-color}*/; text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ #fff /*{e-body-shadow-color}*/; From 6d4d0e14e6615042afbc27d649257be6f2ecc829 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 12:50:47 +0700 Subject: [PATCH 128/137] code style --- js/jquery.mobile.support.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.support.js b/js/jquery.mobile.support.js index f5f70018..9c029f61 100644 --- a/js/jquery.mobile.support.js +++ b/js/jquery.mobile.support.js @@ -30,7 +30,7 @@ function propExists( prop ) { // Thanks to Modernizr src for this test idea function transform3dTest() { var prop = "transform-3d"; - return propExists( 'perspective' ) || $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" ); + return propExists( "perspective" ) || $.mobile.media( "(-" + vendors.join( "-" + prop + "),(-" ) + "-" + prop + "),(" + prop + ")" ); } // Test for dynamic-updating base tag support ( allows us to avoid href,src attr rewriting ) From fa4645c2366bc627aff932d563025f174c01c820 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 12:54:16 +0700 Subject: [PATCH 129/137] no longer need this class addition --- js/jquery.mobile.transition.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 45039698..3d3c3f0f 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -88,9 +88,6 @@ function outInTransitionHandler( name, reverse, $to, $from ) { return deferred.promise(); } -// add class for where 3d transforms are supported, or not -$( "html" ).addClass( $.support.cssTransform3d ? "ui-supported-csstransform3d" : "ui-unsupported-csstransform3d" ); - // Make our transition handler the public default. $.mobile.defaultTransitionHandler = outInTransitionHandler; From 682ef80cf903af686198fbae057bbf2332aac18b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 14:46:49 +0700 Subject: [PATCH 130/137] added missing files --- js/jquery.mobile.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index abceeb02..55709cfa 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -12,6 +12,13 @@ define([ 'order!jquery.mobile.navigation', 'order!jquery.mobile.navigation.pushstate', 'order!jquery.mobile.transition', + 'order!jquery.mobile.transition.pop', + 'order!jquery.mobile.transition.slide', + 'order!jquery.mobile.transition.slidedown', + 'order!jquery.mobile.transition.slideup', + 'order!jquery.mobile.transition.flip', + 'order!jquery.mobile.transition.flow', + 'order!jquery.mobile.transition.turn', 'jquery.mobile.degradeInputs', 'jquery.mobile.dialog', 'jquery.mobile.page.sections', From 5e878186cc7ecfabbdbb7b8d50fa0781add07dfb Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:06:49 +0700 Subject: [PATCH 131/137] removed old link --- docs/pages/page-transitions.html | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html index f1077607..358411d2 100755 --- a/docs/pages/page-transitions.html +++ b/docs/pages/page-transitions.html @@ -366,7 +366,6 @@ $.mobile.defaultTransitionHandler = myTransitionHandler; -

    rotate

    From 6cd1adc528706cd1ed9df0d001d754a018390f50 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:26:27 +0700 Subject: [PATCH 132/137] no bg image/gradient on ui-overlay --- css/themes/default/jquery.mobile.theme.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index cca0d3ed..cd6a88b0 100644 --- a/css/themes/default/jquery.mobile.theme.css +++ b/css/themes/default/jquery.mobile.theme.css @@ -73,6 +73,9 @@ background-image: -o-linear-gradient( #666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); } +.ui-overlay-a { + background-image: none; +} .ui-body-a, .ui-body-a input, .ui-body-a select, @@ -213,6 +216,9 @@ background-image: -o-linear-gradient( #e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #e6e6e6 /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); } +.ui-overlay-b { + background-image: none; +} .ui-body-b, .ui-body-b input, .ui-body-b select, @@ -354,6 +360,9 @@ background-image: -o-linear-gradient( #eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #eee /*{c-body-background-start}*/, #ddd /*{c-body-background-end}*/); } +.ui-overlay-c { + background-image: none; +} .ui-body-c, .ui-body-c input, .ui-body-c select, @@ -496,6 +505,9 @@ background-image: -o-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); } +.ui-overlay-d { + background-image: none; +} .ui-body-d, .ui-body-d input, .ui-body-d select, @@ -637,6 +649,9 @@ background-image: -o-linear-gradient( #fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); /* Opera 11.10+ */ background-image: linear-gradient( #fff /*{e-body-background-start}*/, #faeb9e /*{e-body-background-end}*/); } +.ui-overlay-e { + background-image: none; +} .ui-body-e, .ui-body-e input, .ui-body-e select, From 70670bc344fa4897aa238572617cdf83d639ded8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:26:41 +0700 Subject: [PATCH 133/137] fix up dialog presentation - headers were busted --- css/structure/jquery.mobile.dialog.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css/structure/jquery.mobile.dialog.css b/css/structure/jquery.mobile.dialog.css index b80f68f1..6de24927 100644 --- a/css/structure/jquery.mobile.dialog.css +++ b/css/structure/jquery.mobile.dialog.css @@ -14,8 +14,11 @@ } .ui-dialog .ui-header, .ui-dialog .ui-footer { - padding: 0 15px; z-index: 10; + padding: 0; +} +.ui-dialog .ui-footer { + padding: 0 15px; } .ui-dialog .ui-content { padding: 15px; From 32350a813a1dd60e83ca231b96b7e8a167b8589f Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:38:25 +0700 Subject: [PATCH 134/137] fixed some typos where webkit needed to be moz --- .../jquery.mobile.transitions.flow.css | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index 9a990527..37f7ee57 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -51,10 +51,10 @@ 100% { -webkit-transform: translateX(-100%) scale(.7); } } @-moz-keyframes flowouttoleft { - 0% { -webkit-transform: translateX(0) scale(1); } - 60% { -webkit-transform: translateX(0) scale(.7); } - 70% { -webkit-transform: translateX(0) scale(.7); } - 100% { -webkit-transform: translateX(-100%) scale(.7); } + 0% { -moz-transform: translateX(0) scale(1); } + 60% { -moz-transform: translateX(0) scale(.7); } + 70% { -moz-transform: translateX(0) scale(.7); } + 100% { -moz-transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { @@ -64,10 +64,10 @@ 100% { -webkit-transform: translateX(100%) scale(.7); } } @-moz-keyframes flowouttoright { - 0% { -webkit-transform: translateX(0) scale(1); } - 60% { -webkit-transform: translateX(0) scale(.7); } - 70% { -webkit-transform: translateX(0) scale(.7); } - 100% { -webkit-transform: translateX(100%) scale(.7); } + 0% { -moz-transform: translateX(0) scale(1); } + 60% { -moz-transform: translateX(0) scale(.7); } + 70% { -moz-transform: translateX(0) scale(.7); } + 100% { -moz-transform: translateX(100%) scale(.7); } } @-webkit-keyframes flowinfromleft { @@ -78,9 +78,9 @@ } @-moz-keyframes flowinfromleft { 0% { -moz-transform: translateX(-100%) scale(.7); } - 30% { -webkit-transform: translateX(0) scale(.7); } - 40% { -webkit-transform: translateX(0) scale(.7); } - 100% { -webkit-transform: translateX(0) scale(1); } + 30% { -moz-transform: translateX(0) scale(.7); } + 40% { -moz-transform: translateX(0) scale(.7); } + 100% { -moz-transform: translateX(0) scale(1); } } @-webkit-keyframes flowinfromright { 0% { -webkit-transform: translateX(100%) scale(.7); } @@ -90,7 +90,7 @@ } @-moz-keyframes flowinfromright { 0% { -moz-transform: translateX(100%) scale(.7); } - 30% { -webkit-transform: translateX(0) scale(.7); } - 40% { -webkit-transform: translateX(0) scale(.7); } - 100% { -webkit-transform: translateX(0) scale(1); } + 30% { -moz-transform: translateX(0) scale(.7); } + 40% { -moz-transform: translateX(0) scale(.7); } + 100% { -moz-transform: translateX(0) scale(1); } } \ No newline at end of file From 2cd994b2e8b2d6810e73107f28c797f623b7df8b Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:41:39 +0700 Subject: [PATCH 135/137] added the timing durations to the transitions themselves --- css/structure/jquery.mobile.transitions.flip.css | 4 ++++ css/structure/jquery.mobile.transitions.pop.css | 4 ++++ css/structure/jquery.mobile.transitions.slide.css | 4 ++++ css/structure/jquery.mobile.transitions.slidedown.css | 4 ++++ css/structure/jquery.mobile.transitions.slideup.css | 4 ++++ css/structure/jquery.mobile.transitions.turn.css | 5 +++++ 6 files changed, 25 insertions(+) diff --git a/css/structure/jquery.mobile.transitions.flip.css b/css/structure/jquery.mobile.transitions.flip.css index b4cb7873..645be9d5 100644 --- a/css/structure/jquery.mobile.transitions.flip.css +++ b/css/structure/jquery.mobile.transitions.flip.css @@ -20,13 +20,17 @@ .flip.out { -webkit-transform: rotateY(-90deg) scale(.9); -webkit-animation-name: flipouttoleft; + -webkit-animation-duration: 225ms; -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; + -moz-animation-duration: 225ms; } .flip.in { -webkit-animation-name: flipintoright; + -webkit-animation-duration: 350ms; -moz-animation-name: flipintoright; + -moz-animation-duration: 350ms; } .flip.out.reverse { diff --git a/css/structure/jquery.mobile.transitions.pop.css b/css/structure/jquery.mobile.transitions.pop.css index 9f9e9409..15629f17 100644 --- a/css/structure/jquery.mobile.transitions.pop.css +++ b/css/structure/jquery.mobile.transitions.pop.css @@ -9,12 +9,16 @@ opacity: 1; -webkit-animation-name: popin; -moz-animation-name: popin; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; } .pop.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; opacity: 0; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .pop.in.reverse { diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css index fea66a5e..2d3f8ebb 100644 --- a/css/structure/jquery.mobile.transitions.slide.css +++ b/css/structure/jquery.mobile.transitions.slide.css @@ -4,6 +4,8 @@ -webkit-animation-name: slideouttoleft; -moz-transform: translateX(-100%); -moz-animation-name: slideouttoleft; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .slide.in { @@ -11,6 +13,8 @@ -webkit-animation-name: fadein; -moz-transform: translateX(0); -moz-animation-name: fadein; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; } .slide.out.reverse { diff --git a/css/structure/jquery.mobile.transitions.slidedown.css b/css/structure/jquery.mobile.transitions.slidedown.css index 3cb2ce84..70c3761a 100644 --- a/css/structure/jquery.mobile.transitions.slidedown.css +++ b/css/structure/jquery.mobile.transitions.slidedown.css @@ -2,6 +2,8 @@ .slidedown.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .slidedown.in { @@ -9,6 +11,8 @@ -webkit-animation-name: slideinfromtop; -moz-transform: translateY(0); -moz-animation-name: slideinfromtop; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; } .slidedown.in.reverse { diff --git a/css/structure/jquery.mobile.transitions.slideup.css b/css/structure/jquery.mobile.transitions.slideup.css index dab83155..91476c4f 100644 --- a/css/structure/jquery.mobile.transitions.slideup.css +++ b/css/structure/jquery.mobile.transitions.slideup.css @@ -2,6 +2,8 @@ .slideup.out { -webkit-animation-name: fadeout; -moz-animation-name: fadeout; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .slideup.in { @@ -9,6 +11,8 @@ -webkit-animation-name: slideinfrombottom; -moz-transform: translateY(0); -moz-animation-name: slideinfrombottom; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; } .slideup.in.reverse { diff --git a/css/structure/jquery.mobile.transitions.turn.css b/css/structure/jquery.mobile.transitions.turn.css index c606b1f9..21f5c0ae 100644 --- a/css/structure/jquery.mobile.transitions.turn.css +++ b/css/structure/jquery.mobile.transitions.turn.css @@ -25,11 +25,16 @@ -webkit-animation-name: flipouttoleft; -moz-transform: rotateY(-90deg) scale(.9); -moz-animation-name: flipouttoleft; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .turn.in { -webkit-animation-name: flipintoright; -moz-animation-name: flipintoright; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; + } .turn.out.reverse { From a83727e4bed324e292e20f9ae48f0c8e3b25f9fd Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 12 Jan 2012 21:41:54 +0700 Subject: [PATCH 136/137] combined redundant syntax --- .../jquery.mobile.transitions.flow.css | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css index 37f7ee57..c30346ed 100644 --- a/css/structure/jquery.mobile.transitions.flow.css +++ b/css/structure/jquery.mobile.transitions.flow.css @@ -46,51 +46,43 @@ @-webkit-keyframes flowouttoleft { 0% { -webkit-transform: translateX(0) scale(1); } - 60% { -webkit-transform: translateX(0) scale(.7); } - 70% { -webkit-transform: translateX(0) scale(.7); } + 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(-100%) scale(.7); } } @-moz-keyframes flowouttoleft { 0% { -moz-transform: translateX(0) scale(1); } - 60% { -moz-transform: translateX(0) scale(.7); } - 70% { -moz-transform: translateX(0) scale(.7); } + 60%, 70% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { 0% { -webkit-transform: translateX(0) scale(1); } - 60% { -webkit-transform: translateX(0) scale(.7); } - 70% { -webkit-transform: translateX(0) scale(.7); } + 60%, 70% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(100%) scale(.7); } } @-moz-keyframes flowouttoright { 0% { -moz-transform: translateX(0) scale(1); } - 60% { -moz-transform: translateX(0) scale(.7); } - 70% { -moz-transform: translateX(0) scale(.7); } + 60%, 70% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(100%) scale(.7); } } @-webkit-keyframes flowinfromleft { 0% { -webkit-transform: translateX(-100%) scale(.7); } - 30% { -webkit-transform: translateX(0) scale(.7); } - 40% { -webkit-transform: translateX(0) scale(.7); } + 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromleft { 0% { -moz-transform: translateX(-100%) scale(.7); } - 30% { -moz-transform: translateX(0) scale(.7); } - 40% { -moz-transform: translateX(0) scale(.7); } + 30%, 40% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(0) scale(1); } } @-webkit-keyframes flowinfromright { 0% { -webkit-transform: translateX(100%) scale(.7); } - 30% { -webkit-transform: translateX(0) scale(.7); } - 40% { -webkit-transform: translateX(0) scale(.7); } + 30%, 40% { -webkit-transform: translateX(0) scale(.7); } 100% { -webkit-transform: translateX(0) scale(1); } } @-moz-keyframes flowinfromright { 0% { -moz-transform: translateX(100%) scale(.7); } - 30% { -moz-transform: translateX(0) scale(.7); } - 40% { -moz-transform: translateX(0) scale(.7); } + 30%, 40% { -moz-transform: translateX(0) scale(.7); } 100% { -moz-transform: translateX(0) scale(1); } } \ No newline at end of file From efb9b807b7b23bff194a33dbec022d58db00759f Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Thu, 12 Jan 2012 09:36:46 -0800 Subject: [PATCH 137/137] AMDized transition code --- js/jquery.mobile.js | 16 ++++++++-------- js/jquery.mobile.transition.flip.js | 6 ++++++ js/jquery.mobile.transition.flow.js | 6 ++++++ js/jquery.mobile.transition.js | 6 ++++++ js/jquery.mobile.transition.pop.js | 6 ++++++ js/jquery.mobile.transition.slide.js | 6 ++++++ js/jquery.mobile.transition.slidedown.js | 6 ++++++ js/jquery.mobile.transition.slideup.js | 6 ++++++ js/jquery.mobile.transition.turn.js | 6 ++++++ 9 files changed, 56 insertions(+), 8 deletions(-) diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index 55709cfa..c5af9520 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -11,14 +11,14 @@ define([ 'jquery.mobile.core', 'order!jquery.mobile.navigation', 'order!jquery.mobile.navigation.pushstate', - 'order!jquery.mobile.transition', - 'order!jquery.mobile.transition.pop', - 'order!jquery.mobile.transition.slide', - 'order!jquery.mobile.transition.slidedown', - 'order!jquery.mobile.transition.slideup', - 'order!jquery.mobile.transition.flip', - 'order!jquery.mobile.transition.flow', - 'order!jquery.mobile.transition.turn', + 'jquery.mobile.transition', + 'jquery.mobile.transition.pop', + 'jquery.mobile.transition.slide', + 'jquery.mobile.transition.slidedown', + 'jquery.mobile.transition.slideup', + 'jquery.mobile.transition.flip', + 'jquery.mobile.transition.flow', + 'jquery.mobile.transition.turn', 'jquery.mobile.degradeInputs', 'jquery.mobile.dialog', 'jquery.mobile.page.sections', diff --git a/js/jquery.mobile.transition.flip.js b/js/jquery.mobile.transition.flip.js index 9df38cdd..578e413d 100644 --- a/js/jquery.mobile.transition.flip.js +++ b/js/jquery.mobile.transition.flip.js @@ -2,8 +2,14 @@ * fallback transition for flip in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.flip = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.flow.js b/js/jquery.mobile.transition.flow.js index 41a03fdc..815c90e9 100644 --- a/js/jquery.mobile.transition.flow.js +++ b/js/jquery.mobile.transition.flow.js @@ -2,8 +2,14 @@ * fallback transition for flow in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.flow = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js index 3d3c3f0f..12876cfa 100644 --- a/js/jquery.mobile.transition.js +++ b/js/jquery.mobile.transition.js @@ -2,6 +2,9 @@ * "transitions" plugin - Page change tranistions */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.core" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { function outInTransitionHandler( name, reverse, $to, $from ) { @@ -99,3 +102,6 @@ $.mobile.transitionHandlers = { $.mobile.transitionFallbacks = {}; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.pop.js b/js/jquery.mobile.transition.pop.js index 3f621f29..92541a36 100644 --- a/js/jquery.mobile.transition.pop.js +++ b/js/jquery.mobile.transition.pop.js @@ -2,8 +2,14 @@ * fallback transition for pop in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.pop = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.slide.js b/js/jquery.mobile.transition.slide.js index d7a8cf80..84159583 100644 --- a/js/jquery.mobile.transition.slide.js +++ b/js/jquery.mobile.transition.slide.js @@ -2,8 +2,14 @@ * fallback transition for slide in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.slide = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.slidedown.js b/js/jquery.mobile.transition.slidedown.js index 08d60222..64cc3980 100644 --- a/js/jquery.mobile.transition.slidedown.js +++ b/js/jquery.mobile.transition.slidedown.js @@ -2,8 +2,14 @@ * fallback transition for slidedown in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.slidedown = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.slideup.js b/js/jquery.mobile.transition.slideup.js index 2b37ff40..6c844c83 100644 --- a/js/jquery.mobile.transition.slideup.js +++ b/js/jquery.mobile.transition.slideup.js @@ -2,8 +2,14 @@ * fallback transition for slideup in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.slideup = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file diff --git a/js/jquery.mobile.transition.turn.js b/js/jquery.mobile.transition.turn.js index 1b10639c..51fc9014 100644 --- a/js/jquery.mobile.transition.turn.js +++ b/js/jquery.mobile.transition.turn.js @@ -2,8 +2,14 @@ * fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general */ +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +define( [ "jquery.mobile.transition" ], function() { +//>>excludeEnd("jqmBuildExclude"); (function( $, window, undefined ) { $.mobile.transitionFallbacks.turn = "fade"; })( jQuery, this ); +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); +}); +//>>excludeEnd("jqmBuildExclude"); \ No newline at end of file