sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_push_transition.js

@@ -0,0 +1,181 @@
+// ==========================================================================
+// 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 push transitions to SC.ContainerView.  The new content will push
+    the old content out of the view.
+
+    To modify the push animation, you can set the following transition options:
+
+      - direction {String} the direction to push new content in.  Default: 'left'
+        ** 'left' - pushes new content from the right to the left
+        ** 'right' - pushes new content from the left to the right
+        ** 'up' - pushes new content from the bottom to the top
+        ** 'down' - pushes new content from the top to the bottom
+      - 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
+  */
+  PUSH: {
+
+    /** @private */
+    willBuildInToView: function (container, content, previousStatechart, options) {
+      var adjustLeft = 0,
+        adjustTop = 0,
+        frame = container.get('frame'),
+        left = 0,
+        top = 0,
+        height,
+        width;
+
+      height = frame.height;
+      width = frame.width;
+
+      // Push on to the edge of whatever the current position of previous content is.
+      if (previousStatechart && previousStatechart.get('content')) {
+        var adjustments = previousStatechart.getPath('content.liveAdjustments');
+
+        adjustLeft = adjustments.left || 0;
+        adjustTop = adjustments.top || 0;
+      }
+
+      switch (options.direction) {
+      case 'right':
+        left = -width + adjustLeft;
+        break;
+      case 'up':
+        top = height + adjustTop;
+        break;
+      case 'down':
+        top = -height + adjustTop;
+        break;
+      default:
+        left = width + adjustLeft;
+      }
+
+      // Convert to an animatable layout.
+      content.adjust({ bottom: null, right: null, left: left, top: top, height: height, width: width });
+    },
+
+    /** @private */
+    buildInToView: function (statechart, container, content, previousStatechart, options) {
+      var key;
+
+      switch (options.direction) {
+      case 'up':
+        key = 'top';
+        break;
+      case 'down':
+        key = 'top';
+        break;
+      default:
+        key = 'left';
+      }
+
+      content.animate(key, 0, {
+        duration: options.duration || 0.4,
+        timing: options.timing || 'ease'
+      }, function (data) {
+        // We may already be in exiting state by the time we transition in.
+        if (statechart.get('state') === 'entering') {
+          statechart.entered();
+        }
+      });
+    },
+
+    /** @private */
+    didBuildInToView: function (container, content, options) {
+      // Convert to a flexible layout.
+      content.adjust({ bottom: 0, right: 0, height: null, width: null });
+    },
+
+    /** @private */
+    willBuildOutFromView: function (container, content, options) {
+      var frame = container.get('frame'),
+        height,
+        width;
+
+      height = frame.height;
+      width = frame.width;
+
+      // Convert to an animatable layout.
+      content.adjust({ bottom: null, right: null, height: height, width: width });
+    },
+
+    /** @private */
+    buildOutFromView: function (statechart, container, content, options, exitCount) {
+      var frame = container.get('frame'),
+        key,
+        value;
+
+      switch (options.direction) {
+      case 'right':
+        key = 'left';
+        value = frame.width;
+        break;
+      case 'up':
+        key = 'top';
+        value = -frame.height;
+        break;
+      case 'down':
+        key = 'top';
+        value = frame.height;
+        break;
+      default:
+        key = 'left';
+        value = -frame.width;
+      }
+
+      content.animate(key, value * exitCount, {
+        duration: options.duration || 0.4,
+        timing: options.timing || 'ease'
+      }, function (data) {
+        if (!data.isCancelled) {
+          statechart.exited();
+        }
+      });
+    },
+
+    /** @private */
+    didBuildOutFromView: function (container, content, options) {
+      // Convert to a flexible layout.
+      content.adjust({ bottom: 0, right: 0, height: null, width: null });
+    },
+
+    /** @private */
+    transitionClippingFrame: function (container, clippingFrame, options) {
+      var frame = container.get('frame');
+
+      switch (options.direction) {
+      case 'right':
+        clippingFrame.width = frame.width * 2;
+        clippingFrame.x = -frame.width;
+        break;
+      case 'up':
+        clippingFrame.height = frame.height * 2;
+        clippingFrame.y = -frame.height;
+        break;
+      case 'down':
+        clippingFrame.height = frame.height * 2;
+        clippingFrame.y = 0;
+        break;
+      default:
+        clippingFrame.width = frame.width * 2;
+        clippingFrame.x = 0;
+      }
+
+      return clippingFrame;
+    }
+  }
+
+});

