sproutcore 1.0.1049.pre.2 → 1.4.0.rc

data/lib/frameworks/sproutcore/frameworks/desktop/views/select.js

@@ -26,6 +26,7 @@ sc_require('views/button');
 
 SC.SelectView = SC.ButtonView.extend(
 /** @scope SC.SelectView.prototype */ {
+
   /**
     An array of items that will be form the menu you want to show.
 
@@ -84,11 +85,6 @@ SC.SelectView = SC.ButtonView.extend(
     Key to use to identify separators.
   */
   itemSeparatorKey: "separator",
-  
-  /**
-    Key used to indicate if the item is to be enabled.
-  */
-  itemIsEnabledKey: "isEnabled",
 
   /**
     If true, the empty name will be localized.
@@ -116,12 +112,6 @@ SC.SelectView = SC.ButtonView.extend(
   */
   classNames: ['sc-select-view'],
 
-  /**
-    Menu attached to the SelectView.
-    @default SC.MenuView
-  */
-  menu: null,
-
   /**
     List of actual menu items, handed off to the menu view.
 
@@ -131,6 +121,15 @@ SC.SelectView = SC.ButtonView.extend(
   */
   _itemList: [],
 
+  /**
+    Current selected menu item
+
+    @property
+    @private
+    @default null
+  */
+  _currentSelItem: null,
+
   /**
     Property to set the index of the selected menu item. This in turn
     is used to calculate the preferMatrix.
@@ -143,22 +142,13 @@ SC.SelectView = SC.ButtonView.extend(
   _itemIdx: null,
 
   /**
-     Current Value of the SelectView
+     Current Value of the selectButton
 
      @property
      @default null
   */
   value: null ,
 
-  /**
-    if this property is set to 'YES', a checbox is shown next to the
-    selected menu item.
-
-    @private
-    @default YES
-  */
-  checkboxEnabled: YES,
-
   /**
     if this property is set to 'YES', a checbox is shown next to the
     selected menu item.
@@ -197,7 +187,7 @@ SC.SelectView = SC.ButtonView.extend(
 
     The button theme will be popup
   */
-  controlStyle: 'popup',
+  theme: 'popup',
 
   /**
     Render method gets triggered when these properties change
@@ -235,7 +225,7 @@ SC.SelectView = SC.ButtonView.extend(
 
     @private
   */
-  isActiveBinding: '*menu.isVisibleInWindow',
+  isSelectedBinding: '*menu.isVisibleInWindow',
 
   /**
     If this property is set to 'YES', the menu pane will be positioned
@@ -244,7 +234,7 @@ SC.SelectView = SC.ButtonView.extend(
     @private
     @default NO
   */
-  isDefaultPosition: NO,
+  positionMenuBelow: NO,
 
   /**
     lastMenuWidth is the width of the last menu which was created from
@@ -288,12 +278,10 @@ SC.SelectView = SC.ButtonView.extend(
   menuItemPadding: 35,
   
   /**
-    This is a property to enable/disable focus rings in buttons. 
-    For select_button, we are making it a default.
-    
-    @default YES
+    Disable context menu.
   */
-  supportFocusRing: YES,
+  isContextMenuEnabled: NO,
+  
 
   /**
     Left Alignment based on the size of the button
@@ -301,19 +289,14 @@ SC.SelectView = SC.ButtonView.extend(
     @private
   */
   leftAlign: function() {
-    switch (this.get('controlSize')) {
-      case SC.TINY_CONTROL_SIZE:
-        return SC.SelectView.TINY_OFFSET_X;
-      case SC.SMALL_CONTROL_SIZE:
-        return SC.SelectView.SMALL_OFFSET_X;
-      case SC.REGULAR_CONTROL_SIZE:
-        return SC.SelectView.REGULAR_OFFSET_X;
-      case SC.LARGE_CONTROL_SIZE:
-        return SC.SelectView.LARGE_OFFSET_X;
-      case SC.HUGE_CONTROL_SIZE:
-        return SC.SelectView.HUGE_OFFSET_X;
-    }
-    return 0;
+    var val = 0, controlSize = this.get('controlSize') ;
+    
+    // what. the. heck?
+    // no, I don't want to shift the menu to the left. Yet.
+    if(controlSize === SC.SMALL_CONTROL_SIZE) val = -14 ;
+    if(controlSize === SC.REGULAR_CONTROL_SIZE) val = -16 ;
+    
+    return val;
   }.property('controlSize'),
 
   /**
@@ -346,7 +329,7 @@ SC.SelectView = SC.ButtonView.extend(
     sc_super();
     var layoutWidth, items, len, nameKey, iconKey, valueKey, separatorKey, showCheckbox,
       currentSelectedVal, shouldLocalize, isSeparator, itemList, isChecked,
-      idx, name, icon, value, item, itemEnabled, isEnabledKey;
+      idx, name, icon, value, item;
 
     items = this.get('items') ;
     items = this.sortObjects(items) ;
@@ -358,7 +341,6 @@ SC.SelectView = SC.ButtonView.extend(
     valueKey = this.get('itemValueKey') ;
     separatorKey = this.get('itemSeparatorKey');
     showCheckbox = this.get('showCheckbox') ;
-    isEnabledKey = this.get('isEnabledKey');
 
     //get the current selected value
     currentSelectedVal = this.get('value') ;
@@ -387,7 +369,7 @@ SC.SelectView = SC.ButtonView.extend(
       name = shouldLocalize? name.loc() : name ;
 
       //Get the icon value
-      icon = iconKey ? (object.get ?
+      icon = iconKey ? (object.get ? 
         object.get(iconKey) : object[iconKey]) : null ;
       if (SC.none(object[iconKey])) icon = null ;
 
@@ -413,10 +395,6 @@ SC.SelectView = SC.ButtonView.extend(
         isChecked = NO ;
       }
       
-      // Check if the item is enabled
-      itemEnabled = (object.get ? object.get(isEnabledKey) : object[isEnabledKey]);
-      if (NO !== itemEnabled) itemEnabled = YES;
-      
       // get the separator
       isSeparator = separatorKey ? (object.get ? object.get(separatorKey) : object[separatorKey]) : NO;
 
@@ -432,9 +410,8 @@ SC.SelectView = SC.ButtonView.extend(
         title: name,
         icon: icon,
         value: value,
-        isEnabled: itemEnabled,
+        isEnabled: YES,
         checkbox: isChecked,
-        target: this,
         action: this.displaySelectedItem
       }) ;
 
@@ -460,7 +437,7 @@ SC.SelectView = SC.ButtonView.extend(
     }
 
     //Set the preference matrix for the menu pane
-    this.changeSelectPreferMatrix(this.get("_itemIdx")) ;
+    this.changeSelectButtonPreferMatrix(this._itemIdx) ;
 
   },
 
@@ -474,34 +451,10 @@ SC.SelectView = SC.ButtonView.extend(
   {
     var buttonLabel, menuWidth, scrollWidth, lastMenuWidth, offsetWidth,
       items, elementOffsetWidth, largestMenuWidth, item, element, idx,
-      value, itemList, menuControlSize, menuHeightPadding, customView,
+      currSel, itemList, menuControlSize, menuHeightPadding, customView,
       customMenuView, menu, itemsLength;
-    
+      
     buttonLabel = this.$('.sc-button-label')[0] ;
-    
-    var menuWidthOffset = SC.SelectView.MENU_WIDTH_OFFSET ;
-    if(!this.get('isDefaultPosition')) {
-      switch (this.get('controlSize')) {
-        case SC.TINY_CONTROL_SIZE:
-          menuWidthOffset += SC.SelectView.TINY_POPUP_MENU_WIDTH_OFFSET;
-          break;
-        case SC.SMALL_CONTROL_SIZE:
-          menuWidthOffset += SC.SelectView.SMALL_POPUP_MENU_WIDTH_OFFSET;
-          break;
-        case SC.REGULAR_CONTROL_SIZE:
-          menuWidthOffset += SC.SelectView.REGULAR_POPUP_MENU_WIDTH_OFFSET;
-          break;
-        case SC.LARGE_CONTROL_SIZE:
-          menuWidthOffset += SC.SelectView.LARGE_POPUP_MENU_WIDTH_OFFSET;
-          break;
-        case SC.HUGE_CONTROL_SIZE:
-          menuWidthOffset += SC.SelectView.HUGE_POPUP_MENU_WIDTH_OFFSET;
-          break;
-      }
-    }
-    // Get the length of the text on the button in pixels
-    menuWidth = this.get('layer').offsetWidth + menuWidthOffset ;
-    
     // Get the length of the text on the button in pixels
     menuWidth = this.get('layer').offsetWidth ;
     scrollWidth = buttonLabel.scrollWidth ;
@@ -548,7 +501,7 @@ SC.SelectView = SC.ButtonView.extend(
     }
 
     this.set('lastMenuWidth',lastMenuWidth) ;
-    value = this.get('value') ;
+    currSel = this.get('_currentSelItem') ;
     itemList = this.get('_itemList') ;
     menuControlSize = this.get('controlSize') ;
     menuHeightPadding = this.get('menuPaneHeightPadding') ;
@@ -565,7 +518,7 @@ SC.SelectView = SC.ButtonView.extend(
       classNames: ['select-button'],
 
       /**
-        The menu items are set from the itemList property of SelectView
+        The menu items are set from the itemList property of SelectButton
 
         @property
       */
@@ -592,18 +545,15 @@ SC.SelectView = SC.ButtonView.extend(
       itemHeightKey: 'height',
       layout: { width: lastMenuWidth },
       controlSize: menuControlSize,
-      itemWidth: lastMenuWidth
+      itemWidth: lastMenuWidth,
+      contentView: SC.View.extend({
+      })
     }) ;
 
     // no menu to toggle... bail...
     if (!menu) return NO ;
     menu.popup(this, this.preferMatrix) ;
-    this.set('menu', menu);
-
-    customView = menu.menuItemViewForContentIndex(this.get('_itemIdx'));
-    customView.becomeFirstResponder();
-
-    this.set('isActive', YES);
+    menu.set('currentSelectedMenuItem', currSel) ;
     return YES ;
   },
 
