// ========================================================================== // 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 */ buildInToView: function (statechart, container, content, previousStatechart, options) { // This transition is unique in that we have to wait for the previous // content to finish building out entirely, before we can be considered // fully entered. // if (previousStatechart && previousStatechart.get('content')) { // previousStatechart.addObserver('state', this, this.previousStateDidChange, statechart); // } }, /** @private */ // reverseBuildIn: function (statechart, container, content, options) { // var nextStatechart = container._currentStatechart; // // We were waiting for another view to remove itself previously, now // // we are going out because someone else is coming in. If that someone // // else was also going out, then we should stay put because they are // // going to reverse. // if (nextStatechart && nextStatechart.get('content')) { // nextStatechart.addObserver('state', this, this.nextStateDidChange, statechart); // } // }, /** @private */ // previousStateDidChange: function (previousStatechart, key, alwaysNull, statechart) { // if (previousStatechart.state === 'exited') { // statechart.entered(); // // Clean up. // previousStatechart.removeObserver('state', this, this.previousStateDidChange); // } // }, /** @private */ didBuildInToView: function (container, content, options) { // Convert to a flexible layout. content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null }); }, /** @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 */ // reverseBuildOut: function (statechart, container, content, options) { // var key, value; // // Cancel the animation in place. // content.cancelAnimation(SC.LayoutState.CURRENT); // switch (options.direction) { // case 'up': // case 'down': // key = 'top'; // value = 0; // break; // default: // key = 'left'; // value = 0; // } // content.animate(key, value, { // duration: options.duration || 0.2, // timing: options.timing || 'ease' // }, function (data) { // if (!data.isCancelled) { // statechart.entered(); // } // }); // }, /** @private */ didBuildOutFromView: function (container, content, options) { // Convert to a flexible layout. content.adjust({ top: 0, left: 0, bottom: 0, right: 0, height: null, width: null, zIndex: null }); } }
});