data/lib/frameworks/sproutcore/frameworks/foundation/transitions/swap_reveal_transition.js

@@ -0,0 +1,90 @@
+// ==========================================================================
+// 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 reveal transitions to SC.ContainerView.  The old content will
+    move out revealing the new content underneath.
+
+    To modify the reveal animation, you can set the following transition
+    options:
+
+      - direction {String} The direction to move old content off.  Default: 'left'
+        ** 'left' - moves old content off to the left
+        ** 'right' - moves old content off to the right
+        ** 'up' - moves old content off to the top
+        ** 'down' - moves old content off to the bottom
+      - 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
+  */
+  REVEAL: {
+
+    /** @private */
+    willBuildOutFromView: function (container, content, options, exitCount) {
+      var frame = container.get('frame'),
+        height,
+        width;
+
+      height = frame.height;
+      width = frame.width;
+
+      // Convert to a fixed layout. Put this view on top.
+      content.adjust({ bottom: null, right: null, height: height, width: width, zIndex: exitCount });
+    },
+
+    /** @private */
+    buildOutFromView: function (statechart, container, content, options, exitCount) {
+      // We can call this transition repeatedly without effecting the current exit transition.
+      if (exitCount === 1) {
+        var frame = container.get('frame'),
+          key,
+          value;
+
+        switch (options.direction) {
+        case 'right':
+          key = 'left';
+          value = -frame.width;
+          break;
+        case 'up':
+          key = 'top';
+          value = -frame.height;
+          break;
+        case 'down':
+          key = 'top';
+          value = frame.height;
+          break;
+        default:
+          key = 'left';
+          value = frame.width;
+        }
+
+        content.animate(key, value, {
+          duration: options.duration || 0.4,
+          timing: options.timing || 'ease'
+        }, function (data) {
+          if (!data.isCancelled) {
+            statechart.exited();
+          }
+        });
+      }
+    },
+
+    /** @private */
+    didBuildOutFromView: function (container, content, options) {
+      // Convert to a flexible layout.
+      content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null });
+    }
+
+  }
+
+});

data/lib/frameworks/sproutcore/frameworks/foundation/validators/validator.js

