sproutcore 1.7.1.beta → 1.8.0

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

@@ -15,7 +15,7 @@ sc_require('views/button');
   Clicking the SelectView button displays a menu pane with a
   list of items. The selected item will be displayed on the button.
   User has the option of enabling checkbox for the selected menu item.
-  
+
   @extends SC.ButtonView
   @version 1.0
   @author Alex Iskander, Mohammed Ashik
@@ -32,6 +32,15 @@ SC.SelectView = SC.ButtonView.extend(
     return this.get('isEnabled');
   }.property('isEnabled'),
 
+  /**
+    If true, titles will be escaped to avoid scripting attacks.
+
+    @type Boolean
+    @default YES
+  */
+  escapeHTML: YES,
+  escapeHTMLBindingDefault: SC.Binding.oneWay().bool(),
+
   /**
     An array of items that will be form the menu you want to show.
 
@@ -80,7 +89,7 @@ SC.SelectView = SC.ButtonView.extend(
      @default null
   */
   itemIconKey: null,
-  
+
   /**
     Key to use to identify separators.
 
@@ -88,7 +97,7 @@ SC.SelectView = SC.ButtonView.extend(
     @default "separator"
   */
   itemSeparatorKey: "separator",
-  
+
   /**
     Key used to indicate if the item is to be enabled.
 
@@ -121,7 +130,7 @@ SC.SelectView = SC.ButtonView.extend(
 
   /**
     Menu attached to the SelectView.
-    
+
     @type SC.View
     @default SC.MenuView
   */
