sproutcore 1.9.2 → 1.10.0.rc.1

data/lib/frameworks/sproutcore/frameworks/desktop/panes/sheet.js

@@ -8,230 +8,82 @@
 sc_require('panes/panel');
 
 /**
-  @class
+ @class
 
-  Displays a modal sheet pane that animates from the top of the viewport.
+   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:
+ The default way to use the sheet pane is to simply add it to your page like this:
 
-      SC.SheetPane.create({
+ 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.
+ 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
-*/
+ @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,
-
-  /**
-    Speed of transition.  Should be expressed in msec.
-
-    @type Number
-    @default 200
-  */
-  transitionDuration: 200,
-
-  _state: 'NO_VIEW', // no view
-
-  /** @private */
-  init: function() {
-    sc_super();
-
-    if (SC.Animatable) {
-      SC.SheetPane.ANIMATABLE_AVAILABLE = YES;
-      this.mixin(SC.Animatable);
-
-      if (!this.transitions) this.transitions = {};
-      if (!this.transitions.top) {
-        // transitionDuration = 200 seems to be too fast when using Animatable
-        this.transitions.top = {
-          duration: this.transitionDuration === 200 ? 0.3 : this.transitionDuration/1000,
-          action: "_complete",
-          target: this
-        };
-      }
-    }
-  },
-
-  /**
-    Displays the pane.  SheetPane will calculate the height of your pane, draw it offscreen, then
-    animate it down so that it is attached to the top of the viewport.
-
-    @returns {SC.SheetPane} receiver
-  */
-  append: function() {
-    var layout = this.get('layout');
-    if (!layout.height || !layout.top) {
-      layout = SC.View.convertLayoutToAnchoredLayout(layout, this.computeParentDimensions());
-    }
-
-    // Gently rest the pane atop the viewport
-    layout.top = -1*layout.height;
-
-    if (this.disableAnimation) this.disableAnimation();
-    this.adjust(layout);
-    this.updateLayout();
-    if (this.enableAnimation) this.enableAnimation();
-
-    return sc_super();
-  },
-
-  /**
-    Animates the sheet up, then removes it from the DOM once it is hidden from view.
-
-    @returns {SC.SheetPane} receiver
-  */
-  remove: function() {
-    // We want the functionality of `SC.PanelPane.remove()`, but we only want it once the animation is complete.
-    // Store the reference to the superclass function, and it call it after the transition is complete.
-    var that = this, args = arguments;
-    this.invokeLater(function() { args.callee.base.apply(that, args) ;}, this.transitionDuration);
-    this.slideUp();
-
-    return this;
-  },
-
-  /** @private
-    Once the pane has been rendered out to the DOM, begin the animation.
-  */
-  paneDidAttach: function() {
-    var ret = sc_super();
-    // this.invokeLast(this.slideDown, this);
-    this.slideDown();
-
-    return ret;
-  },
-
-  /** @private */
-  slideDown: function(){
-    // setup other general state
-    this._state   = SC.SheetPane.ANIMATING;
-    this._direction = SC.SheetPane.SLIDE_DOWN;
-    if (SC.SheetPane.ANIMATABLE_AVAILABLE) {
-      this.transitions.top.timing = SC.Animatable.TRANSITION_EASE_OUT;
-      this.adjust('top', 0);
-    } else {
-      this._start   = Date.now();
-      this._end     = this._start + this.get('transitionDuration');
-      this.tick();
-    }
-  },
-
-  /** @private */
-  slideUp: function(){
-    // setup other general state
-    this._state   = SC.SheetPane.ANIMATING;
-    this._direction = SC.SheetPane.SLIDE_UP;
-    if (SC.SheetPane.ANIMATABLE_AVAILABLE) {
-      var layout = this.get('layout');
-      this.transitions.top.timing = SC.Animatable.TRANSITION_EASE_IN;
-      this.adjust('top', -1 * layout.height);
-    } else {
-      this._start   = Date.now();
-      this._end     = this._start + this.get('transitionDuration');
-      this.tick();
-    }
-  },
-
-  /** @private */
-  _complete: function() {
-    var dir = this._direction;
-
-    if (dir === SC.SheetPane.SLIDE_DOWN) {
-      if (!SC.SheetPane.ANIMATABLE_AVAILABLE) this.adjust('top', 0);
-
-      // Make sure we recenter the panel after the animation
-      // is complete.
-      this.adjust({
-        centerX: 0,
-        left: null
-      });
-      if(SC.browser.isMozilla) this.parentViewDidChange();
-    } else {
-      var layout = this.get('layout');
-      if (!SC.SheetPane.ANIMATABLE_AVAILABLE) this.adjust('top', -1*layout.height);
-    }
-
-    this._state = SC.SheetPane.READY;
-    this.updateLayout();
-  },
-
-  /** @private
-    Needed because of the runLoop and that it is animated...
-    must lose focus because will break if selection is change
-    on text fields that don't move.
-  */
-  blurTo: function(pane) { this.setFirstResponder(''); },
-
-  /** @private
-    Called while the animation runs. Will move the content view
-    down until it is in position and then set the layout to the content layout
-  */
-  tick: function() {
-    this._timer = null ; // clear out
-
-    var now = Date.now();
-    var pct = (now-this._start)/(this._end-this._start),
-        target = this, dir = this._direction, layout = this.get('layout'),
-        newLayout, adjust;
-    if (pct<0) pct = 0;
-
-    // If we are done...
-    if (pct>=1) {
-      this._complete();
-      return this;
-    }
-
-    // ok, now let's compute the new layouts for the two views and set them
-    adjust = Math.floor(layout.height * pct);
-
-    // set the layout for the views, depending on the direction
-    if (dir == SC.SheetPane.SLIDE_DOWN) {
-      target.adjust('top', 0-(layout.height-adjust));
-    } else if (dir == SC.SheetPane.SLIDE_UP) {
-      target.adjust('top', 0-adjust);
-    }
-
-    this._timer = this.invokeLater(this.tick, 20);
-    target.updateLayout();
-    return this;
-  }
-
-});
-
-SC.SheetPane.mixin(
-/** @scope SC.SheetPane */ {
-
-  ANIMATABLE_AVAILABLE: NO,
-
-  // states for view animation
-  NO_VIEW: 'NO_VIEW',
-  ANIMATING: 'ANIMATING',
-  READY: 'READY',
-
-  SLIDE_DOWN: 'SLIDEDOWN',
-  SLIDE_UP: 'SLIDEUP'
-
-});
+  /** @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()
+
+  });
+

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/button.js

@@ -48,15 +48,14 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
   */
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
-    
-    var labelContent,
-        toolTip     = dataSource.get('toolTip'),
-        isSelected  = dataSource.get('isSelected') || NO,
-        isActive    = dataSource.get('isActive') || NO,
-        isDefault   = dataSource.get('isDefault') || NO,
-        isCancel    = dataSource.get('isCancel') || NO,
-        isToggle    = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR),
-        labelId     = SC.guidFor(dataSource) + '-label';
+
+    var toolTip     = dataSource.get('toolTip'),
+      isSelected  = dataSource.get('isSelected') || NO,
+      isActive    = dataSource.get('isActive') || NO,
+      isDefault   = dataSource.get('isDefault') || NO,
+      isCancel    = dataSource.get('isCancel') || NO,
+      isToggle    = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR),
+      labelId     = SC.guidFor(dataSource) + '-label';
 
     context.setClass({
       'icon': !!dataSource.get('icon'),
@@ -66,20 +65,20 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
       'sel': isSelected
     });
 
