1 // ==========================================================================
  2 // Project:   SproutCore - JavaScript Application Framework
  3 // Copyright: ©2006-2011 Strobe Inc. and contributors.
  4 //            Portions ©2008-2011 Apple Inc. All rights reserved.
  5 // License:   Licensed under MIT license (see license.js)
  6 // ==========================================================================
  7 
  8 /** @class
  9 
 10   Displays several views as scenes that can slide on and off the screen.  The
 11   scene view is a nice way to provide a simple effect of moving from a
 12   higher level screen to a more detailed level screen.  You will be able to
 13   optionally choose the kind of animation used to transition the two scenes
 14   as well if supported on the web browser.
 15 
 16   # Using SC.SceneView
 17 
 18   To setup the scene view, you should define the 'scenes' property with an
 19   array of scene names.  These will be the properties on the scene view that
 20   you can shift in an out of view as needed.  You can edit the scenes property
 21   at any time.  It will only be used when you start to transition from one
 22   scene to another.
 23 
 24   Next you should set your nowShowing property to the name of the scene you
 25   would like to display.  This will cause the view to transition scenes if it
 26   is visible on screen.  Otherwise, it will simply make the new scene view
 27   the current content view and that's it.
 28 
 29   @extends SC.ContainerView
 30   @since Version 1.0
 31 */
 32 SC.SceneView = SC.ContainerView.extend(
 33 /** @scope SC.SceneView.prototype */ {
 34 
 35   /**
 36     Array of scene names.  Scenes will slide on and off screen in the order
 37     that you specify them here.  That is, if you shift from a scene at index
 38     2 to a scene at index 1, the scenes will animate backwards.  If you
 39     shift to a scene at index 3, the scenes will animate forwards.
 40 
 41     @type Array
 42     @default null
 43   */
 44   scenes: null,
 45 
 46   /**
 47     The transitionSwap plugin to use when animating backwards.
 48 
 49     @type Object (SC.SwapTransitionProtocol)
 50     @default null
 51     @see SC.ContainerView#transitionSwap
 52   */
 53   transitionBackward: SC.ContainerView.PUSH,
 54 
 55   /**
 56     The options for the given transitionSwap plugin when animating backwards.
 57 
 58     @type Object
 59     @default { duration: .25, direction: 'right' }
 60     @see SC.ContainerView#transitionBackwardOptions
 61   */
 62   transitionBackwardOptions: { duration: .25, direction: 'right' },
 63 
 64   /**
 65     The transitionSwap plugin to use when animating forwards.
 66 
 67     @type Object (SC.SwapTransitionProtocol)
 68     @default null
 69     @see SC.ContainerView#transitionSwap
 70   */
 71   transitionForward: SC.ContainerView.PUSH,
 72 
 73   /**
 74     The options for the given transitionSwap plugin when animating forwards.
 75 
 76     @type Object
 77     @default { duration: .25, direction: 'left' }
 78     @see SC.ContainerView#transitionBackwardOptions
 79   */
 80   transitionForwardOptions: { duration: .25, direction: 'left' },
 81 
 82   /** @private
 83     @param {SC.View} newContent the new content view or null.
 84     @see SC.ContainerView#replaceContent
 85   */
 86   replaceContent: function(newContent) {
 87     var scenes = this.get('scenes'),
 88       nowShowing = this.get('nowShowing'),
 89       outIdx = scenes ? scenes.indexOf(this._lastNowShowingView) : -1,
 90       inIdx = scenes ? scenes.indexOf(nowShowing) : -1;
 91 
 92     this._lastNowShowingView = nowShowing;
 93 
 94     if (outIdx < inIdx) {
 95       this.transitionSwap = this.transitionForward;
 96       this.transitionSwapOptions = this.transitionForwardOptions;
 97     } else {
 98       this.transitionSwap = this.transitionBackward;
 99       this.transitionSwapOptions = this.transitionBackwardOptions;
100     }
101 
102     sc_super();
103   },
104 
105 });
106