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 sc_require('panes/panel');
  9 
 10 /**
 11  @class
 12 
 13    Displays a modal sheet pane that animates from the top of the viewport.
 14 
 15  The default way to use the sheet pane is to simply add it to your page like this:
 16 
 17  SC.SheetPane.create({
 18         layout: { width: 400, height: 200, centerX: 0 },
 19         contentView: SC.View.extend({
 20         })
 21       }).append();
 22 
 23  This will cause your sheet panel to display.  The default layout for a Sheet
 24  is to cover the entire document window with a semi-opaque background, and to
 25  resize with the window.
 26 
 27  @extends SC.PanelPane
 28  @since SproutCore 1.0
 29  @author Evin Grano
 30  @author Tom Dale
 31  @author Joe Gaudet
 32  */
 33 SC.SheetPane = SC.PanelPane.extend(
 34   /** @scope SC.SheetPane.prototype */
 35   {
 36 
 37     /**
 38      @type {Array}
 39      @default ['sc-sheet']
 40      @see SC.View#classNames
 41      */
 42     classNames: ['sc-sheet'],
 43 
 44     /**
 45      @type SC.View
 46      @default SC.ModalPane
 47      */
 48     modalPane: SC.ModalPane,
 49 
 50     /**
 51      * Duration in seconds
 52      * @type {Number}
 53      */
 54     duration: 0.3,
 55 
 56     /**
 57      * Timing Function
 58      *
 59      * @type {String}
 60      */
 61     timing: 'ease-in-out',
 62 
 63     /** @private */
 64     transitionIn: SC.View.SLIDE_IN,
 65 
 66     /** @private */
 67     transitionInOptions: function () {
 68       return {
 69         direction: 'down',
 70         duration: this.get('duration'),
 71         timing: this.get('timing')
 72       };
 73     }.property('timing', 'duration').cacheable(),
 74 
 75 
 76     /** @private */
 77     transitionOut: SC.View.SLIDE_OUT,
 78 
 79     /** @private */
 80     transitionOutOptions: function () {
 81       return {
 82         direction: 'up',
 83         duration: this.get('duration'),
 84         timing: this.get('timing')
 85       };
 86     }.property('timing', 'duration').cacheable()
 87 
 88   });
 89 
 90