@@ -611,12 +561,44 @@ SC.SelectView = SC.ButtonView.extend(
      Action method for the select button menu items
 
   */
-  displaySelectedItem: function(menuView) {
-    var currentItem = menuView.get("selectedItem");
+  displaySelectedItem: function() {
+    var menuView, currSel, itemViews, title, val, itemIdx = 0, button, object,
+      len, found = null, objTmp;
     
-    this.set("value", currentItem.get("value"));
-    this.set("title", currentItem.get("title"));
-    this.set("_itemIdx", currentItem.get("contentIndex"));
+    //Get MenuPane, currentSelectedMenuItem & menuItemView
+    // Get the main parent view to show the menus
+      
+    menuView = this.parentMenu() ;
+    currSel = menuView.get('currentSelectedMenuItem') ;
+    itemViews = menuView.menuItemViews ;
+    
+    //  Fetch the index of the current selected item
+    if (currSel && itemViews) {
+      itemIdx = itemViews.indexOf(currSel) ;
+    }
+
+    // Get the select button View
+    button = menuView.get('anchor') ;
+
+    // set the value and title
+    object = menuView.get('items') ;
+    len = object.length ;
+
+    while (!found && (--len >= 0)) {
+      objTmp = object[len];
+      title = !SC.none(objTmp.title) ? objTmp.title: object.toString() ;
+      val =  !SC.none(objTmp.value) ? objTmp.value: title ;
+
+      if (title === this.get('value') && (itemIdx === len)) {
+        found = object ;
+        button.set('value', val) ;
+        button.set('title', title) ;
+      }
+    }
+
+    // set the icon, currentSelectedItem and itemIdx
+    button.set('icon', this.get('icon')).set('_currentSelItem', currSel).
+      set('_itemIdx', itemIdx) ;
   },
 
   /**
@@ -624,43 +606,18 @@ SC.SelectView = SC.ButtonView.extend(
      position menu such that the selected item in the menu will be
      place aligned to the item on the button when menu is opened.
   */
-  changeSelectPreferMatrix: function() {
-    var controlSizeTuning = 0, customMenuItemHeight = 0 ;
-    switch (this.get('controlSize')) {
-      case SC.TINY_CONTROL_SIZE:
-        controlSizeTuning = SC.SelectView.TINY_OFFSET_Y;
-        customMenuItemHeight = SC.MenuPane.TINY_MENU_ITEM_HEIGHT;
-        break;
-      case SC.SMALL_CONTROL_SIZE:
-        controlSizeTuning = SC.SelectView.SMALL_OFFSET_Y;
-        customMenuItemHeight = SC.MenuPane.SMALL_MENU_ITEM_HEIGHT;
-        break;
-      case SC.REGULAR_CONTROL_SIZE:
-        controlSizeTuning = SC.SelectView.REGULAR_OFFSET_Y;
-        customMenuItemHeight = SC.MenuPane.REGULAR_MENU_ITEM_HEIGHT;
-        break;
-      case SC.LARGE_CONTROL_SIZE:
-        controlSizeTuning = SC.SelectView.LARGE_OFFSET_Y;
-        customMenuItemHeight = SC.MenuPane.LARGE_MENU_ITEM_HEIGHT;
-        break;
-      case SC.HUGE_CONTROL_SIZE:
-        controlSizeTuning = SC.SelectView.HUGE_OFFSET_Y;
-        customMenuItemHeight = SC.MenuPane.HUGE_MENU_ITEM_HEIGHT;
-        break;
-    }
-
-    var preferMatrixAttributeTop = controlSizeTuning ,
+  changeSelectButtonPreferMatrix: function() {
+    var preferMatrixAttributeTop = 0 ,
       itemIdx = this.get('_itemIdx') ,
       leftAlign = this.get('leftAlign'), defPreferMatrix, tempPreferMatrix ;
 
-    if(this.get('isDefaultPosition')) {
-      defPreferMatrix = [1, 0, 3] ;
+    if(this.get('positionMenuBelow')) {
+      defPreferMatrix = [leftAlign, 4, 3] ;
       this.set('preferMatrix', defPreferMatrix) ;
     }
     else {
       if(itemIdx) {
-        preferMatrixAttributeTop = itemIdx * customMenuItemHeight +
-          controlSizeTuning ;
+        preferMatrixAttributeTop = itemIdx * this.CUSTOM_MENU_ITEM_HEIGHT ;
       }
       tempPreferMatrix = [leftAlign, -preferMatrixAttributeTop, 2] ;
       this.set('preferMatrix', tempPreferMatrix) ;
@@ -681,57 +638,6 @@ SC.SelectView = SC.ButtonView.extend(
     return YES ;
   },
 
-  /** @private
-    Because we responded YES to the mouseDown event, we have responsibility
-    for handling the corresponding mouseUp event.
-
-    However, the user may click on this button, then drag the mouse down to a
-    menu item, and release the mouse over the menu item. We therefore need to
-    delegate any mouseUp events to the menu's menu item, if one is selected.
-
-    We also need to differentiate between a single click and a click and hold.
-    If the user clicks and holds, we want to close the menu when they release.
-    Otherwise, we should wait until they click on the menu's modal pane before
-    removing our active state.
-
-    @param {SC.Event} evt
-    @returns {Boolean}
-  */
-  mouseUp: function(evt) {
-    var menu = this.get('menu'), targetMenuItem, success;
-
-    if (menu) {
-      targetMenuItem = menu.getPath('rootMenu.targetMenuItem');
-
-      if (targetMenuItem && menu.get('mouseHasEntered')) {
-        // Have the menu item perform its action.
-        // If the menu returns NO, it had no action to
-        // perform, so we should close the menu immediately.
-        if (!targetMenuItem.performAction()) menu.remove();
-      } else {
-        // If the user waits more than 200ms between mouseDown and mouseUp,
-        // we can assume that they are clicking and dragging to the menu item,
-        // and we should close the menu if they mouseup anywhere not inside
-        // the menu.
-        if (evt.timeStamp - this._mouseDownTimestamp > 400) {
-          menu.remove();
-        }
-      }
-    }
-
-    // Reset state.
-    this._isMouseDown = NO;
-    this.set("isActive", NO);
-    return YES;
-  },
-
-  /**
-    Override mouseExited to not remove the active state on mouseexit.
-  */
-  mouseExited: function() {
-    return YES;
-  },
-  
   /**
     @private
 
@@ -761,44 +667,7 @@ SC.SelectView = SC.ButtonView.extend(
       }
     }
     return arguments.callee.base.apply(this,arguments);
-  },
-  
-  /** Function overridden - tied to the isEnabled state */
-  acceptsFirstResponder: function() {
-    return this.get('isEnabled');
-  }.property('isEnabled'),
-  
-  /** @private
-    Override the button isSelectedDidChange function in order to not perform any action
-    on selecting the select_button
-  */
-  _button_isSelectedDidChange: function() {
-    
-  }.observes('isSelected')
+  }
 
 }) ;
 
-/**
-  Default metrics for the different control sizes.
-*/
-SC.SelectView.TINY_OFFSET_X = 0;
-SC.SelectView.TINY_OFFSET_Y = 0;
-SC.SelectView.TINY_POPUP_MENU_WIDTH_OFFSET = 0;
-
-SC.SelectView.SMALL_OFFSET_X = -18;
-SC.SelectView.SMALL_OFFSET_Y = 3;
-SC.SelectView.SMALL_POPUP_MENU_WIDTH_OFFSET = 7;
-
-SC.SelectView.REGULAR_OFFSET_X = -17;
-SC.SelectView.REGULAR_OFFSET_Y = 3;
-SC.SelectView.REGULAR_POPUP_MENU_WIDTH_OFFSET = 4;
-
-SC.SelectView.LARGE_OFFSET_X = -17;
-SC.SelectView.LARGE_OFFSET_Y = 6;
-SC.SelectView.LARGE_POPUP_MENU_WIDTH_OFFSET = 3;
-
-SC.SelectView.HUGE_OFFSET_X = 0;
-SC.SelectView.HUGE_OFFSET_Y = 0;
-SC.SelectView.HUGE_POPUP_MENU_WIDTH_OFFSET = 0;
-
-SC.SelectView.MENU_WIDTH_OFFSET = -2;