sproutcore 1.0.1046 → 1.0.1049.pre.1

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

@@ -2,7 +2,7 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 /**
@@ -23,6 +23,8 @@ sc_require('views/button');
 SC.SelectButtonView = SC.ButtonView.extend(
 /** @scope SC.SelectButtonView.prototype */ {
 
+  escapeHTML: YES,
+
   /**
     An array of items that will be form the menu you want to show.
 
@@ -77,6 +79,11 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   iconKey: null,
 
+  /**
+    Key used to indicate if the item is to be enabled
+   */
+  isEnabledKey: "isEnabled",
+
   /**
     If true, the empty name will be localized.
 
@@ -104,20 +111,18 @@ SC.SelectButtonView = SC.ButtonView.extend(
   classNames: ['select-button'],
 
   /**
-    Menu item list
-
-    @property
-    @type:{Array}
+    Menu attached to the selectButton
+    @default SC.MenuView
   */
-  itemList: [],
+  menu : null,
 
   /**
-    Current selected menu item
+    Menu item list
 
     @property
-    @default null
+    @type:{Array}
   */
-  currentSelItem: null,
+  itemList: [],
 
   /**
     Property to set the index of the selected menu item. This in turn
@@ -183,7 +188,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     The button theme will be popup
   */
-  theme: 'popup',
+  controlStyle: 'popup',
 
   /**
     Render method gets triggered when these properties change
@@ -217,22 +222,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   SELECT_BUTTON_SPRITE_WIDTH: 28,
 
-  /**
-    Property to set the menu item height. This in turn is used for
-    the calculation of prefMatrix.
-
-    @property
-    @type {Number}
-    @default 20
-  */
-  CUSTOM_MENU_ITEM_HEIGHT: 20,
-
   /**
     Binds the button's selection state to the menu's visibility.
 
     @private
   */
-  isSelectedBinding: '*menu.isVisibleInWindow',
+  isActiveBinding: '*menu.isVisibleInWindow',
 
   /**
     If this property is set to 'YES', the menu pane will be positioned
@@ -255,12 +250,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
     customView used to draw the menu
   */
   customView: null,
-  
+
   /**
     css classes applied to customView
   */
   customViewClassName: null,
-  
+
   /**
     customView menu offset width
   */
@@ -283,16 +278,33 @@ SC.SelectButtonView = SC.ButtonView.extend(
   */
   menuPaneHeightPadding: 0,
 
+  /**
+    This is a property to enable/disable focus rings in buttons.
+    For select_button we are making it a default.
+
+    @default YES
+  */
+  supportFocusRing: YES,
+
   /**
     Left Alignment based on the size of the button
 
     @private
   */
   leftAlign: function() {
-    var val = 0, controlSize = this.get('controlSize') ;
-    if(controlSize === SC.SMALL_CONTROL_SIZE) val = -14 ;
-    if(controlSize === SC.REGULAR_CONTROL_SIZE) val = -16 ;
-    return val;
+    switch (this.get('controlSize')) {
+      case SC.TINY_CONTROL_SIZE:
+        return SC.SelectButtonView.TINY_OFFSET_X;
+      case SC.SMALL_CONTROL_SIZE:
+        return SC.SelectButtonView.SMALL_OFFSET_X;
+      case SC.REGULAR_CONTROL_SIZE:
+        return SC.SelectButtonView.REGULAR_OFFSET_X;
+      case SC.LARGE_CONTROL_SIZE:
+        return SC.SelectButtonView.LARGE_OFFSET_X;
+      case SC.HUGE_CONTROL_SIZE:
+        return SC.SelectButtonView.HUGE_OFFSET_X;
+    }
+    return 0;
   }.property('controlSize'),
 
   /**
@@ -325,7 +337,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     sc_super();
     var layoutWidth, objects, len, nameKey, iconKey, valueKey, checkboxEnabled,
       currentSelectedVal, shouldLocalize, separatorPostion, itemList, isChecked,
-      idx, name, icon, value, item;
+      idx, name, icon, value, item, itemEnabled, isEnabledKey ;
     layoutWidth = this.layout.width ;
     if(firstTime && layoutWidth) {
       this.adjust({ width: layoutWidth - this.SELECT_BUTTON_SPRITE_WIDTH }) ;
@@ -339,6 +351,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     nameKey = this.get('nameKey') ;
     iconKey = this.get('iconKey') ;
     valueKey = this.get('valueKey') ;
+    isEnabledKey = this.get('isEnabledKey') ;
     checkboxEnabled = this.get('checkboxEnabled') ;
 
     //get the current selected value
@@ -371,7 +384,7 @@ SC.SelectButtonView = 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 ;
 
@@ -397,6 +410,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
         isChecked = NO ;
       }
 
+      //Check if item is enabled
+      itemEnabled = (isEnabledKey) ? (object.get ?
+      object.get(isEnabledKey) : object[isEnabledKey]) : object ;
+      
+      if(NO !== itemEnabled) itemEnabled = YES ;
+
       //Set the first item from the list as default selected item
       if (idx === 0) {
         this._defaultVal = value ;
@@ -408,14 +427,14 @@ SC.SelectButtonView = SC.ButtonView.extend(
         title: name,
         icon: icon,
         value: value,
-        isEnabled: YES,
+        isEnabled: itemEnabled,
         checkbox: isChecked,
-        action: this.displaySelectedItem
+        target: this,
+        action: 'displaySelectedItem'
       }) ;
 
       //Set the items in the itemList array
       itemList.push(item);
-
     }
 
     idx += 1 ;
@@ -457,12 +476,33 @@ SC.SelectButtonView = SC.ButtonView.extend(
   {
     var buttonLabel, menuWidth, scrollWidth, lastMenuWidth, offsetWidth,
       items, elementOffsetWidth, largestMenuWidth, item, element, idx,
-      currSel, itemList, menuControlSize, menuHeightPadding, customView,
-      customMenuView, menu, itemsLength;
-      
+      value, itemList, menuControlSize, menuHeightPadding, customView,
+      customMenuView, menu, itemsLength, dummyMenuItemView, menuItemViewEscapeHTML;
+
     buttonLabel = this.$('.sc-button-label')[0] ;
+
+    var menuWidthOffset = SC.SelectButtonView.MENU_WIDTH_OFFSET ;
+    if(!this.get('isDefaultPosition')) {
+      switch (this.get('controlSize')) {
+        case SC.TINY_CONTROL_SIZE:
+          menuWidthOffset += SC.SelectButtonView.TINY_POPUP_MENU_WIDTH_OFFSET;
+          break;
+        case SC.SMALL_CONTROL_SIZE:
+          menuWidthOffset += SC.SelectButtonView.SMALL_POPUP_MENU_WIDTH_OFFSET;
+          break;
+        case SC.REGULAR_CONTROL_SIZE:
+          menuWidthOffset += SC.SelectButtonView.REGULAR_POPUP_MENU_WIDTH_OFFSET;
+          break;
+        case SC.LARGE_CONTROL_SIZE:
+          menuWidthOffset += SC.SelectButtonView.LARGE_POPUP_MENU_WIDTH_OFFSET;
+          break;
+        case SC.HUGE_CONTROL_SIZE:
+          menuWidthOffset += SC.SelectButtonView.HUGE_POPUP_MENU_WIDTH_OFFSET;
+          break;
+      }
+    }
     // Get the length of the text on the button in pixels
-    menuWidth = this.get('layer').offsetWidth ;
+    menuWidth = this.get('layer').offsetWidth + menuWidthOffset ;
     scrollWidth = buttonLabel.scrollWidth ;
     lastMenuWidth = this.get('lastMenuWidth') ;
     if(scrollWidth) {
@@ -483,13 +523,15 @@ SC.SelectButtonView = SC.ButtonView.extend(
     var className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
     className = customViewClassName ? (className + ' ' + customViewClassName) : className ;
 
+    dummyMenuItemView = (this.get('customView') || SC.MenuItemView).create(); 
+    menuItemViewEscapeHTML = dummyMenuItemView.get('escapeHTML') ;
     for (idx = 0, itemsLength = items.length; idx < itemsLength; ++idx) {
       //getting the width of largest menu item
       item = items.objectAt(idx) ;
       element = document.createElement('div') ;
       element.style.cssText = 'top:-10000px; left: -10000px;  position: absolute;' ;
       element.className = className ;
-      element.innerHTML = item.title ;
+      element.innerHTML = menuItemViewEscapeHTML ? SC.RenderContext.escapeHTML(item.title) : item.title ;
       document.body.appendChild(element) ;
       elementOffsetWidth = element.offsetWidth + customViewMenuOffsetWidth;
 
@@ -498,23 +540,21 @@ SC.SelectButtonView = SC.ButtonView.extend(
       }
       document.body.removeChild(element) ;
     }
-
-    lastMenuWidth = (largestMenuWidth > lastMenuWidth) ?
+    largestMenuWidth = (largestMenuWidth > lastMenuWidth) ?
                       largestMenuWidth: lastMenuWidth ;
 
     // Get the window size width and compare with the lastMenuWidth.
     // If it is greater than windows width then reduce the maxwidth by 25px
     // so that the ellipsis property is enabled by default
     var maxWidth = SC.RootResponder.responder.get('currentWindowSize').width;
-    if(lastMenuWidth > maxWidth) {
-      lastMenuWidth = (maxWidth - 25) ;
+    if(largestMenuWidth > maxWidth) {
+      largestMenuWidth = (maxWidth - 25) ;
     }
 
     this.set('lastMenuWidth',lastMenuWidth) ;
-    currSel = this.get('currentSelItem') ;
+    value = this.get('value') ;
     itemList = this.get('itemList') ;
     menuControlSize = this.get('controlSize') ;
-    menuHeightPadding = this.get('menuPaneHeightPadding') ;
 
     // get the user defined custom view
     customView = this.get('customView') ;
@@ -522,48 +562,30 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     menu  = SC.MenuPane.create({
 
-      /**
-        Class name - select-button-item
-      */
       classNames: ['select-button'],
 
-      /**
-        The menu items are set from the itemList property of SelectButton
-
-        @property
-      */
       items: itemList,
 
-      /**
-        Example view which will be used to create the Menu Items
-
-        @default SC.MenuItemView
-        @type SC.View
-      */
       exampleView: customMenuView,
 
-      /**
-        This property enables all the items and makes them selectable.
-
-        @property
-      */
       isEnabled: YES,
-
-      menuHeightPadding: menuHeightPadding,
-
       preferType: SC.PICKER_MENU,
       itemHeightKey: 'height',
-      layout: { width: lastMenuWidth },
+      layout: { width: largestMenuWidth },
       controlSize: menuControlSize,
-      itemWidth: lastMenuWidth,
-      contentView: SC.View.extend({
-      })
+      itemWidth: lastMenuWidth
     }) ;
 
     // no menu to toggle... bail...
     if (!menu) return NO ;
     menu.popup(this, this.preferMatrix) ;
