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 12 /** @class 13 Provides move in transitions to SC.ContainerView. The new content will 14 move in over top of the old content. 15 16 To modify the move in animation, you can set the following transition 17 options: 18 19 - direction {String} the direction to move new content in. Default: 'left'. 20 ** 'left' - moves new content from the right to the left 21 ** 'right' - moves new content from the left to the right 22 ** 'up' - moves new content from the bottom to the top 23 ** 'down' - moves new content from the top to the bottom 24 - duration {Number} the number of seconds for the animation. Default: 0.4 25 - timing {String} the animation timing function. Default: 'ease' 26 27 @extends SC.ViewTransitionProtocol 28 @see SC.View#animate for other timing functions. 29 @since Version 1.10 30 */ 31 MOVE_IN: { 32 33 /** @private */ 34 willBuildInToView: function (container, content, previousStatechart, options) { 35 var frame = container.get('frame'), 36 left, 37 top, 38 height, 39 width; 40 41 height = frame.height; 42 width = frame.width; 43 44 switch (options.direction) { 45 case 'right': 46 left = -width; 47 break; 48 case 'up': 49 top = height; 50 break; 51 case 'down': 52 top = -height; 53 break; 54 default: 55 left = width; 56 } 57 58 content.adjust({ bottom: null, left: left || 0, right: null, top: top || 0, height: height, width: width }); 59 }, 60 61 /** @private */ 62 buildInToView: function (statechart, container, content, previousStatechart, options) { 63 var key, 64 value; 65 66 switch (options.direction) { 67 case 'right': 68 key = 'left'; 69 break; 70 case 'up': 71 key = 'top'; 72 break; 73 case 'down': 74 key = 'top'; 75 break; 76 default: 77 key = 'left'; 78 } 79 80 content.animate(key, 0, { 81 duration: options.duration || 0.4, 82 timing: options.timing || 'ease' 83 }, function (data) { 84 // We may already be in exiting state by the time we transition in. 85 if (statechart.get('state') === 'entering') { 86 statechart.entered(); 87 } 88 }); 89 }, 90 91 /** @private */ 92 didBuildInToView: function (container, content, options) { 93 // Convert to a flexible layout. 94 content.adjust({ bottom: 0, right: 0, height: null, width: null }); 95 }, 96 97 /** @private */ 98 didBuildOutFromView: function (container, content, options) { 99 // Convert to a flexible layout (in case we never fully entered). 100 content.adjust({ bottom: 0, right: 0, height: null, width: null }); 101 }, 102 103 /** @private */ 104 buildOutFromView: function (statechart, container, content, options) { 105 // Do nothing. 106 } 107 } 108 109 }); 110