// ========================================================================== // 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) // ==========================================================================

sc_require('panes/panel');

/**

@class

  Displays a modal sheet pane that animates from the top of the viewport.

The default way to use the sheet pane is to simply add it to your page like this:

SC.SheetPane.create({
       layout: { width: 400, height: 200, centerX: 0 },
       contentView: SC.View.extend({
       })
     }).append();

This will cause your sheet panel to display.  The default layout for a Sheet
is to cover the entire document window with a semi-opaque background, and to
resize with the window.

@extends SC.PanelPane
@since SproutCore 1.0
@author Evin Grano
@author Tom Dale
@author Joe Gaudet
*/

SC.SheetPane = SC.PanelPane.extend(

/** @scope SC.SheetPane.prototype */
{

  /**
   @type {Array}
   @default ['sc-sheet']
   @see SC.View#classNames
   */
  classNames: ['sc-sheet'],

  /**
   @type SC.View
   @default SC.ModalPane
   */
  modalPane: SC.ModalPane,

  /**
   * Duration in seconds
   * @type {Number}
   */
  duration: 0.3,

  /**
   * Timing Function
   *
   * @type {String}
   */
  timing: 'ease-in-out',

  /** @private */
  transitionIn: SC.View.SLIDE_IN,

  /** @private */
  transitionInOptions: function () {
    return {
      direction: 'down',
      duration: this.get('duration'),
      timing: this.get('timing')
    };
  }.property('timing', 'duration').cacheable(),

  /** @private */
  transitionOut: SC.View.SLIDE_OUT,

  /** @private */
  transitionOutOptions: function () {
    return {
      direction: 'up',
      duration: this.get('duration'),
      timing: this.get('timing')
    };
  }.property('timing', 'duration').cacheable()

});