-    menu.set('currentSelectedMenuItem', currSel) ;
+    this.set('menu', menu);
+
+    customView = menu.menuItemViewForContentIndex(this.get('itemIdx'));
+    menu.set('currentMenuItem', customView) ;
+    customView.becomeFirstResponder();
+
+    this.set('isActive', YES);
     return YES ;
   },
 
@@ -571,44 +593,15 @@ SC.SelectButtonView = SC.ButtonView.extend(
      Action method for the select button menu items
 
   */
-  displaySelectedItem: function() {
-    var menuView, currSel, itemViews, title, val, itemIdx = 0, button, object,
-      len, found = null, objTmp;
-    
-    //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) ;
-    }
+  displaySelectedItem: function(menuView) {
+    var currentItem = this.getPath('menu.selectedItem');
+    if (!currentItem) return NO;
 
-    // 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) ;
-      }
-    }
+    this.set('value', currentItem.get('value')) ;
+    this.set('title', currentItem.get('title')) ;
+    this.set('itemIdx', currentItem.get('contentIndex')) ;
 
-    // set the icon, currentSelectedItem and itemIdx
-    button.set('icon', this.get('icon')).set('currentSelItem', currSel).
-      set('itemIdx', itemIdx) ;
+    return YES;
   },
 
   /**
@@ -617,17 +610,42 @@ SC.SelectButtonView = SC.ButtonView.extend(
      place aligned to the item on the button when menu is opened.
   */
   changeSelectButtonPreferMatrix: function() {
-    var preferMatrixAttributeTop = 0 ,
+    var controlSizeTuning = 0, customMenuItemHeight = 0 ;
+    switch (this.get('controlSize')) {
+      case SC.TINY_CONTROL_SIZE:
+        controlSizeTuning = SC.SelectButtonView.TINY_OFFSET_Y;
+        customMenuItemHeight = SC.MenuPane.TINY_MENU_ITEM_HEIGHT;
+        break;
+      case SC.SMALL_CONTROL_SIZE:
+        controlSizeTuning = SC.SelectButtonView.SMALL_OFFSET_Y;
+        customMenuItemHeight = SC.MenuPane.SMALL_MENU_ITEM_HEIGHT;
+        break;
+      case SC.REGULAR_CONTROL_SIZE:
+        controlSizeTuning = SC.SelectButtonView.REGULAR_OFFSET_Y;
+        customMenuItemHeight = SC.MenuPane.REGULAR_MENU_ITEM_HEIGHT;
+        break;
+      case SC.LARGE_CONTROL_SIZE:
+        controlSizeTuning = SC.SelectButtonView.LARGE_OFFSET_Y;
+        customMenuItemHeight = SC.MenuPane.LARGE_MENU_ITEM_HEIGHT;
+        break;
+      case SC.HUGE_CONTROL_SIZE:
+        controlSizeTuning = SC.SelectButtonView.HUGE_OFFSET_Y;
+        customMenuItemHeight = SC.MenuPane.HUGE_MENU_ITEM_HEIGHT;
+        break;
+    }
+
+    var preferMatrixAttributeTop = controlSizeTuning ,
       itemIdx = this.get('itemIdx') ,
       leftAlign = this.get('leftAlign'), defPreferMatrix, tempPreferMatrix ;
 
     if(this.get('isDefaultPosition')) {
-      defPreferMatrix = [leftAlign, 4, 3] ;
+      defPreferMatrix = [1, 0, 3] ;
       this.set('preferMatrix', defPreferMatrix) ;
     }
     else {
       if(itemIdx) {
-        preferMatrixAttributeTop = itemIdx * this.CUSTOM_MENU_ITEM_HEIGHT ;
+        preferMatrixAttributeTop = itemIdx * customMenuItemHeight +
+          controlSizeTuning ;
       }
       tempPreferMatrix = [leftAlign, -preferMatrixAttributeTop, 2] ;
       this.set('preferMatrix', tempPreferMatrix) ;
@@ -645,9 +663,93 @@ SC.SelectButtonView = SC.ButtonView.extend(
     this._isMouseDown = YES;
     this.becomeFirstResponder() ;
     this._action() ;
+
+    // Store the current timestamp. We register the timestamp at the end of
+    // the runloop so that the menu has been rendered, in case that operation
+    // takes more than a few hundred milliseconds.
+
+    // One mouseUp, we'll use this value to determine how long the mouse was
+    // pressed.
+    this.invokeLast(this._recordMouseDownTimestamp);
     return YES ;
   },
 
+  /** @private
+    Records the current timestamp. This is invoked at the end of the runloop
+    by mouseDown. We use this value to determine the delay between mouseDown
+    and mouseUp.
+  */
+  _recordMouseDownTimestamp: function() {
+    this._menuRenderedTimestamp = new Date().getTime();
+  },
+
+  /** @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 timestamp = new Date().getTime(),
+        previousTimestamp = this._menuRenderedTimestamp,
+        menu = this.get('menu'),
+        touch = SC.platform.touch,
+        targetMenuItem;
+
+    if (menu) {
+      targetMenuItem = menu.getPath('rootMenu.targetMenuItem');
+
+      if (targetMenuItem && targetMenuItem.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 (!touch && (timestamp - previousTimestamp > SC.ButtonView.CLICK_AND_HOLD_DELAY)) {
+        // If the user waits more than a certain length of time 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.
+
+        // As a special case, we should trigger an action on the currently
+        // selected menu item if the menu item is under the mouse and the user
+        // never moved their mouse before mouseup.
+        if (!menu.get('mouseHasEntered') && !this.get('isDefaultPosition')) {
+          targetMenuItem = menu.get('currentMenuItem');
+          if (targetMenuItem && !targetMenuItem.performAction()) {
+            menu.remove();
+          }
+        } else {
+          // Otherwise, just remove the menu because no selection
+          // has been made.
+          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
 
@@ -677,7 +779,44 @@ SC.SelectButtonView = 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.SelectButtonView.TINY_OFFSET_X = 0;
+SC.SelectButtonView.TINY_OFFSET_Y = 0;
+SC.SelectButtonView.TINY_POPUP_MENU_WIDTH_OFFSET = 0;
+
+SC.SelectButtonView.SMALL_OFFSET_X = -18;
+SC.SelectButtonView.SMALL_OFFSET_Y = 3;
+SC.SelectButtonView.SMALL_POPUP_MENU_WIDTH_OFFSET = 7;
+
+SC.SelectButtonView.REGULAR_OFFSET_X = -17;
+SC.SelectButtonView.REGULAR_OFFSET_Y = 3;
+SC.SelectButtonView.REGULAR_POPUP_MENU_WIDTH_OFFSET = 4;
+
+SC.SelectButtonView.LARGE_OFFSET_X = -17;
+SC.SelectButtonView.LARGE_OFFSET_Y = 6;
+SC.SelectButtonView.LARGE_POPUP_MENU_WIDTH_OFFSET = 3;
+
+SC.SelectButtonView.HUGE_OFFSET_X = 0;
+SC.SelectButtonView.HUGE_OFFSET_Y = 0;
+SC.SelectButtonView.HUGE_POPUP_MENU_WIDTH_OFFSET = 0;
+
+SC.SelectButtonView.MENU_WIDTH_OFFSET = -2;