// ========================================================================== // Project: SproutCore // Copyright: @2013 7x7 Software, Inc. // License: Licensed under MIT license (see license.js) // ========================================================================== sc_require('views/container');

SC.mixin(SC.ContainerView, /** @scope SC.ContainerView */ {

/** @class
   Provides fade through color transitions to SC.ContainerView.  The old
   content will fade out to a color and the new content will then fade in.

   To modify the fade through color animation, you can set the following
   transition options:

     - color {String} any valid CSS Color.  Default: 'black'
     - duration {Number} the number of seconds for the animation.  Default: 0.4
     - timing {String} the animation timing function.  Default: 'ease'

   @extends SC.ViewTransitionProtocol
   @see SC.View#animate for other timing functions.
   @since Version 1.10
 */
 FADE_COLOR: {

   /** @private */
   willBuildInToView: function (container, content, previousStatechart, options) {
     var color,
       colorView;

     content.adjust({ opacity: 0 });

     // Create a color view to fade through.
     color = SC.Color.from(options.color || 'black');
     colorView = SC.View.create({
       layout: { opacity: 0, zIndex: 1 },
       render: function (context) {
         context.addStyle('background-color', color.get('cssText'));
       }
     });
     container.appendChild(colorView);
   },

   /** @private */
   buildInToView: function (statechart, container, content, previousStatechart, options) {
     var childViews = container.get('childViews'),
       colorView;

     colorView = childViews.objectAt(childViews.get('length') - 1);

     // Fade the color in (uses half the total duration)
     colorView.animate('opacity', 1, {
       duration: options.duration * 0.5 || 0.4,
       timing: options.timing || 'ease-in'
     }, function () {
       // Show new content, then fade the color out.
       content.adjust('opacity', 1);

       colorView.animate('opacity', 0, {
         duration: options.duration * 0.5 || 0.4,
         timing: options.timing || 'ease-in'
       }, function (data) {
         // It's best to clean up the colorView here rather than try to find it again on teardown,
         // since multiple color views could be added.
         container.removeChild(this);
         this.destroy();

         // We may already be in exiting state by the time we transition in.
         if (statechart.get('state') === 'entering') {
           statechart.entered();
         }
       });
     });
   },

   /** @private */
   buildOutFromView: function (statechart, container, content, options, exitCount) {
     // Do nothing.
   }

 }

});