sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -108,6 +108,8 @@ SC.AlertPane = SC.PanelPane.extend({
   
   classNames: 'sc-alert',
   
+  ariaRole: 'alertdialog',
+  
   /**
     The delegate to notify when the pane is dismissed.  If you set a 
     delegate, it should respond to the method:

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

@@ -264,6 +264,7 @@ SC.MenuPane = SC.PickerPane.extend(
     // interpreted in keyUp.
     this.set('defaultResponder', this);
     this.endPropertyChanges();
+    this._hideOverflow();
 
     this.append();
   },
@@ -526,6 +527,8 @@ SC.MenuPane = SC.PickerPane.extend(
     }
   },
 
+  renderDelegateName: 'menuRenderDelegate',
+
   /** @private
     The render method is responsible for adding the control size class
     name to the menu pane.
@@ -1000,9 +1003,24 @@ SC.MenuPane = SC.PickerPane.extend(
     return YES;
   },
 
-  performKeyEquivalent: function(keyEquivalent) {
+  /** @private
+    Called by the view hierarchy when the menu should respond to a shortcut
+    key being pressed.
+
+    Normally, the menu will only respond to key presses when it is visible.
+    However, when the menu is part of another control, such as an
+    SC.PopupButtonView, the menu should still respond if it is hidden but its
+    parent control is visible. In those cases, the parameter
+    fromVisibleControl will be set to YES.
+
+    @param keyEquivalent {String} the shortcut key sequence that was pressed
+    @param fromVisibleControl {Boolean} if the shortcut key press was proxied
+    to this menu by a visible parent control
+    @returns {Boolean}
+  */
+  performKeyEquivalent: function(keyEquivalent, evt, fromVisibleControl) {
     //If menu is not visible
-    if (!this.get('isVisibleInWindow')) return NO;
+    if (!fromVisibleControl && !this.get('isVisibleInWindow')) return NO;
     
     // Look for menu item that has this key equivalent
     var menuItem = this._keyEquivalents[keyEquivalent];

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

@@ -65,31 +65,6 @@ SC.PanelPane = SC.Pane.extend({
   */
   contentView: null,
   contentViewBindingDefault: SC.Binding.single(),
-
-  /**
-    Replaces any child views with the passed new content.  
-    
-    This method is automatically called whenever your contentView property 
-    changes.  You can override it if you want to provide some behavior other
-    than the default.
-    
-    @param {SC.View} newContent the new panel view or null.
-    @returns {void}
-  */
-  
-  render: function(context, firstTime) {
-    if (context.needsContent) {
-      this.renderChildViews(context, firstTime) ;
-      context.push("<div class='top-left-edge'></div>",
-       "<div class='top-edge'></div>",
-       "<div class='top-right-edge'></div>",
-       "<div class='right-edge'></div>",
-       "<div class='bottom-right-edge'></div>",
-       "<div class='bottom-edge'></div>",
-       "<div class='bottom-left-edge'></div>",
-       "<div class='left-edge'></div>");
-    }
-  },
   
   replaceContent: function(newContent) {
     this.removeAllChildren() ;
@@ -119,7 +94,14 @@ SC.PanelPane = SC.Pane.extend({
   // ..........................................................
   // INTERNAL SUPPORT
   //
-  
+
+  /**
+    The name of the theme's SC.PanelPane render delegate.
+
+    @property {String}
+  */
+  renderDelegateName: 'panelRenderDelegate',
+
   // get the modal pane. 
   _modalPane: function() {
     var pane = this.get('modalPane');
@@ -177,4 +159,4 @@ SC.PanelPane = SC.Pane.extend({
     this.becomeKeyPane();
     return ret ;
   }
-});
+});

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

@@ -190,6 +190,7 @@ SC.PickerPane = SC.PalettePane.extend({
     if (pointerOffset) this.set('pointerOffset',pointerOffset) ;
     this.endPropertyChanges();
     this.positionPane();
+    this._hideOverflow();
     return this.append();
   },
 
@@ -200,12 +201,14 @@ SC.PickerPane = SC.PalettePane.extend({
     fallback to center.
   */  
   positionPane: function(useAnchorCached) {
-    var useAnchorCached = useAnchorCached && this.get('anchorCached'),
-        anchor       = useAnchorCached ? this.get('anchorCached') : this.get('anchorElement'),
+    useAnchorCached = useAnchorCached && this.get('anchorCached');
+    
+    var anchor       = useAnchorCached ? this.get('anchorCached') : this.get('anchorElement'),
         preferType   = this.get('preferType'),
         preferMatrix = this.get('preferMatrix'),
         layout       = this.get('layout'),
         origin;
+        
     
     // usually an anchorElement will be passed.  The ideal position is just 
     // below the anchor + default or custom offset according to preferType.
@@ -338,7 +341,6 @@ SC.PickerPane = SC.PalettePane.extend({
       picker = this.fitPositionToScreenDefault(wret, picker, anchor) ;
     }
     this.displayDidChange();
-    this._hideOverflow();
     return picker ;
   },
 
@@ -604,26 +606,10 @@ SC.PickerPane = SC.PalettePane.extend({
     }
   },
   
-  displayProperties: ["pointerPosY"],
-
-  render: function(context, firstTime) {
-    var ret = sc_super();
-    if (context.needsContent) {
-      if (this.get('preferType') == SC.PICKER_POINTER || this.get('preferType') == SC.PICKER_MENU_POINTER) {
-        context.push('<div class="sc-pointer '+this.get('pointerPos')+'" style="margin-top: '+this.get('pointerPosY')+'px"></div>');
-        context.addClass(this.get('pointerPos'));
-      }
-    } else {
-      if (this.get('preferType') == SC.PICKER_POINTER || this.get('preferType') == SC.PICKER_MENU_POINTER) {
-        var el = this.$('.sc-pointer');
-        el.attr('class', "sc-pointer "+this.get('pointerPos'));
-        el.attr('style', "margin-top: "+this.get('pointerPosY')+"px");
-        context.addClass(this.get('pointerPos'));
-      }
-    }
-    return ret ;
-  },
-  
+  displayProperties: ['preferType','pointerPos','pointerPosY'],
+
+  renderDelegateName: 'pickerRenderDelegate',
+
   /** @private - click away picker. */
   modalPaneDidClick: function(evt) {
     var f = this.get("frame");
@@ -653,10 +639,14 @@ SC.PickerPane = SC.PalettePane.extend({
   
   
   remove: function(){
-    this._showOverflow();
+    if(this.get('isVisibleInWindow') && this.get('isPaneAttached')) this._showOverflow();
     return sc_super();
   },
   
+  /** @private
+    Internal method to hide the overflow on the body to make sure we don't 
+    show scrollbars when the picker has shadows, as it's really anoying.
+  */
   _hideOverflow: function(){
     var body = SC.$(document.body),
         main = SC.$('.sc-main'),
@@ -664,19 +654,34 @@ SC.PickerPane = SC.PalettePane.extend({
         minHeight = parseInt(main.css('minHeight'),0),
         windowSize = SC.RootResponder.responder.get('currentWindowSize');
     if(windowSize.width>=minWidth && windowSize.height>=minHeight){
-      body.css('overflow', 'hidden');           
+      SC.PICKERS_OPEN++;
+      //console.log(this.toString()+" "+SC.PICKERS_OPEN);
+      if(SC.PICKERS_OPEN > 0) body.css('overflow', 'hidden');           
     }
   },
 
+  /** @private
+    Internal method to show the overflow on the body to make sure we don't 
+    show scrollbars when the picker has shadows, as it's really anoying.
+  */
   _showOverflow: function(){
     var body = SC.$(document.body);
-    body.css('overflow', 'visible');     
+    if(SC.PICKERS_OPEN > 0) {
+      SC.PICKERS_OPEN--;
+     // console.log(this.toString()+" "+SC.PICKERS_OPEN);
+    }
+    if(SC.PICKERS_OPEN === 0) body.css('overflow', 'visible');
   }
 });
 
 /**
   Default metrics for the different control sizes.
 */
+
+// Counter to track how many pickers are open. This help us to now when to 
+// show/hide the body overflow.
+SC.PICKERS_OPEN = 0;
+
 SC.PickerPane.PICKER_POINTER_OFFSET = [9, -9, -18, 18];
 SC.PickerPane.PICKER_EXTRA_RIGHT_OFFSET = 20;
 
@@ -688,6 +693,7 @@ SC.PickerPane.SMALL_PICKER_MENU_EXTRA_RIGHT_OFFSET = 11;
 
 SC.PickerPane.REGULAR_PICKER_MENU_POINTER_OFFSET = [9, -9, -12, 12];
 SC.PickerPane.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET = 13;
+SC.PickerPane.REGULAR_PICKER_MENU_EXTRA_RIGHT_OFFSET = 12;
 
 SC.PickerPane.LARGE_PICKER_MENU_POINTER_OFFSET = [9, -9, -16, 16];
 SC.PickerPane.LARGE_PICKER_MENU_EXTRA_RIGHT_OFFSET = 17;

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

@@ -152,12 +152,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
   checkboxEnabled: YES,
 
   /**
-    Set this property to required display positon of separtor from bottom
+    Set this property to required display positon of separator from bottom
 
     @private
     @default null
   */
-  separatorPostion: null,
+  separatorPosition: null,
 
   /**
     Default value of the select button.
@@ -196,7 +196,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     @property
     @type{SC.Array}
   */
-  displayProperties: ['icon', 'value','controlSize','objects'],
+  displayProperties: ['icon', 'value','controlSize','objects', 'objects.[]'],
 
   /**
     Prefer matrix to position the select button menu such that the
@@ -223,7 +223,9 @@ SC.SelectButtonView = SC.ButtonView.extend(
   SELECT_BUTTON_SPRITE_WIDTH: 28,
 
   /**
-    Binds the select button's active state to the visibility of its menu.
+    Binds the button's selection state to the menu's visibility.
+
+    @private
   */
   isActiveBinding: '*menu.isVisibleInWindow',
 
@@ -340,7 +342,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
   render: function(context,firstTime) {
     sc_super();
     var layoutWidth, objects, len, nameKey, iconKey, valueKey, checkboxEnabled,
-      currentSelectedVal, shouldLocalize, separatorPostion, itemList, isChecked,
+      currentSelectedVal, shouldLocalize, separatorPosition, itemList, isChecked,
       idx, name, icon, value, item, itemEnabled, isEnabledKey ;
     layoutWidth = this.layout.width ;
     if(firstTime && layoutWidth) {
@@ -364,8 +366,8 @@ SC.SelectButtonView = SC.ButtonView.extend(
     // get the localization flag.
     shouldLocalize = this.get('localize') ;
 
-    //get the separatorPostion
-    separatorPostion = this.get('separatorPostion') ;
+    //get the separatorPosition
+    separatorPosition = this.get('separatorPosition') ;
 
     //itemList array to set the menu items
     itemList = [] ;
@@ -397,14 +399,20 @@ SC.SelectButtonView = SC.ButtonView.extend(
         object.get(valueKey) : object[valueKey]) : object ;
 
       if (!SC.none(currentSelectedVal) && !SC.none(value)){
-        if( currentSelectedVal === value ) {
+        if(this._equals(currentSelectedVal, value) ) {
           this.set('title', name) ;
           this.set('icon', icon) ;
         }
       }
 
       //Check if the item is currentSelectedItem or not
-      if(value === this.get('value')) {
+      if(this._equals(value, this.get('value'))) {
+
+        // increase index by 1 if item falls below the separator in menu list
+        if(separatorPosition > 0 && separatorPosition<len &&
+          idx >= len-separatorPosition) {
+          idx++ ;
+        }
 
         //set the itemIdx - To change the prefMatrix accordingly.
         this.set('itemIdx', idx) ;
@@ -444,7 +452,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     idx += 1 ;
 
     // display the separator if specified by the user
-    if (separatorPostion && idx === (len-separatorPostion)) {
+    if (separatorPosition && idx === (len-separatorPosition)) {
       var separator = SC.Object.create({
         separator: YES
       }) ;
@@ -469,6 +477,24 @@ SC.SelectButtonView = SC.ButtonView.extend(
     this.changeSelectButtonPreferMatrix(this.itemIdx) ;
 
   },
+  
+  /**
+    Compares the the two values. 
+    
+    This function can be overridden if the value of the Select Button field 
+    is an object.
+  */
+  _equals: function (value1, value2) {
+    var ret = YES;
+    if (value1 && SC.typeOf(value1) === SC.T_HASH && 
+        value2 && SC.typeOf(value2) === SC.T_HASH) {
+      for(var key in value1) {
+        if(value1[key] !== value2[key]) ret = NO;
+      }
+    }
+    else ret = (value1 === value2);
+    return ret;
+  }, 
 
   /**
     Button action handler
@@ -635,27 +661,34 @@ SC.SelectButtonView = SC.ButtonView.extend(
      place aligned to the item on the button when menu is opened.
   */
   changeSelectButtonPreferMatrix: function() {
-    var controlSizeTuning = 0, customMenuItemHeight = 0 ;
+    var controlSizeTuning = 0, customMenuItemHeight = 0,
+        customSeparatorHeight = 0, separatorHeightTuning = 0,
+        pos, len;
     switch (this.get('controlSize')) {
       case SC.TINY_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.TINY_OFFSET_Y;
         customMenuItemHeight = SC.MenuPane.TINY_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.TINY_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
       case SC.SMALL_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.SMALL_OFFSET_Y;
         customMenuItemHeight = SC.MenuPane.SMALL_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.SMALL_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
       case SC.REGULAR_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.REGULAR_OFFSET_Y;
         customMenuItemHeight = SC.MenuPane.REGULAR_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.REGULAR_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
       case SC.LARGE_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.LARGE_OFFSET_Y;
         customMenuItemHeight = SC.MenuPane.LARGE_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.LARGE_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
       case SC.HUGE_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.HUGE_OFFSET_Y;
         customMenuItemHeight = SC.MenuPane.HUGE_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.HUGE_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
     }
 
@@ -671,6 +704,18 @@ SC.SelectButtonView = SC.ButtonView.extend(
       if(itemIdx) {
         preferMatrixAttributeTop = itemIdx * customMenuItemHeight +
           controlSizeTuning ;
+
+        // if current selected item falls below the separator, adjust the
+        // top of menu pane
+        pos = this.get('separatorPosition');
+        len = this.get('objects').length;
+        if(pos > 0 && pos < len && itemIdx >= len-pos) {
+          separatorHeightTuning =
+          customMenuItemHeight - customSeparatorHeight;
+          // reduce the top to adjust the extra height calculated because
+          // of considering separator as a menu item
+          preferMatrixAttributeTop -= separatorHeightTuning;
+        }
       }
       tempPreferMatrix = [leftAlign, -preferMatrixAttributeTop, 2] ;
       this.set('preferMatrix', tempPreferMatrix) ;
@@ -764,6 +809,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     // Reset state.
     this._isMouseDown = NO;
+    this.set('isActive', NO);
     return YES;
   },
 

data/lib/frameworks/sproutcore/frameworks/desktop/protocols/drop_target.js

@@ -46,8 +46,8 @@ SC.DropTarget = {
     events.  SproutCore knows to register your view when this property
     is true on view creation.
   */  
-  isDropTarget: true,
-  
+  isDropTarget: YES,
+
   /**
     Called when the drag is started, regardless of where or not your drop
     target is current. You can use this to highlight your drop target

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

@@ -0,0 +1,78 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  Renders and updates the HTML representation of SC.ButtonView.
+*/
+SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({
+  name: 'button',
+  
+  /**
+    Called when we need to create the HTML that represents the button.
+
+    @param {SC.Object} dataSource the object containing the information on how to render the button
+    @param {SC.RenderContext} context the render context instance
+  */
+  render: function(dataSource, context) {
+    var theme             = dataSource.get('theme'),
+        minWidth          = dataSource.get('titleMinWidth'),
+        toolTip           = dataSource.get('displayToolTip'),
+        view              = dataSource.get('view');
+    
+    var labelContent;
+
+    context.setClass('icon', !!dataSource.get('icon') || 0);    
+    context.setClass('def', dataSource.get('isDefault') || 0);
+    context.setClass('cancel', dataSource.get('isCancel') || 0);
+    
+    if (toolTip) {
+      context.attr('title', toolTip);
+      context.attr('alt', toolTip);
+    }
+    
+    // Specify a minimum width for the inner part of the button.
+    minWidth = (minWidth ? "style='min-width: " + minWidth + "px'" : '');
+    context = context.push("<span class='sc-button-inner' " + minWidth + ">");
+
+    // Create the inner label element that contains the text and, optionally,
+    // an icon.
+    context = context.begin('label').addClass('sc-button-label');
+    
+    // NOTE: we don't add the label class names because button styles its own label.
+    theme.labelRenderDelegate.render(dataSource, context);
+    context = context.end();
+    
+    context.push("</span>");
+
+    if (dataSource.get('supportFocusRing')) {
+      context.push('<div class="focus-ring">',
+                    '<div class="focus-left"></div>',
+                    '<div class="focus-middle"></div>',
+                    '<div class="focus-right"></div></div>');
+    }
+  },
+
+  /**
+    Called when one or more display properties have changed and we need to
+    update the HTML representation with the new values.
+
+    @param {SC.Object} dataSource the object containing the information on how to render the button
+    @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button
+  */
+  update: function(dataSource, jquery) {
+    var theme = dataSource.get('theme');
+    
+    if (dataSource.get('isActive')) jquery.addClass('active');
+    if (dataSource.get('isDefault')) jquery.addClass('default');
+    if (dataSource.get('isCancel')) jquery.addClass('cancel');
+    if (dataSource.get('icon')) jquery.addClass('icon');
+
+
+    theme.labelRenderDelegate.update(dataSource, jquery.find('label'));
+  }
+  
+});