+    // Set the toolTip.
     if (toolTip) {
-      context.attr('title', toolTip);
-      context.attr('alt', toolTip);
+      context.setAttr('title', toolTip);
     }
-    
+
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
     // accessibility
     if(dataSource.get('isSegment')){
-      context.attr('aria-selected', isSelected.toString());
+      context.setAttr('aria-selected', isSelected.toString());
     }else if(isToggle) {
-      context.attr('aria-pressed', isActive.toString());
-    } 
-    
-    context.attr('aria-labelledby', labelId);
+      context.setAttr('aria-pressed', isActive.toString());
+    }
+
+    context.setAttr('aria-labelledby', labelId);
 
     // Create the inner label element that contains the text and, optionally,
     // an icon.
@@ -102,23 +101,29 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
     @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button
   */
   update: function(dataSource, jquery) {
-    var isToggle = (dataSource.get('buttonBehavior')===SC.TOGGLE_BEHAVIOR);
-    
+    var isToggle = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR),
+      isDefault = dataSource.get('isDefault'),
+      isCancel = dataSource.get('isCancel'),
+      toolTip = dataSource.get('toolTip');
+
     this.updateSizeClassName(dataSource, jquery);
 
     if (dataSource.get('isActive')) {
       jquery.addClass('active');
     }
 
