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 move in transitions to SC.ContainerView.  The new content will
 14     move in over top of the old content.
 15 
 16     To modify the move in animation, you can set the following transition
 17     options:
 18 
 19       - direction {String} the direction to move new content in.  Default: 'left'.
 20         ** 'left' - moves new content from the right to the left
 21         ** 'right' - moves new content from the left to the right
 22         ** 'up' - moves new content from the bottom to the top
 23         ** 'down' - moves new content from the top to the bottom
 24       - duration {Number} the number of seconds for the animation.  Default: 0.4
 25       - timing {String} the animation timing function.  Default: 'ease'
 26 
 27     @extends SC.ViewTransitionProtocol
 28     @see SC.View#animate for other timing functions.
 29     @since Version 1.10
 30   */
 31   MOVE_IN: {
 32 
 33     /** @private */
 34     willBuildInToView: function (container, content, previousStatechart, options) {
 35       var frame = container.get('frame'),
 36         left,
 37         top,
 38         height,
 39         width;
 40 
 41       height = frame.height;
 42       width = frame.width;
 43 
 44       switch (options.direction) {
 45       case 'right':
 46         left = -width;
 47         break;
 48       case 'up':
 49         top = height;
 50         break;
 51       case 'down':
 52         top = -height;
 53         break;
 54       default:
 55         left = width;
 56       }
 57 
 58       content.adjust({ bottom: null, left: left || 0, right: null, top: top || 0, height: height, width: width });
 59     },
 60 
 61     /** @private */
 62     buildInToView: function (statechart, container, content, previousStatechart, options) {
 63       var key,
 64         value;
 65 
 66       switch (options.direction) {
 67       case 'right':
 68         key = 'left';
 69         break;
 70       case 'up':
 71         key = 'top';
 72         break;
 73       case 'down':
 74         key = 'top';
 75         break;
 76       default:
 77         key = 'left';
 78       }
 79 
 80       content.animate(key, 0, {
 81         duration: options.duration || 0.4,
 82         timing: options.timing || 'ease'
 83       }, function (data) {
 84         // We may already be in exiting state by the time we transition in.
 85         if (statechart.get('state') === 'entering') {
 86           statechart.entered();
 87         }
 88       });
 89     },
 90 
 91     /** @private */
 92     didBuildInToView: function (container, content, options) {
 93       // Convert to a flexible layout.
 94       content.adjust({ bottom: 0, right: 0, height: null, width: null });
 95     },
 96 
 97     /** @private */
 98     didBuildOutFromView: function (container, content, options) {
 99       // Convert to a flexible layout (in case we never fully entered).
100       content.adjust({ bottom: 0, right: 0, height: null, width: null });
101     },
102 
103     /** @private */
104     buildOutFromView: function (statechart, container, content, options) {
105       // Do nothing.
106     }
107   }
108 
109 });
110