@@ -156,7 +165,7 @@ SC.SelectView = SC.ButtonView.extend(
   value: null,
 
   /**
-    if this property is set to 'YES', a checbox is shown next to the
+    if this property is set to 'YES', a checkbox is shown next to the
     selected menu item.
 
     @type Boolean
@@ -165,7 +174,7 @@ SC.SelectView = SC.ButtonView.extend(
   checkboxEnabled: YES,
 
   /**
-    if this property is set to 'YES', a checbox is shown next to the
+    if this property is set to 'YES', a checkbox is shown next to the
     selected menu item.
 
     @type Boolean
@@ -173,6 +182,15 @@ SC.SelectView = SC.ButtonView.extend(
   */
   showCheckbox: YES,
 
+  /**
+    Set this to non-null to place an empty option at the top of the menu.
+
+    @property
+    @type String
+    @default null
+  */
+  emptyName: null,
+
   /**
     Default value of the select button.
      This will be the first item from the menu item list.
@@ -199,7 +217,7 @@ SC.SelectView = SC.ButtonView.extend(
 
   /**
     The button theme will be popup
-    
+
     @type String
     @default 'popup'
     @readOnly
@@ -211,13 +229,13 @@ SC.SelectView = SC.ButtonView.extend(
     @default ['icon', 'value','controlSize','items']
     @see SC.View#displayProperties
   */
-  displayProperties: ['icon', 'value','controlSize','items'],
+  displayProperties: ['icon', 'value','controlSize','items', 'escapeHTML', 'emptyName'],
 
   /**
     Prefer matrix to position the select button menu such that the
     selected item for the menu item will appear aligned to the
     the button. The value at the second index(0) changes based on the
-    postion(index) of the menu item in the menu pane.
+    position(index) of the menu item in the menu pane.
 
     @type Array
     @default null
@@ -259,15 +277,15 @@ SC.SelectView = SC.ButtonView.extend(
 
   /**
     Example view used for menu items.
-    
+
     @type SC.View
     @default null
   */
   exampleView: null,
-  
+
   /**
     customView menu offset width
-    
+
     @type Number
     @default 0
   */
@@ -289,26 +307,26 @@ SC.SelectView = SC.ButtonView.extend(
     @default 0
   */
   menuPaneHeightPadding: 0,
-  
+
   /**
     The amount of space to add to the calculated width of the menu item strings to
     determine the width of the menu pane.
-    
+
     @type Number
     @default 35
   */
   menuItemPadding: 35,
-  
+
   /**
     @type Boolean
     @default NO
   */
   isContextMenuEnabled: NO,
-  
+
   /**
-    This is a property to enable/disable focus rings in buttons. 
+    This is a property to enable/disable focus rings in buttons.
     For select_button, we are making it a default.
-    
+
     @type Boolean
     @default YES
     @see SC.ButtonView#supportFocusRing
@@ -364,9 +382,10 @@ SC.SelectView = SC.ButtonView.extend(
   */
   render: function(context,firstTime) {
     sc_super();
-    var layoutWidth, items, len, nameKey, iconKey, valueKey, separatorKey, showCheckbox,
-      currentSelectedVal, shouldLocalize, isSeparator, itemList, isChecked,
-      idx, name, icon, value, item, itemEnabled, isEnabledKey;
+
+    var escapeHTML, layoutWidth, items, len, nameKey, iconKey, valueKey, separatorKey, showCheckbox,
+        currentSelectedVal, shouldLocalize, isSeparator, itemList, isChecked,
+        idx, name, icon, value, item, itemEnabled, isEnabledKey, emptyName, isSameRecord;
 
     items = this.get('items') ;
     items = this.sortObjects(items) ;
@@ -378,7 +397,8 @@ SC.SelectView = SC.ButtonView.extend(
     valueKey = this.get('itemValueKey') ;
     separatorKey = this.get('itemSeparatorKey');
     showCheckbox = this.get('showCheckbox') ;
-    isEnabledKey = this.get('isEnabledKey');
+    isEnabledKey = this.get('itemIsEnabledKey');
+    escapeHTML = this.get('escapeHTML');
 
     //get the current selected value
     currentSelectedVal = this.get('value') ;
@@ -395,6 +415,32 @@ SC.SelectView = SC.ButtonView.extend(
     //index for finding the first item in the list
     idx = 0 ;
 
+    // Add the empty name to the list if applicable
+    emptyName = this.get('emptyName');
+
+    if(!SC.none(emptyName)) {
+      emptyName = shouldLocalize ? SC.String.loc(emptyName) : emptyName;
+      emptyName = escapeHTML ? SC.RenderContext.escapeHTML(emptyName) : emptyName;
+
+      item = SC.Object.create({
+        separator: NO,
+        title: emptyName,
+        icon: null,
+        value: null,
+        isEnabled: YES,
+        checkbox: NO,
+        target: this,
+        action: 'displaySelectedItem'
+      });
+
+      if(SC.none(currentSelectedVal)) {
+        this.set('title', emptyName);
+      }
+
+      //Set the items in the itemList array
+      itemList.push(item);
+    }
+
     items.forEach(function(object) {
     if (object || object === 0) {
 
@@ -405,6 +451,7 @@ SC.SelectView = SC.ButtonView.extend(
 
       // localize name if specified.
       name = shouldLocalize? SC.String.loc(name) : name ;
+      name = escapeHTML ? SC.RenderContext.escapeHTML(name) : name;
 
       //Get the icon value
       icon = iconKey ? (object.get ?
@@ -415,10 +462,17 @@ SC.SelectView = SC.ButtonView.extend(
         value = (valueKey) ? (object.get ?
         object.get(valueKey) : object[valueKey]) : object ;
 
-      if (!SC.none(currentSelectedVal) && !SC.none(value)){
-        if( currentSelectedVal === value ) {
-          this.set('title', name) ;
-          this.set('icon', icon) ;
+      if (!SC.none(currentSelectedVal) && !SC.none(value)) {
+
+        // If the objects in question are records, we should just their storeKeys
+        isSameRecord = false;
+        if (SC.kindOf(currentSelectedVal, SC.Record) && SC.kindOf(value, SC.Record)) {
+          isSameRecord = currentSelectedVal.get('storeKey') === value.get('storeKey');
+        }
+
+        if (currentSelectedVal === value || isSameRecord) {
+          this.set('title', name);
+          this.set('icon', icon);
         }
       }
 
@@ -432,11 +486,11 @@ SC.SelectView = SC.ButtonView.extend(
       else {
         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;
 
@@ -447,7 +501,7 @@ SC.SelectView = SC.ButtonView.extend(
         this._defaultIcon = icon ;
       }
 
-      var item = SC.Object.create({
+      item = SC.Object.create({
         separator: isSeparator,
         title: name,
         icon: icon,
@@ -472,9 +526,12 @@ SC.SelectView = SC.ButtonView.extend(
       this.invokeLast(function() {
         var value = this.get('value') ;
         if(SC.none(value)) {
-          this.set('value', this._defaultVal) ;
-          this.set('title', this._defaultTitle) ;
-          this.set('icon', this._defaultIcon) ;
+          if(SC.none(emptyName)) {
+            this.set('value', this._defaultVal) ;
+            this.set('title', this._defaultTitle) ;
+            this.set('icon', this._defaultIcon) ;
+          }
+          else this.set('title', emptyName) ;
         }
       });
     }
@@ -493,10 +550,10 @@ SC.SelectView = SC.ButtonView.extend(
     var buttonLabel, menuWidth, scrollWidth, lastMenuWidth, offsetWidth,
       items, elementOffsetWidth, largestMenuWidth, item, element, idx,
       value, itemList, menuControlSize, menuHeightPadding, customView,
-      menu, itemsLength, itemIdx;
-    
+      menu, itemsLength, itemIdx, escapeHTML;
+
     buttonLabel = this.$('.sc-button-label')[0] ;
-    
+
     var menuWidthOffset = SC.SelectView.MENU_WIDTH_OFFSET ;
     if(!this.get('isDefaultPosition')) {
       switch (this.get('controlSize')) {
@@ -519,7 +576,7 @@ SC.SelectView = SC.ButtonView.extend(
     }
     // 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 ;
@@ -541,7 +598,7 @@ SC.SelectView = SC.ButtonView.extend(
     var customViewMenuOffsetWidth = this.get('customViewMenuOffsetWidth') ;
     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 ;
-    
+
     SC.prepareStringMeasurement("", className);
     for (idx = 0, itemsLength = items.length; idx < itemsLength; ++idx) {
       //getting the width of largest menu item
@@ -570,9 +627,10 @@ SC.SelectView = SC.ButtonView.extend(
     itemList = this.get('_itemList') ;
     menuControlSize = this.get('controlSize') ;
     menuHeightPadding = this.get('menuPaneHeightPadding') ;
+    escapeHTML = this.get('escapeHTML');
 
     // get the user defined custom view
-    customView = this.get('exampleView') || SC.MenuItemView;
+    customView = this.get('exampleView') || SC.MenuItemView.extend({ escapeHTML: escapeHTML });
 
     menu  = SC.MenuPane.create({
 
@@ -618,7 +676,8 @@ SC.SelectView = SC.ButtonView.extend(
     this.set('menu', menu);
 
     itemIdx = this._itemIdx;
-    if (itemIdx && itemIdx > -1) {
+    if (!SC.empty(itemIdx) && itemIdx > -1) {
+    // if there is an item selected, make it the first responder
       customView = menu.menuItemViewForContentIndex(itemIdx);
       if (customView) { customView.becomeFirstResponder(); }
     }
@@ -632,7 +691,7 @@ SC.SelectView = SC.ButtonView.extend(
   */
   displaySelectedItem: function(menuView) {
     var currentItem = menuView.get("selectedItem");
-    
+
     this.set("value", currentItem.get("value"));
     this.set("title", currentItem.get("title"));
     this.set("_itemIdx", currentItem.get("contentIndex"));
@@ -749,7 +808,7 @@ SC.SelectView = SC.ButtonView.extend(
   mouseExited: function() {
     return YES;
   },
-  
+
   /**
     @private
     Handle Key event - Down arrow key
@@ -778,13 +837,13 @@ SC.SelectView = SC.ButtonView.extend(
     }
     return sc_super();
   },
-  
+
   /** @private
     Override the button isSelectedDidChange function in order to not perform any action
     on selecting the select_button
   */
   _button_isSelectedDidChange: function() {
-    
+
   }.observes('isSelected')
 
 }) ;
@@ -843,9 +902,9 @@ SC.SelectView.REGULAR_OFFSET_X = -17;
 /**
   @static
   @type Number
-  @default 3
+  @default 1
 */
-SC.SelectView.REGULAR_OFFSET_Y = 3;
+SC.SelectView.REGULAR_OFFSET_Y = 0;
 
 /**
   @static

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

@@ -153,7 +153,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
   value: null,
 
   /**
-    if this property is set to `YES`, a checbox is shown next to the
+    if this property is set to `YES`, a checkbox is shown next to the
     selected menu item.
 
     @type Boolean
@@ -162,7 +162,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
   checkboxEnabled: YES,
 
   /**
-    Set this property to required display positon of separator from bottom
+    Set this property to required display position of separator from bottom
 
     @default null
   */
@@ -204,7 +204,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     Prefer matrix to position the select button menu such that the
     selected item for the menu item will appear aligned to the
     the button. The value at the second `index(0)` changes based on the
-    `postion(index)` of the menu item in the menu pane.
+    `position(index)` of the menu item in the menu pane.
 
     @type Array
     @default null
@@ -458,6 +458,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
     }, this ) ;
 
     if(firstTime) {
+      context.attr('aria-haspopup', 'true') ;
       this.invokeLast(function() {
         var value = this.get('value') ;
         if(SC.none(value)) {
@@ -544,12 +545,12 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
     var customViewClassName = this.get('customViewClassName'),
         customViewMenuOffsetWidth = this.get('customViewMenuOffsetWidth'),
-        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 = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button menu sc-scroll-view sc-menu-scroll-view sc-container-view sc-menu-item menu-item value sc-regular-size' ;
     className = customViewClassName ? (className + ' ' + customViewClassName) : className ;
 
     dummyMenuItemView = (this.get('customView') || SC.MenuItemView).create(); 
     menuItemViewEscapeHTML = dummyMenuItemView.get('escapeHTML') ;
-    var body = document.body;
+    body = document.body;
     for (idx = 0, itemsLength = items.length; idx < itemsLength; ++idx) {
       //getting the width of largest menu item
       item = items.objectAt(idx) ;
@@ -659,28 +660,28 @@ SC.SelectButtonView = SC.ButtonView.extend(
     switch (this.get('controlSize')) {
       case SC.TINY_CONTROL_SIZE:
         controlSizeTuning = SC.SelectButtonView.TINY_OFFSET_Y;
-        customMenuItemHeight = SC.SelectButtonView.TINY_OFFSET_Y;
-        customSeparatorHeight = SC.SelectButtonView.TINY_POPUP_MENU_WIDTH_OFFSET;
+        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.SelectButtonView.SMALL_OFFSET_Y;
-        customSeparatorHeight = SC.SelectButtonView.SMALL_POPUP_MENU_WIDTH_OFFSET;
+        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.SelectButtonView.REGULAR_OFFSET_Y;
-        customSeparatorHeight = SC.SelectButtonView.REGULAR_POPUP_MENU_WIDTH_OFFSET;
+        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.SelectButtonView.LARGE_OFFSET_Y;
-        customSeparatorHeight = SC.SelectButtonView.LARGE_POPUP_MENU_WIDTH_OFFSET;
+        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.SelectButtonView.HUGE_OFFSET_Y;
-        customSeparatorHeight = SC.SelectButtonView.HUGE_POPUP_MENU_WIDTH_OFFSET;
+        customMenuItemHeight = SC.MenuPane.HUGE_MENU_ITEM_HEIGHT;
+        customSeparatorHeight = SC.MenuPane.HUGE_MENU_ITEM_SEPARATOR_HEIGHT;
         break;
     }
 
@@ -724,13 +725,29 @@ SC.SelectButtonView = SC.ButtonView.extend(
     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
+    // Store the current timestamp. We register the timestamp after a setTimeout
+    // 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);
+    
+    // we need to keep track that we opened it just now in case we get the
+    // mouseUp before render finishes. If it is 0, then we know we have not
+    // waited long enough.
+    this._menuRenderedTimestamp = 0;
+    
+    var self = this;
+    
+    // setTimeout guarantees that all rendering is done. The browser will even
+    // have rendered by this point.
+    setTimeout(function() {
+      SC.run(function(){
+        // a run loop might be overkill here but what if Date.now fails?
+        self._menuRenderedTimestamp = Date.now();
+      });
+    }, 1);
+
     return YES ;
   },
 
@@ -766,6 +783,11 @@ SC.SelectButtonView = SC.ButtonView.extend(
         touch = SC.platform.touch,
         targetMenuItem;
 
+    // normalize the previousTimestamp: if it is 0, it might as well be now.
+    // 0 means that we have not even triggered the nearly-immediate saving of timestamp.
+    if (previousTimestamp === 0) previousTimestamp = Date.now();
+
+
     if (menu) {
       targetMenuItem = menu.getPath('rootMenu.targetMenuItem');
 
@@ -986,12 +1008,12 @@ SC.MenuPane.SMALL_MENU_ITEM_SEPARATOR_HEIGHT = 7;
 SC.MenuPane.SMALL_MENU_HEIGHT_PADDING = 4;
 SC.MenuPane.SMALL_SUBMENU_OFFSET_X = 2;
 
-SC.MenuPane.REGULAR_MENU_ITEM_HEIGHT = 20;
+SC.MenuPane.REGULAR_MENU_ITEM_HEIGHT = 22;
 SC.MenuPane.REGULAR_MENU_ITEM_SEPARATOR_HEIGHT = 9;
 SC.MenuPane.REGULAR_MENU_HEIGHT_PADDING = 6;
 SC.MenuPane.REGULAR_SUBMENU_OFFSET_X = 2;
 
-SC.MenuPane.LARGE_MENU_ITEM_HEIGHT = 60;
+SC.MenuPane.LARGE_MENU_ITEM_HEIGHT = 31;
 SC.MenuPane.LARGE_MENU_ITEM_SEPARATOR_HEIGHT = 20;
 SC.MenuPane.LARGE_MENU_HEIGHT_PADDING = 0;
 SC.MenuPane.LARGE_SUBMENU_OFFSET_X = 4;