1 // ==========================================================================
  2 // Project:   SproutCore
  3 // Copyright: @2013 7x7 Software, Inc.
  4 // License:   Licensed under MIT license (see license.js)
  5 // ==========================================================================
  6 sc_require('views/container');
  7 
  8 
  9 SC.mixin(SC.ContainerView,
 10 /** @scope SC.ContainerView */ {
 11 
 12  /** @class
 13     Provides fade through color transitions to SC.ContainerView.  The old
 14     content will fade out to a color and the new content will then fade in.
 15 
 16     To modify the fade through color animation, you can set the following
 17     transition options:
 18 
 19       - color {String} any valid CSS Color.  Default: 'black'
 20       - duration {Number} the number of seconds for the animation.  Default: 0.4
 21       - timing {String} the animation timing function.  Default: 'ease'
 22 
 23     @extends SC.ViewTransitionProtocol
 24     @see SC.View#animate for other timing functions.
 25     @since Version 1.10
 26   */
 27   FADE_COLOR: {
 28 
 29     /** @private */
 30     willBuildInToView: function (container, content, previousStatechart, options) {
 31       var color,
 32         colorView;
 33 
 34       content.adjust({ opacity: 0 });
 35 
 36       // Create a color view to fade through.
 37       color = SC.Color.from(options.color || 'black');
 38       colorView = SC.View.create({
 39         layout: { opacity: 0, zIndex: 1 },
 40         render: function (context) {
 41           context.addStyle('background-color', color.get('cssText'));
 42         }
 43       });
 44       container.appendChild(colorView);
 45     },
 46 
 47     /** @private */
 48     buildInToView: function (statechart, container, content, previousStatechart, options) {
 49       var childViews = container.get('childViews'),
 50         colorView;
 51 
 52       colorView = childViews.objectAt(childViews.get('length') - 1);
 53 
 54       // Fade the color in (uses half the total duration)
 55       colorView.animate('opacity', 1, {
 56         duration: options.duration * 0.5 || 0.4,
 57         timing: options.timing || 'ease-in'
 58       }, function () {
 59         // Show new content, then fade the color out.
 60         content.adjust('opacity', 1);
 61 
 62         colorView.animate('opacity', 0, {
 63           duration: options.duration * 0.5 || 0.4,
 64           timing: options.timing || 'ease-in'
 65         }, function (data) {
 66           // It's best to clean up the colorView here rather than try to find it again on teardown,
 67           // since multiple color views could be added.
 68           container.removeChild(this);
 69           this.destroy();
 70 
 71           // We may already be in exiting state by the time we transition in.
 72           if (statechart.get('state') === 'entering') {
 73             statechart.entered();
 74           }
 75         });
 76       });
 77     },
 78 
 79     /** @private */
 80     buildOutFromView: function (statechart, container, content, options, exitCount) {
 81       // Do nothing.
 82     }
 83 
 84   }
 85 
 86 });
 87