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 /** @class 12 Provides reveal transitions to SC.ContainerView. The old content will 13 move out revealing the new content underneath. 14 15 To modify the reveal animation, you can set the following transition 16 options: 17 18 - direction {String} The direction to move old content off. Default: 'left' 19 ** 'left' - moves old content off to the left 20 ** 'right' - moves old content off to the right 21 ** 'up' - moves old content off to the top 22 ** 'down' - moves old content off to the bottom 23 - duration {Number} the number of seconds for the animation. Default: 0.4 24 - timing {String} the animation timing function. Default: 'ease' 25 26 @extends SC.ViewTransitionProtocol 27 @see SC.View#animate for other timing functions. 28 @since Version 1.10 29 */ 30 REVEAL: { 31 32 /** @private */ 33 buildInToView: function (statechart, container, content, previousStatechart, options) { 34 // This transition is unique in that we have to wait for the previous 35 // content to finish building out entirely, before we can be considered 36 // fully entered. 37 // if (previousStatechart && previousStatechart.get('content')) { 38 // previousStatechart.addObserver('state', this, this.previousStateDidChange, statechart); 39 // } 40 }, 41 42 /** @private */ 43 // reverseBuildIn: function (statechart, container, content, options) { 44 // var nextStatechart = container._currentStatechart; 45 46 // // We were waiting for another view to remove itself previously, now 47 // // we are going out because someone else is coming in. If that someone 48 // // else was also going out, then we should stay put because they are 49 // // going to reverse. 50 // if (nextStatechart && nextStatechart.get('content')) { 51 // nextStatechart.addObserver('state', this, this.nextStateDidChange, statechart); 52 // } 53 // }, 54 55 /** @private */ 56 // previousStateDidChange: function (previousStatechart, key, alwaysNull, statechart) { 57 // if (previousStatechart.state === 'exited') { 58 // statechart.entered(); 59 60 // // Clean up. 61 // previousStatechart.removeObserver('state', this, this.previousStateDidChange); 62 // } 63 // }, 64 65 /** @private */ 66 didBuildInToView: function (container, content, options) { 67 // Convert to a flexible layout. 68 content.adjust({ bottom: 0, right: 0, height: null, width: null, zIndex: null }); 69 }, 70 71 /** @private */ 72 willBuildOutFromView: function (container, content, options, exitCount) { 73 var frame = container.get('frame'), 74 height, 75 width; 76 77 height = frame.height; 78 width = frame.width; 79 80 // Convert to a fixed layout. Put this view on top. 81 content.adjust({ bottom: null, right: null, height: height, width: width, zIndex: exitCount }); 82 }, 83 84 /** @private */ 85 buildOutFromView: function (statechart, container, content, options, exitCount) { 86 // We can call this transition repeatedly without effecting the current exit transition. 87 if (exitCount === 1) { 88 var frame = container.get('frame'), 89 key, 90 value; 91 92 switch (options.direction) { 93 case 'right': 94 key = 'left'; 95 value = -frame.width; 96 break; 97 case 'up': 98 key = 'top'; 99 value = -frame.height; 100 break; 101 case 'down': 102 key = 'top'; 103 value = frame.height; 104 break; 105 default: 106 key = 'left'; 107 value = frame.width; 108 } 109 110 content.animate(key, value, { 111 duration: options.duration || 0.4, 112 timing: options.timing || 'ease' 113 }, function (data) { 114 if (!data.isCancelled) { 115 statechart.exited(); 116 } 117 }); 118 } 119 }, 120 121 /** @private */ 122 // reverseBuildOut: function (statechart, container, content, options) { 123 // var key, value; 124 125 // // Cancel the animation in place. 126 // content.cancelAnimation(SC.LayoutState.CURRENT); 127 128 // switch (options.direction) { 129 // case 'up': 130 // case 'down': 131 // key = 'top'; 132 // value = 0; 133 // break; 134 // default: 135 // key = 'left'; 136 // value = 0; 137 // } 138 139 // content.animate(key, value, { 140 // duration: options.duration || 0.2, 141 // timing: options.timing || 'ease' 142 // }, function (data) { 143 // if (!data.isCancelled) { 144 // statechart.entered(); 145 // } 146 // }); 147 // }, 148 149 /** @private */ 150 didBuildOutFromView: function (container, content, options) { 151 // Convert to a flexible layout. 152 content.adjust({ top: 0, left: 0, bottom: 0, right: 0, height: null, width: null, zIndex: null }); 153 } 154 155 } 156 157 }); 158