tizen-web-ui-fw/latest/js/src/jquery.mobile.transition.js

   1
   2 (function( $, window, undefined ) {
   3
   4 var createHandler = function( sequential ) {
   5
   6         // Default to sequential
   7         if ( sequential === undefined ) {
   8                 sequential = true;
   9         }
  10
  11         return function( name, reverse, $to, $from ) {
  12
  13                 var deferred = new $.Deferred(),
  14                         reverseClass = reverse ? " reverse" : "",
  15                         active  = $.mobile.urlHistory.getActive(),
  16                         toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
  17                         screenHeight = $.mobile.getScreenHeight(),
  18                         maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $.mobile.$window.width() > $.mobile.maxTransitionWidth,
  19                         none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none" || Math.max( $.mobile.$window.scrollTop(), toScroll ) > $.mobile.getMaxScrollForTransition(),
  20                         toPreClass = " ui-page-pre-in",
  21                         toggleViewportClass = function() {
  22                                 $.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
  23                         },
  24                         scrollPage = function() {
  25                                 // Prevent blinking on page scrolling in Tizen/Android devices.
  26                                 // Don't scoll window, when current scroll top(scrollTop()) is already at toScroll,
  27                                 // or when current scroll top is 0 and toScroll is same to defaultHomeScroll
  28                                 // (which means the top position of page). In these case, page scrolling is not needed.
  29                                 var st = $.mobile.$window.scrollTop();
  30                                 if( st === toScroll || ( $.mobile.defaultHomeScroll === toScroll && st == 0 ) ) {
  31                                         return;
  32                                 }
  33
  34                                 // By using scrollTo instead of silentScroll, we can keep things better in order
  35                                 // Just to be precautios, disable scrollstart listening like silentScroll would
  36                                 $.event.special.scrollstart.enabled = false;
  37
  38                                 window.scrollTo( 0, toScroll );
  39
  40                                 // reenable scrollstart listening like silentScroll would
  41                                 setTimeout( function() {
  42                                         $.event.special.scrollstart.enabled = true;
  43                                 }, 150 );
  44                         },
  45                         cleanFrom = function() {
  46                                 $from
  47                                         .removeClass( $.mobile.activePageClass + " out in reverse " + name )
  48                                         .height( "" );
  49                         },
  50                         startOut = function() {
  51                                 // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
  52                                 if ( !sequential ) {
  53                                         doneOut();
  54                                 }
  55                                 else {
  56                                         $from.animationComplete( doneOut );
  57                                 }
  58
  59                                 // Set the from page's height and start it transitioning out
  60                                 // Note: setting an explicit height helps eliminate tiling in the transitions
  61                                 $from
  62                                         .height( screenHeight + $.mobile.$window.scrollTop() )
  63                                         .addClass( name + " out" + reverseClass );
  64                         },
  65
  66                         doneOut = function() {
  67
  68                                 if ( $from && sequential ) {
  69                                         cleanFrom();
  70                                 }
  71
  72                                 startIn();
  73                         },
  74
  75                         startIn = function() {
  76
  77                                 // Prevent flickering in phonegap container: see comments at #4024 regarding iOS
  78                                 $to.css( "z-index", -10 );
  79
  80                                 $to.addClass( $.mobile.activePageClass + toPreClass );
  81
  82                                 // Send focus to page as it is now display: block
  83                                 $.mobile.focusPage( $to );
  84
  85                                 // Set to page height
  86                                 $to.height( screenHeight + toScroll );
  87
  88                                 scrollPage();
  89
  90                                 // Restores visibility of the new page: added together with $to.css( "z-index", -10 );
  91                                 $to.css( "z-index", "" );
  92
  93                                 if ( !none ) {
  94                                         $to.animationComplete( doneIn );
  95                                 }
  96
  97                                 $to
  98                                         .removeClass( toPreClass )
  99                                         .addClass( name + " in" + reverseClass );
 100
 101                                 if ( none ) {
 102                                         setTimeout( doneIn, 0 );
 103                                 }
 104
 105                         },
 106
 107                         doneIn = function() {
 108
 109                                 if ( !sequential ) {
 110
 111                                         if ( $from ) {
 112                                                 cleanFrom();
 113                                         }
 114                                 }
 115
 116                                 $to
 117                                         .removeClass( "out in reverse " + name )
 118                                         .height( "" );
 119
 120                                 toggleViewportClass();
 121
 122                                 // In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
 123                                 // This ensures we jump to that spot after the fact, if we aren't there already.
 124                                 if ( $.mobile.$window.scrollTop() !== toScroll ) {
 125                                         scrollPage();
 126                                 }
 127
 128                                 deferred.resolve( name, reverse, $to, $from, true );
 129                         };
 130
 131                 toggleViewportClass();
 132
 133                 if ( $from && !none ) {
 134                         startOut();
 135                 }
 136                 else {
 137                         doneOut();
 138                 }
 139
 140                 return deferred.promise();
 141         };
 142 };
 143
 144 // generate the handlers from the above
 145 var sequentialHandler = createHandler(),
 146         simultaneousHandler = createHandler( false ),
 147         defaultGetMaxScrollForTransition = function() {
 148                 return $.mobile.getScreenHeight() * 3;
 149         };
 150
 151 // Make our transition handler the public default.
 152 $.mobile.defaultTransitionHandler = sequentialHandler;
 153
 154 //transition handler dictionary for 3rd party transitions
 155 $.mobile.transitionHandlers = {
 156         "default": $.mobile.defaultTransitionHandler,
 157         "sequential": sequentialHandler,
 158         "simultaneous": simultaneousHandler
 159 };
 160
 161 $.mobile.transitionFallbacks = {};
 162
 163 // If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
 164 $.mobile._maybeDegradeTransition = function( transition ) {
 165                 if ( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ) {
 166                         transition = $.mobile.transitionFallbacks[ transition ];
 167                 }
 168
 169                 return transition;
 170 };
 171
 172 // Set the getMaxScrollForTransition to default if no implementation was set by user
 173 $.mobile.getMaxScrollForTransition = $.mobile.getMaxScrollForTransition || defaultGetMaxScrollForTransition;
 174 })( jQuery, this );