// ========================================================================== // Project: SproutCore
- JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ==========================================================================
/** @class
Displays several views as scenes that can slide on and off the screen. The scene view is a nice way to provide a simple effect of moving from a higher level screen to a more detailed level screen. You will be able to optionally choose the kind of animation used to transition the two scenes as well if supported on the web browser. # Using SC.SceneView To setup the scene view, you should define the 'scenes' property with an array of scene names. These will be the properties on the scene view that you can shift in an out of view as needed. You can edit the scenes property at any time. It will only be used when you start to transition from one scene to another. Next you should set your nowShowing property to the name of the scene you would like to display. This will cause the view to transition scenes if it is visible on screen. Otherwise, it will simply make the new scene view the current content view and that's it. @extends SC.ContainerView @since Version 1.0
*/ SC
.SceneView = SC
.ContainerView.extend( /** @scope SC
.SceneView.prototype */ {
/** Array of scene names. Scenes will slide on and off screen in the order that you specify them here. That is, if you shift from a scene at index 2 to a scene at index 1, the scenes will animate backwards. If you shift to a scene at index 3, the scenes will animate forwards. @type Array @default null */ scenes: null, /** The transitionSwap plugin to use when animating backwards. @type Object (SC.SwapTransitionProtocol) @default null @see SC.ContainerView#transitionSwap */ transitionBackward: SC.ContainerView.PUSH, /** The options for the given transitionSwap plugin when animating backwards. @type Object @default { duration: .25, direction: 'right' } @see SC.ContainerView#transitionBackwardOptions */ transitionBackwardOptions: { duration: .25, direction: 'right' }, /** The transitionSwap plugin to use when animating forwards. @type Object (SC.SwapTransitionProtocol) @default null @see SC.ContainerView#transitionSwap */ transitionForward: SC.ContainerView.PUSH, /** The options for the given transitionSwap plugin when animating forwards. @type Object @default { duration: .25, direction: 'left' } @see SC.ContainerView#transitionBackwardOptions */ transitionForwardOptions: { duration: .25, direction: 'left' }, /** @private @param {SC.View} newContent the new content view or null. @see SC.ContainerView#replaceContent */ replaceContent: function(newContent) { var scenes = this.get('scenes'), nowShowing = this.get('nowShowing'), outIdx = scenes ? scenes.indexOf(this._lastNowShowingView) : -1, inIdx = scenes ? scenes.indexOf(nowShowing) : -1; this._lastNowShowingView = nowShowing; if (outIdx < inIdx) { this.transitionSwap = this.transitionForward; this.transitionSwapOptions = this.transitionForwardOptions; } else { this.transitionSwap = this.transitionBackward; this.transitionSwapOptions = this.transitionBackwardOptions; } sc_super(); },
});