@@ -282,13 +282,13 @@ SC.Validator.mixin(/** @scope SC.Validator */ {
       validatorKey = SC.String.classify(validatorKey);
       var validatorClass = SC.Validator[validatorKey] ;
       if (SC.none(validatorClass)) {
-        throw "validator %@ not found for %@".fmt(validatorKey, field) ;
+        throw new Error("validator %@ not found for %@".fmt(validatorKey, field));
       } else if (name) {
 
         // if a key was also passed, then find the validator in the list of
         // validators for the form.  Otherwise, just create a new instance.
         if (!form) {
-          throw "named validator (%@) could not be found for field %@ because the field does not belong to a form".fmt(name,field) ;
+          throw new Error("named validator (%@) could not be found for field %@ because the field does not belong to a form".fmt(name,field));
         }
         
         if (!form._validatorHash) form._validatorHash = {} ;

data/lib/frameworks/sproutcore/frameworks/foundation/views/container.js

@@ -5,28 +5,101 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/** 
-  @class
-  
+
+/** @class
+
   A container view will display its "content" view as its only child.  You can
   use a container view to easily swap out views on your page.  In addition to
-  displaying the actual view in the content property, you can also set the 
+  displaying the actual view in the content property, you can also set the
   nowShowing property to the property path of a view in your page and the
   view will be found and swapped in for you.
-  
-  If you want to change the way the container view swaps in your new view, 
-  override the replaceContent() method.
-  
+
+  # Animated Transitions
+
+  To animate the transition between views, you can provide a transitionSwap
+  plugin to SC.ContainerView.  There are several common transitions pre-built
+  and if you want to create your own, the SC.ViewTransitionProtocol defines the
+  methods to implement.
+
+  The transitions included with SC.ContainerView are:
+
+    - SC.ContainerView.DISSOLVE - fades between the two views
+    - SC.ContainerView.FADE_COLOR - fades out to a color and then in to the new view
+    - SC.ContainerView.MOVE_IN - moves the new view in over top of the old view
+    - SC.ContainerView.PUSH - pushes the old view out with the new view
+    - SC.ContainerView.REVEAL - moves the old view out revealing the new view underneath
+
+  To use a transitionSwap plugin, simply set it as the value of the container view's
+  `transitionSwap` property.
+
+  For example,
+
+      container = SC.ContainerView.create({
+        transitionSwap: SC.ContainerView.PUSH
+      });
+
+  Since each transitionSwap plugin predefines a unique animation, SC.ContainerView
+  provides the transitionSwapOptions property to allow for modifications to the
+  animation.
+
+  For example,
+
+      container = SC.ContainerView.create({
+        transitionSwap: SC.ContainerView.PUSH,
+        transitionSwapOptions: {
+          duration: 1.25,    // Use a longer duration then default
+          direction: 'up'    // Push the old content up
+        }
+      });
+
+  All the predefined transitionSwap plugins take options to modify the default
+  duration and timing of the animation and to see what other options are
+  available, refer to the documentation of the plugin.
+
   @extends SC.View
   @since SproutCore 1.0
 */
 SC.ContainerView = SC.View.extend(
-/** @scope SC.ContainerView.prototype */ {
+  /** @scope SC.ContainerView.prototype */ {
+
+  // ------------------------------------------------------------------------
+  // Properties
+  //
 
+  /**
+    @type Array
+    @default ['sc-container-view']
+    @see SC.View#classNames
+    @see SC.Object#concatenatedProperties
+  */
   classNames: ['sc-container-view'],
-  
-  renderDelegateName: 'containerRenderDelegate',
-  
+
+  /**
+    The content view to display.  This will become the only child view of
+    the view.  Note that if you set the nowShowing property to any value other
+    than 'null', the container view will automatically change the contentView
+    to reflect view indicated by the value.
+
+    @type SC.View
+    @default null
+  */
+  contentView: null,
+
+  /** @private */
+  contentViewBindingDefault: SC.Binding.single(),
+
+  /**
+    Whether the container view is in the process of transitioning or not.
+
+    You should observe this property in order to delay any updates to the new
+    content until the transition is complete.
+
+    @type Boolean
+    @default false
+    @since Version 1.10
+  */
+  isTransitioning: NO,
+
   /**
     Optional path name for the content view.  Set this to a property path
     pointing to the view you want to display.  This will automatically change
@@ -35,79 +108,151 @@ SC.ContainerView = SC.View.extend(
     object then relative to itself. If you pass a full property name
     (e.g. "MyApp.anotherPage.anotherView"), then the path will be followed
     from the top-level.
-    
-    @property {String, SC.View}
+
+    @type String|SC.View
+    @default null
   */
   nowShowing: null,
 
-  /** 
-    The content view to display.  This will become the only child view of
-    the view.  Note that if you set the nowShowing property to any value other
-    than 'null', the container view will automatically change the contentView
-    to reflect view indicated by the value.
-    
-    @property {SC.View}
-  */
-  contentView: null,
-  
   /** @private */
-  contentViewBindingDefault: SC.Binding.single(),
-  
+  renderDelegateName: 'containerRenderDelegate',
+
   /**
-    Replaces any child views with the passed new content.  
-    
-    This method is automatically called whenever your contentView property 
-    changes.  You can override it if you want to provide some behavior other
-    than the default.
-    
-    @param {SC.View} newContent the new content view or null.
+    The transitionSwap plugin to use when swapping views.
+
+    SC.ContainerView uses a pluggable transition architecture where the
+    transition setup, animation and cleanup can be handled by a specified
+    transitionSwap plugin.
+
+    There are a number of pre-built plugins available:
+
+      SC.ContainerView.DISSOLVE
+      SC.ContainerView.FADE_COLOR
+      SC.ContainerView.MOVE_IN
+      SC.ContainerView.PUSH
+      SC.ContainerView.REVEAL
+
+    You can even provide your own custom transitionSwap plugins.  Just create an
+    object that conforms to the SC.SwapTransitionProtocol protocol.
+
+    @type Object (SC.SwapTransitionProtocol)
+    @default null
+    @since Version 1.10
+  */
+  transitionSwap: null,
+
+  /**
+    The options for the given transitionSwap plugin.
+
+    These options are specific to the current transitionSwap plugin used and are
+    used to modify the transition animation.  To determine what options
+    may be used for a given transition and to see what the default options are,
+    see the documentation for the transition plugin being used.
+
+    Most transitions will accept a duration and timing option, but may
+    also use other options.  For example, SC.ContainerView.PUSH accepts options
+    like:
+
+        transitionSwapOptions: {
+          direction: 'left',
+          duration: 0.25,
+          timing: 'linear'
+        }
+
+    @type Object
+    @default null
+    @since Version 1.10
+  */
+  transitionSwapOptions: null,
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
+
+  /** @private
+    When a container view awakes, it will try to find the nowShowing, if
+    there is one, and set it as content if necessary.
   */
-  replaceContent: function(newContent) {
-    this.removeAllChildren() ;
-    if (newContent) this.appendChild(newContent) ;
+  awake: function () {
+    sc_super();
+
+    if (this.get('nowShowing')) {
+      this.nowShowingDidChange();
+    }
   },
 
+  /** @private
+    Overridden to prevent clipping of child views while animating.
+
+    In particular, collection views have trouble being animated in a certain
+    manner if they think their clipping frame hides themself.  For example,
+    the PUSH transition returns a double width/height frame with an adjusted
+    left/top while the transition is in process so neither view thinks it
+    is clipped.
+   */
+  clippingFrame: function () {
+    var contentStatecharts = this._contentStatecharts,
+      frame = this.get('frame'),
+      ret = sc_super();
+
+    // Allow for a modified clippingFrame while transitioning.
+    if (this.get('isTransitioning')) {
+      // Each transition may adjust the clippingFrame to accommodate itself.
+      for (var i = contentStatecharts.length - 1; i >= 0; i--) {
+        ret = contentStatecharts[i].transitionClippingFrame(ret);
+      }
+    } else {
+      ret.width = frame.width;
+    }
+
+    return ret;
+  }.property('parentView', 'frame').cacheable(),
+
   /** @private */
-  createChildViews: function() {
+  createChildViews: function () {
     // if contentView is defined, then create the content
-    var view = this.get('contentView') ;
+    var view = this.get('contentView');
+
     if (view) {
-      view = this.contentView = this.createChildView(view) ;
-      this.childViews = [view] ;
-    } 
+      view = this.contentView = this.createChildView(view);
+      this.childViews = [view];
+    }
   },
-  
-  /**
-    When a container view awakes, it will try to find the nowShowing, if 
-    there is one, and set it as content if necessary.
+
+  /** @private
+    Invoked whenever the content property changes.  This method will simply
+    call replaceContent.  Override replaceContent to change how the view is
+    swapped out.
   */
-  awake: function() {
-    sc_super();
-    var nowShowing = this.get('nowShowing') ;
-    if (nowShowing && nowShowing.length>0) this.nowShowingDidChange();
+  contentViewDidChange: function () {
+    this.replaceContent(this.get('contentView'));
+  }.observes('contentView'),
+
+  /** @private */
+  destroy: function () {
+    var contentStatecharts = this._contentStatecharts;
+
+    // Exit all the statecharts immediately. This mutates the array!
+    if (contentStatecharts) {
+      for (var i = contentStatecharts.length - 1; i >= 0; i--) {
+        contentStatecharts[i].doExit(true);
+      }
+    }
+
+    // Remove our internal reference to the statecharts.
+    this._contentStatecharts = this._currentStatechart = null;
+
+    return sc_super();
   },
-  
-  /**
+
+  /** @private
     Invoked whenever the nowShowing property changes.  This will try to find
-    the new content if possible and set it.  If you set nowShowing to an 
+    the new content if possible and set it.  If you set nowShowing to an
     empty string or null, then the current content will be cleared.
-    
-    If you set the content manually, the nowShowing property will be set to
-    SC.CONTENT_SET_DIRECTLY
   */
-  nowShowingDidChange: function() {
+  nowShowingDidChange: function () {
     // This code turns this.nowShowing into a view object by any means necessary.
-    
-    var content = this.get('nowShowing') ;
-    
-    // If nowShowing was changed because the content was set directly, then do nothing.
-    if (content === SC.CONTENT_SET_DIRECTLY) return ;
-
-    // Take note now if we need to destroy the current contentView
-    var viewToDestroy = (this._instantiatedLastView === YES) ? this.get('contentView') : null;
-
-    // Reset for next time
-    this._instantiatedLastView = NO;
+    var content = this.get('nowShowing');
 
     // If it's a string, try to turn it into the object it references...
     if (SC.typeOf(content) === SC.T_STRING && content.length > 0) {
@@ -118,35 +263,278 @@ SC.ContainerView = SC.View.extend(
         content = SC.kindOf(tempContent, SC.CoreView) ? tempContent : SC.objectForPropertyPath(content, this.get('page'));
       }
     }
-    
+
     // If it's an uninstantiated view, then attempt to instantiate it.
-    // (Uninstantiated views have a create() method; instantiated ones do not.)
-    if (SC.typeOf(content) === SC.T_CLASS) {
-      if (content.kindOf(SC.CoreView)) {
-        content = this.createChildView(content);
-        this._instantiatedLastView = YES;
-      } 
-      else content = null;
-    } 
-    
-    // If content has not been turned into a view by now, it's hopeless.
-    if (content && !(content instanceof SC.CoreView)) content = null;
-    
-    // Sets the content.
-    this.set('contentView', content) ;
+    if (content && content.kindOf(SC.CoreView)) {
+      content = this.createChildView(content);
+    } else {
+      content = null;
+    }
 
-    // If we need to cleanup the previous view, do so
-    if(viewToDestroy) viewToDestroy.destroy();
-    
+    // Sets the content.
+    this.set('contentView', content);
   }.observes('nowShowing'),
-  
-  /**
-    Invoked whenever the content property changes.  This method will simply
-    call replaceContent.  Override replaceContent to change how the view is
-    swapped out.
+
+  /** @private Called by new content statechart to indicate that it is ready. */
+  statechartReady: function () {
+    var contentStatecharts = this._contentStatecharts;
+
+    // Exit all other remaining statecharts immediately.  This mutates the array!
+    for (var i = contentStatecharts.length - 2; i >= 0; i--) {
+      contentStatecharts[i].doExit(true);
+    }
+
+    this.set('isTransitioning', NO);
+  },
+
+  /** @private Called by content statecharts to indicate that they have exited. */
+  statechartEnded: function (statechart) {
+    var contentStatecharts = this._contentStatecharts;
+
+    // Remove the statechart.
+    contentStatecharts.removeObject(statechart);
+  },
+
+  /** @private
+    Replaces any child views with the passed new content.
+
+    This method is automatically called whenever your contentView property
+    changes.  You can override it if you want to provide some behavior other
+    than the default.
+
+    @param {SC.View} newContent the new content view or null.
   */
-  contentViewDidChange: function() {
-    this.replaceContent(this.get('contentView'));
-  }.observes('contentView')
-  
-}) ;
+  replaceContent: function (newContent) {
+    var contentStatecharts,
+      currentStatechart = this._currentStatechart,
+      newStatechart;
+
+    // Track that we are transitioning.
+    this.set('isTransitioning', YES);
+
+    // Create a statechart for the new content.
+    contentStatecharts = this._contentStatecharts;
+    if (!contentStatecharts) { contentStatecharts = this._contentStatecharts = []; }
+
+    // Call doExit on all current content statecharts.  Any statecharts in the
+    // process of exiting may accelerate their exits.
+    for (var i = contentStatecharts.length - 1; i >= 0; i--) {
+      contentStatecharts[i].doExit();
+    }
+
+    // Add the new content statechart, which will enter automatically.
+    newStatechart = SC.ContainerContentStatechart.create({
+      container: this,
+      content: newContent,
+      previousStatechart: currentStatechart
+    });
+    contentStatecharts.pushObject(newStatechart);
+
+    // Track the current statechart.
+    this._currentStatechart = newStatechart;
+  }
+
+});
+
+
+/** @private
+  In order to support transitioning views in and out of the container view,
+  each content view needs its own simple statechart.  This is required, because
+  while only one view will ever be transitioning in, several views may be in
+  the process of transitioning out.  See the 'SC.ContainerView Statechart.graffle'
+  file in the repository.
+*/
+SC.ContainerContentStatechart = SC.Object.extend({
+
+  // ------------------------------------------------------------------------
+  // Properties
+  //
+
+  container: null,
+
+  content: null,
+
+  previousStatechart: null,
+
+  state: 'none',
+
+  // ------------------------------------------------------------------------
+  // Methods
+  //
+
+  init: function () {
+    sc_super();
+
+    // Default entry state.
+    this.gotoEnteringState();
+  },
+
+  transitionClippingFrame: function (clippingFrame) {
+    var container = this.get('container'),
+      options = container.get('transitionSwapOptions') || {},
+      transitionSwap = container.get('transitionSwap');
+
+    if (transitionSwap && transitionSwap.transitionClippingFrame) {
+      return transitionSwap.transitionClippingFrame(container, clippingFrame, options);
+    } else {
+      return clippingFrame;
+    }
+  },
+
+  // ------------------------------------------------------------------------
+  // Actions & Events
+  //
+
+  entered: function () {
+    if (this.state === 'entering') {
+      this.gotoReadyState();
+    //@if(debug)
+    } else {
+      SC.error('Developer Error: SC.ContainerView should not receive an internal entered event while not in entering state.');
+    //@endif
+    }
+  },
+
+  doExit: function (immediately) {
+    if (this.state !== 'exited') {
+      this.gotoExitingState(immediately);
+    //@if(debug)
+    } else {
+      SC.error('Developer Error: SC.ContainerView should not receive an internal doExit event while in exited state.');
+    //@endif
+    }
+  },
+
+  exited: function () {
+    if (this.state === 'exiting') {
+      this.gotoExitedState();
+    //@if(debug)
+    } else {
+      SC.error('Developer Error: SC.ContainerView should not receive an internal exited event while not in exiting state.');
+    //@endif
+    }
+  },
+
+  // ------------------------------------------------------------------------
+  // States
+  //
+
+  // Entering
+  gotoEnteringState: function () {
+    var container = this.get('container'),
+      content = this.get('content'),
+      previousStatechart = this.get('previousStatechart'),
+      options = container.get('transitionSwapOptions') || {},
+      transitionSwap = container.get('transitionSwap');
+
+    // Assign the state.
+    this.state = 'entering';
+
+    if (!!content) {
+      container.appendChild(content);
+    }
+
+    // Don't transition unless there is a previous statechart.
+    if (!!previousStatechart && !!content && !!transitionSwap) {
+      if (!!transitionSwap.willBuildInToView) {
+        transitionSwap.willBuildInToView(container, content, previousStatechart, options);
+      }
+      if (!!transitionSwap.buildInToView) {
+        transitionSwap.buildInToView(this, container, content, previousStatechart, options);
+      }
+    } else {
+      this.entered();
+    }
+  },
+
+  // Exiting
+  gotoExitingState: function (immediately) {
+    var container = this.get('container'),
+      content = this.get('content'),
+      exitCount = this._exitCount,
+      options = container.get('transitionSwapOptions') || {},
+      transitionSwap = container.get('transitionSwap');
+
+    if (!immediately && !!content && !!transitionSwap) {
+      if (this.state === 'entering') {
+        if (!!transitionSwap.buildInDidCancel) {
+          transitionSwap.buildInDidCancel(container, content, options);
+        }
+      } else if (this.state === 'exiting') {
+        if (!!transitionSwap.buildOutDidCancel) {
+          transitionSwap.buildOutDidCancel(container, content, options);
+        }
+      }
+    }
+
+    // Assign the state.
+    this.state = 'exiting';
+
+    if (!immediately && !!content && !!transitionSwap) {
+      // Re-entering the exiting state may need to accelerate the transition, pass the count to the plugin.
+      if (!exitCount) { exitCount = this._exitCount = 1; }
+
+      if (!!transitionSwap.willBuildOutFromView) {
+        transitionSwap.willBuildOutFromView(container, content, options, exitCount);
+      }
+
+      if (!!transitionSwap.buildOutFromView) {
+        transitionSwap.buildOutFromView(this, container, content, options, exitCount);
+      }
+
+      // Increment the exit count each time doExit is called.
+      this._exitCount += 1;
+    } else {
+      this.exited();
+    }
+  },
+
+  // Exited
+  gotoExitedState: function () {
+    var container = this.get('container'),
+      content = this.get('content'),
+      options = container.get('transitionSwapOptions') || {},
+      transitionSwap = container.get('transitionSwap');
+
+    if (!!content) {
+      if (transitionSwap) {
+        if (!!transitionSwap.didBuildOutFromView) {
+          transitionSwap.didBuildOutFromView(container, content, options);
+        }
+      }
+
+      if (content.createdByParent) {
+        container.removeChildAndDestroy(content);
+      } else {
+        container.removeChild(content);
+      }
+    }
+
+    // Send ended event to container view statechart.
+    container.statechartEnded(this);
+
+    // Assign the state.
+    this.state = 'exited';
+  },
+
+  // Ready
+  gotoReadyState: function () {
+    var container = this.get('container'),
+      content = this.get('content'),
+      options = container.get('transitionSwapOptions') || {},
+      transitionSwap = container.get('transitionSwap');
+
+    if (content && transitionSwap) {
+      if (!!transitionSwap.didBuildInToView) {
+        transitionSwap.didBuildInToView(container, content, options);
+      }
+    }
+
+    // Send ready event to container view statechart.
+    container.statechartReady();
+
+    // Assign the state.
+    this.state = 'ready';
+  }
+
+});