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   /** @class
 12     Provides reveal transitions to SC.ContainerView.  The old content will
 13     move out revealing the new content underneath.
 14 
 15     To modify the reveal animation, you can set the following transition
 16     options:
 17 
 18       - direction {String} The direction to move old content off.  Default: 'left'
 19         ** 'left' - moves old content off to the left
 20         ** 'right' - moves old content off to the right
 21         ** 'up' - moves old content off to the top
 22         ** 'down' - moves old content off to the bottom
 23       - duration {Number} the number of seconds for the animation.  Default: 0.4
 24       - timing {String} the animation timing function.  Default: 'ease'
 25 
 26     @extends SC.ViewTransitionProtocol
 27     @see SC.View#animate for other timing functions.
 28     @since Version 1.10
 29   */
 30   REVEAL: {
 31 
 32     /** @private */
 33     buildInToView: function (statechart, container, content, previousStatechart, options) {
 34       // This transition is unique in that we have to wait for the previous
 35       // content to finish building out entirely, before we can be considered
 36       // fully entered.
 37       // if (previousStatechart && previousStatechart.get('content')) {
 38       //   previousStatechart.addObserver('state', this, this.previousStateDidChange, statechart);
 39       // }
 40     },
 41 
 42     /** @private */
 43     // reverseBuildIn: function (statechart, container, content, options) {
 44     //   var nextStatechart = container._currentStatechart;
 45 
 46     //   // We were waiting for another view to remove itself previously, now
 47     //   // we are going out because someone else is coming in. If that someone
 48     //   // else was also going out, then we should stay put because they are
 49     //   // going to reverse.
 50     //   if (nextStatechart && nextStatechart.get('content')) {
 51     //     nextStatechart.addObserver('state', this, this.nextStateDidChange, statechart);
 52     //   }
 53     // },
 54 
 55     /** @private */
 56     // previousStateDidChange: function (previousStatechart, key, alwaysNull, statechart) {
 57     //   if (previousStatechart.state === 'exited') {
 58     //     statechart.entered();
 59 
 60     //     // Clean up.
 61     //     previousStatechart.removeObserver('state', this, this.previousStateDidChange);
 62     //   }
 63     // },
 64 
 65     /** @private */
 66     didBuildInToView: function (container, content, options) {
 67       // Convert to a flexible layout.
 68       content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null });
 69     },
 70 
 71     /** @private */
 72     willBuildOutFromView: function (container, content, options, exitCount) {
 73       var frame = container.get('frame'),
 74         height,
 75         width;
 76 
 77       height = frame.height;
 78       width = frame.width;
 79 
 80       // Convert to a fixed layout. Put this view on top.
 81       content.adjust({ bottom: null, right: null, height: height, width: width, zIndex: exitCount });
 82     },
 83 
 84     /** @private */
 85     buildOutFromView: function (statechart, container, content, options, exitCount) {
 86       // We can call this transition repeatedly without effecting the current exit transition.
 87       if (exitCount === 1) {
 88         var frame = container.get('frame'),
 89           key,
 90           value;
 91 
 92         switch (options.direction) {
 93         case 'right':
 94           key = 'left';
 95           value = -frame.width;
 96           break;
 97         case 'up':
 98           key = 'top';
 99           value = -frame.height;
100           break;
101         case 'down':
102           key = 'top';
103           value = frame.height;
104           break;
105         default:
106           key = 'left';
107           value = frame.width;
108         }
109 
110         content.animate(key, value, {
111           duration: options.duration || 0.4,
112           timing: options.timing || 'ease'
113         }, function (data) {
114           if (!data.isCancelled) {
115             statechart.exited();
116           }
117         });
118       }
119     },
120 
121     /** @private */
122     // reverseBuildOut: function (statechart, container, content, options) {
123     //   var key, value;
124 
125     //   // Cancel the animation in place.
126     //   content.cancelAnimation(SC.LayoutState.CURRENT);
127 
128     //   switch (options.direction) {
129     //   case 'up':
130     //   case 'down':
131     //     key = 'top';
132     //     value = 0;
133     //     break;
134     //   default:
135     //     key = 'left';
136     //     value = 0;
137     //   }
138 
139     //   content.animate(key, value, {
140     //     duration: options.duration || 0.2,
141     //     timing: options.timing || 'ease'
142     //   }, function (data) {
143     //     if (!data.isCancelled) {
144     //       statechart.entered();
145     //     }
146     //   });
147     // },
148 
149     /** @private */
150     didBuildOutFromView: function (container, content, options) {
151       // Convert to a flexible layout.
152       content.adjust({ top: 0, left: 0, bottom: 0, right: 0, height: null, width: null, zIndex: null });
153     }
154 
155   }
156 
157 });
158