1 YUI.add('app-transitions-native', function (Y, NAME) {

     2 

     3 /**

     4 Provides the implementation of view transitions for `Y.App.Transitions` in

     5 browsers which support native CSS3 transitions.

     6 

     7 @module app

     8 @submodule app-transitions-native

     9 @since 3.5.0

    10 **/

    11 

    12 var AppTransitions = Y.App.Transitions;

    13 

    14 /**

    15 Provides the implementation of view transitions for `Y.App.Transitions` in

    16 browsers which support native CSS3 transitions.

    17 

    18 When this module is used, `Y.App.TransitionsNative` will automatically mix

    19 itself in to `Y.App`.

    20 

    21 @class App.TransitionsNative

    22 @extensionfor App

    23 @since 3.5.0

    24 **/

    25 function AppTransitionsNative() {}

    26 

    27 AppTransitionsNative.prototype = {

    28     // -- Protected Properties -------------------------------------------------

    29 

    30     /**

    31     Whether this app is currently transitioning its `activeView`.

    32 

    33     @property _transitioning

    34     @type Boolean

    35     @default false

    36     @protected

    37     @since 3.5.0

    38     **/

    39 

    40     /**

    41     A queue that holds pending calls to this app's `_uiTransitionActiveView()`

    42     method.

    43 

    44     @property _viewTransitionQueue

    45     @type Array

    46     @default []

    47     @protected

    48     @since 3.5.0

    49     **/

    50 

    51     // -- Lifecycle Methods ----------------------------------------------------

    52 

    53     initializer: function () {

    54         this._transitioning       = false;

    55         this._viewTransitionQueue = [];

    56 

    57         // TODO: Consider the AOP approach that `Plugin.WidgetAnim` uses.

    58         Y.Do.before(this._queueActiveView, this, '_uiSetActiveView');

    59     },

    60 

    61     // -- Protected Methods ----------------------------------------------------

    62 

    63     /**

    64     Dequeues any pending calls to `_uiTransitionActiveView()`.

    65 

    66     **Note:** When there is more than one queued transition, only the most

    67     recent `activeView` change will be visually transitioned, while the others

    68     will have their `transition` option overridden to `false`.

    69 

    70     @method _dequeueActiveView

    71     @protected

    72     @since 3.5.0

    73     **/

    74     _dequeueActiveView: function () {

    75         var queue      = this._viewTransitionQueue,

    76             transition = queue.shift(),

    77             options;

    78 

    79         if (transition) {

    80             // When items are still left in the queue, override the transition

    81             // so it does not run.

    82             if (queue.length) {

    83                 // Overrides `transition` option and splices in the new options.

    84                 options = Y.merge(transition[2], {transition: false});

    85                 transition.splice(2, 1, options);

    86             }

    87 

    88             this._uiTransitionActiveView.apply(this, transition);

    89         }

    90     },

    91 

    92     /**

    93     Returns an object containing a named fx for both `viewIn` and `viewOut`

    94     based on the relationship between the specified `newView` and `oldView`.

    95 

    96     @method _getFx

    97     @param {View} newView The view being transitioned-in.

    98     @param {View} oldView The view being transitioned-out.

    99     @param {String} [transition] The preferred transition to use.

   100     @return {Object} An object containing a named fx for both `viewIn` and

   101         `viewOut`.

   102     @protected

   103     @since 3.5.0

   104     **/

   105     _getFx: function (newView, oldView, transition) {

   106         var fx          = AppTransitions.FX,

   107             transitions = this.get('transitions');

   108 

   109         if (transition === false || !transitions) {

   110             return null;

   111         }

   112 

   113         if (transition) {

   114             return fx[transition];

   115         }

   116 

   117         if (this._isChildView(newView, oldView)) {

   118             return fx[transitions.toChild];

   119         }

   120 

   121         if (this._isParentView(newView, oldView)) {

   122             return fx[transitions.toParent];

   123         }

   124 

   125         return fx[transitions.navigate];

   126     },

   127 

   128     /**

   129     Queues calls to `_uiTransitionActiveView()` to make sure a currently running

   130     transition isn't interrupted.

   131 

   132     **Note:** This method prevents the default `_uiSetActiveView()` method from

   133     running.

   134 

   135     @method _queueActiveView

   136     @protected

   137     @since 3.5.0

   138     **/

   139     _queueActiveView: function () {

   140         var args = Y.Array(arguments, 0, true);

   141 

   142         this._viewTransitionQueue.push(args);

   143 

   144         if (!this._transitioning) {

   145             this._dequeueActiveView();

   146         }

   147 

   148         return new Y.Do.Prevent();

   149     },

   150 

   151     /**

   152     Performs the actual change of this app's `activeView` by visually

   153     transitioning between the `newView` and `oldView` using any specified

   154     `options`.

   155 

   156     The `newView` is attached to the app by rendering it to the `viewContainer`,

   157     and making this app a bubble target of its events.

   158 

   159     The `oldView` is detached from the app by removing it from the

   160     `viewContainer`, and removing this app as a bubble target for its events.

   161     The `oldView` will either be preserved or properly destroyed.

   162 

   163     **Note:** This method overrides `_uiSetActiveView()` and provides all of its

   164     functionality plus supports visual transitions. Also, the `activeView`

   165     attribute is read-only and can be changed by calling the `showView()`

   166     method.

   167 

   168     @method _uiTransitionActiveView

   169     @param {View} newView The View which is now this app's `activeView`.

   170     @param {View} [oldView] The View which was this app's `activeView`.

   171     @param {Object} [options] Optional object containing any of the following

   172         properties:

   173       @param {Function} [options.callback] Optional callback function to call

   174         after new `activeView` is ready to use, the function will be passed:

   175           @param {View} options.callback.view A reference to the new

   176             `activeView`.

   177       @param {Boolean} [options.prepend=false] Whether the `view` should be

   178         prepended instead of appended to the `viewContainer`.

   179       @param {Boolean} [options.render] Whether the `view` should be rendered.

   180         **Note:** If no value is specified, a view instance will only be

   181         rendered if it's newly created by this method.

   182       @param {Boolean|String} [options.transition] Optional transition override.

   183         A transition can be specified which will override the default, or

   184         `false` for no transition.

   185       @param {Boolean} [options.update=false] Whether an existing view should

   186         have its attributes updated by passing the `config` object to its

   187         `setAttrs()` method. **Note:** This option does not have an effect if

   188         the `view` instance is created as a result of calling this method.

   189     @protected

   190     @since 3.5.0

   191     **/

   192     _uiTransitionActiveView: function (newView, oldView, options) {

   193         options || (options = {});

   194 

   195         var callback = options.callback,

   196             container, transitioning, isChild, isParent, prepend,

   197             fx, fxConfig, transitions;

   198 

   199         // Quits early when to new and old views are the same.

   200         if (newView === oldView) {

   201             callback && callback.call(this, newView);

   202 

   203             this._transitioning = false;

   204             return this._dequeueActiveView();

   205         }

   206 

   207         fx       = this._getFx(newView, oldView, options.transition);

   208         isChild  = this._isChildView(newView, oldView);

   209         isParent = !isChild && this._isParentView(newView, oldView);

   210         prepend  = !!options.prepend || isParent;

   211 

   212         // Preforms simply attach/detach of the new and old view respectively

   213         // when there's no transition to perform.

   214         if (!fx) {

   215             this._attachView(newView, prepend);

   216             this._detachView(oldView);

   217             callback && callback.call(this, newView);

   218 

   219             this._transitioning = false;

   220             return this._dequeueActiveView();

   221         }

   222 

   223         this._transitioning = true;

   224 

   225         container     = this.get('container');

   226         transitioning = Y.App.CLASS_NAMES.transitioning;

   227 

   228         container.addClass(transitioning);

   229 

   230         this._attachView(newView, prepend);

   231 

   232         // Called when view transitions completed, if none were added this will

   233         // run right away.

   234         function complete() {

   235             this._detachView(oldView);

   236             container.removeClass(transitioning);

   237             callback && callback.call(this, newView);

   238 

   239             this._transitioning = false;

   240             return this._dequeueActiveView();

   241         }

   242 

   243         // Setup a new stack to run the view transitions in parallel.

   244         transitions = new Y.Parallel({context: this});

   245         fxConfig    = {

   246             crossView: !!oldView && !!newView,

   247             prepended: prepend

   248         };

   249 

   250         // Transition the new view first to prevent a gap when sliding.

   251         if (newView && fx.viewIn) {

   252             newView.get('container')

   253                 .transition(fx.viewIn, fxConfig, transitions.add());

   254         }

   255 

   256         if (oldView && fx.viewOut) {

   257             oldView.get('container')

   258                 .transition(fx.viewOut, fxConfig, transitions.add());

   259         }

   260 

   261         transitions.done(complete);

   262     }

   263 };

   264 

   265 // -- Transition fx ------------------------------------------------------------

   266 Y.mix(Y.Transition.fx, {

   267     'app:fadeIn': {

   268         opacity : 1,

   269         duration: 0.3,

   270 

   271         on: {

   272             start: function (data) {

   273                 var styles = {opacity: 0},

   274                     config = data.config;

   275 

   276                 if (config.crossView && !config.prepended) {

   277                     styles.transform = 'translateX(-100%)';

   278                 }

   279 

   280                 this.setStyles(styles);

   281             },

   282 

   283             end: function () {

   284                 this.setStyle('transform', 'translateX(0)');

   285             }

   286         }

   287     },

   288 

   289     'app:fadeOut': {

   290         opacity : 0,

   291         duration: 0.3,

   292 

   293         on: {

   294             start: function (data) {

   295                 var styles = {opacity: 1},

   296                     config = data.config;

   297 

   298                 if (config.crossView && config.prepended) {

   299                     styles.transform = 'translateX(-100%)';

   300                 }

   301 

   302                 this.setStyles(styles);

   303             },

   304 

   305             end: function () {

   306                 this.setStyle('transform', 'translateX(0)');

   307             }

   308         }

   309     },

   310 

   311     'app:slideLeft': {

   312         duration : 0.3,

   313         transform: 'translateX(-100%)',

   314 

   315         on: {

   316             start: function () {

   317                 this.setStyles({

   318                     opacity  : 1,

   319                     transform: 'translateX(0%)'

   320                 });

   321             },

   322 

   323             end: function () {

   324                 this.setStyle('transform', 'translateX(0)');

   325             }

   326         }

   327     },

   328 

   329     'app:slideRight': {

   330         duration : 0.3,

   331         transform: 'translateX(0)',

   332 

   333         on: {

   334             start: function () {

   335                 this.setStyles({

   336                     opacity  : 1,

   337                     transform: 'translateX(-100%)'

   338                 });

   339             },

   340 

   341             end: function () {

   342                 this.setStyle('transform', 'translateX(0)');

   343             }

   344         }

   345     }

   346 });

   347 

   348 // -- Namespacae ---------------------------------------------------------------

   349 Y.App.TransitionsNative = AppTransitionsNative;

   350 Y.Base.mix(Y.App, [AppTransitionsNative]);

   351 

   352 

   353 }, '@VERSION@', {"requires": ["app-transitions", "app-transitions-css", "parallel", "transition"]});