-
-    var isDefault = dataSource.get('isDefault'),
-        isCancel = dataSource.get('isCancel');if(dataSource.get('isSegment')){
+    if (dataSource.get('isSegment')) {
       jquery.attr('aria-selected', dataSource.get('isSelected').toString());
-    }else if(isToggle){
+    } else if (isToggle) {
       jquery.attr('aria-pressed', dataSource.get('isActive').toString());
     }
-    
-    jquery.attr('title', dataSource.get('toolTip'));
+
+    // Update the toolTip.
+    if (toolTip) {
+      jquery.attr('title', toolTip);
+    } else {
+      jquery.removeAttr('title');
+    }
 
     jquery.setClass('icon', !!dataSource.get('icon'));
     jquery.setClass('def', !!isDefault);
@@ -126,7 +131,7 @@ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
 
     dataSource.get('theme').labelRenderDelegate.update(dataSource, jquery.find('label'));
   },
-  
+
   /**
     Returns the layer to be used for auto resizing.
   */

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/checkbox.js

@@ -9,61 +9,58 @@
 /**
   Renders and updates DOM representations of a checkbox (just the box,
   not the title).
-  
+
   Note: most of the actual rendering is done in CSS. The DOM element provided
   to the checkboxRenderDelegate must have the theme class names and the
   class name 'checkbox' (the name of the render delegate).
-  
+
   Parameters
   --------------------------
   Expects these properties on the data source:
-  
+
    - `isSelected`
    - `isActive`
-   - `isEnabled`
    - `title`
-  
+
   Optional parameters include all parameters for the `labelRenderDelegate`.
-  
+
 */
 SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
   className: 'checkbox',
-  
+
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
     var theme = dataSource.get('theme'),
-        ariaLabel, labelId;
+      labelId;
 
     // the label id is used so we can set the aria labelledby attribute
     labelId = SC.guidFor(dataSource) + "-label";
 
     var isSelected = dataSource.get('isSelected') || NO;
     var isActive = dataSource.get('isActive');
-    var isDisabled = !dataSource.get('isEnabled');
 
     var ariaIsSelected;
     if (isSelected === SC.MIXED_STATE) ariaIsSelected = 'mixed';
     else if (isSelected) ariaIsSelected = 'true';
     else ariaIsSelected = 'false';
 
-    context.attr('role', 'checkbox');
-    context.attr('aria-checked', ariaIsSelected);
-    context.attr('aria-labelledby', labelId);
+    context.setAttr('role', 'checkbox');
+    context.setAttr('aria-checked', ariaIsSelected);
+    context.setAttr('aria-labelledby', labelId);
 
     context.setClass({
       'sel': isSelected,
-      'active': isActive,
-      'disabled': isDisabled
+      'active': isActive
     });
-    
+
     context.push('<span class = "button"></span>');
-    
+
     context = context.begin('span').addClass('label').id(labelId);
     theme.labelRenderDelegate.render(dataSource, context);
     context = context.end();
   },
-  
+
   update: function(dataSource, jquery) {
     this.updateSizeClassName(dataSource, jquery);
 
@@ -71,7 +68,6 @@ SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
 
     var isSelected = dataSource.get('isSelected');
     var isActive = dataSource.get('isActive');
-    var isDisabled = !dataSource.get('isEnabled');
 
     var ariaIsSelected;
     if (isSelected === SC.MIXED_STATE) ariaIsSelected = 'mixed';
@@ -89,8 +85,7 @@ SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
     // add class names
     jquery.setClass({
       'sel': isSelected,
-      'active': isActive,
-      'disabled': isDisabled
+      'active': isActive
     });
   }
 });