sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/{desktop/tests/panes/select_button → experimental/frameworks/select_view/tests/views/select}/ui.js

@@ -11,84 +11,109 @@
 //control test pane
 var pane = SC.ControlTestPane.design()
      //sample1
-    .add("Basic", SC.SelectButtonView, {
-       objects: ['None', 'Low', 'Medium', 'High']
+    .add("Basic", SC.SelectView, {
+       items: ['None', 'Low', 'Medium', 'High']
     })
 
     //sample2
-    .add("Disabled", SC.SelectButtonView, {
-       isEnabled: NO, objects: ['None', 'Low', 'Medium', 'High']
+    .add("Disabled", SC.SelectView, {
+       isEnabled: NO, items: ['None', 'Low', 'Medium', 'High']
     })
 
     //sample3
-    .add("NotVisible", SC.SelectButtonView, {
-      isVisible: NO, objects: ['None', 'Low', 'Medium', 'High']
+    .add("NotVisible", SC.SelectView, {
+      isVisible: NO, items: ['None', 'Low', 'Medium', 'High']
     })
 
     //sample4
-    .add("SortedObjects", SC.SelectButtonView, {
-      objects:['None', 'Low', 'Medium', 'High']
+    .add("SortedObjects", SC.SelectView, {
+      items:['None', 'Low', 'Medium', 'High'],
+      disableSort: NO
     })
 
     //sample5
-    .add("UnsortedObjects", SC.SelectButtonView, {
-      objects:['None', 'Low', 'Medium', 'High'],
+    .add("UnsortedObjects", SC.SelectView, {
+      items: ['None', 'Low', 'Medium', 'High'],
       disableSort: YES
     })
 
     //sample6
-    .add("redraw", SC.SelectButtonView, {
+    .add("redraw", SC.SelectView, {
       layout: { width: '150', right: '0' }
     })
 
     //sample7
-    .add("SelectButtonWithIcon", SC.SelectButtonView, {
-      objects: [{ title: "None", icon: 'select-button-icon' },
+    .add("SelectButtonWithIcon", SC.SelectView, {
+      items: [{ title: "None", icon: 'select-button-icon' },
         { title: "Low", icon: 'select-button-icon' },
         { title: "Medium", icon: 'select-button-icon' },
         { title: "High", icon: 'select-button-icon' }],
-      nameKey: 'title',
-      iconKey: 'icon',
-      checkboxEnabled: YES
+      itemTitleKey: 'title',
+      itemIconKey: 'icon',
+      itemValueKey: 'title',
+      value: 'None',
+      showCheckbox: YES
     })
 
     //sample8
-    .add("SortKey", SC.SelectButtonView, {
-      objects: [{ title: "None", pos: 3},
+    .add("SortKey", SC.SelectView, {
+      items: [{ title: "None", pos: 3},
         { title: "Low", pos: 1},
         { title: "Medium", pos: 2 },
         { title: "High", pos: 4}],
-      nameKey: 'title',
+      itemTitleKey: 'title',
       disableSort: NO,
-      sortKey: 'pos',
-      checkboxEnabled: YES
+      itemSortKey: 'pos',
+      showCheckbox: YES
     })
 
     //sample9
-    .add("StaticLayout", SC.SelectButtonView, {
+    .add("StaticLayout", SC.SelectView, {
       useStaticLayout: YES,
-      objects:['None', 'Low', 'Medium', 'High'],
+      items:['None', 'Low', 'Medium', 'High'],
       layout: { width: '150', right: '0' }
     })
 
     //sample10
-    .add("DisableItem", SC.SelectButtonView, {
-      objects: [{ title: "None", pos: 3, isEnabled: YES },
+    .add("DisableItem", SC.SelectView, {
+      items: [{ title: "None", pos: 3, isEnabled: YES },
         { title: "Low", pos: 1, isEnabled: NO },
         { title: "Medium", pos: 2, isEnabled: YES },
         { title: "High", pos: 4, isEnabled: NO }],
-      nameKey: 'title',
+      itemTitleKey: 'title',
       disableSort: NO,
       isEnabledKey: 'isEnabled',
-      sortKey: 'pos',
-      checkboxEnabled: YES
-    }) ;
+      itemSortKey: 'pos',
+      showCheckbox: YES
+    })
+
+    // sample11
+    .add("SelectButtonWithEmptyName", SC.SelectView, {
+      items: [{ title: "None", icon: 'select-button-icon' },
+        { title: "Low", icon: 'select-button-icon' },
+        { title: "Medium", icon: 'select-button-icon' },
+        { title: "High", icon: 'select-button-icon' }],
+      itemTitleKey: 'title',
+      itemIconKey: 'icon',
+      emptyName: '<empty>',
+      escapeHTML: NO,
+      showCheckbox: YES
+    })
+
+    .add("SelectWithSeparator", SC.SelectView, {
+      items: [{ title: "None", isSeparator: YES },
+        { title: "Low", isEnabled: NO },
+        { isSeparator: YES },
+        { title: "High" }],
+      itemTitleKey: 'title'
+    });
+
 
 // ..........................................................
 // TEST VIEWS
 //
 
-module('SC.SelectButtonView ui', {
+module('SC.SelectView ui', {
   setup: function(){
     htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
     pane.standardSetup().setup();
@@ -99,7 +124,7 @@ module('SC.SelectButtonView ui', {
   }
 });
 
-//test1
+// test1
 test("Check the visiblity of the selectButtons", function() {
   ok(pane.view('Basic').get('isVisibleInWindow'), 'Basic.isVisibleInWindow should be YES') ;
   ok(pane.view('Disabled').get('isVisibleInWindow'), 'Disabled.isVisibleInWindow should be YES') ;
@@ -109,6 +134,8 @@ test("Check the visiblity of the selectButtons", function() {
   ok(pane.view('redraw').get('isVisibleInWindow'), 'redraw.isVisibleInWindow should be YES') ;
   ok(pane.view('SelectButtonWithIcon').get('isVisibleInWindow'), 'SelectButtonWithIcon.isVisibleInWindow should be YES') ;
   ok(pane.view('StaticLayout').get('isVisibleInWindow'), 'StaticLayout.isVisibleInWindow should be YES') ;
+  ok(pane.view('SelectButtonWithEmptyName').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ;
+  ok(pane.view('SelectWithSeparator').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ;
 }) ;
 
 //test2
@@ -150,7 +177,7 @@ test("NotVisible", function() {
 //test5
 test("SortedObjects", function() {
    var view = pane.view('SortedObjects');
-   equals(null,view.get('sortKey'), 'sortkey not specified') ;
+   equals(null,view.get('itemSortKey'), 'sortkey not specified') ;
    ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ;
    ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ;
    ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ;
@@ -158,6 +185,9 @@ test("SortedObjects", function() {
    ok(!view.$().hasClass('icon'), 'hasClass(icon) should be NO') ;
    ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ;
    ok(!view.$().hasClass('def'), 'hasClass(def) should be NO') ;
+   SC.run(function() { view.showMenu(); });
+   equals(view.getPath("menu.displayItems")[0].title, "High", "The first item, when sorted, should be High.");
+   SC.run(function() { view.hideMenu(); });
 }) ;
 
 //test6
@@ -185,11 +215,13 @@ test("redraw", function() {
   ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ;
   ok(!view.$().hasClass('def'), 'hasClass(def) should be NO');
 
-  ok(view.get('objects').length === 0, "Objects should be empty");
+  ok(view.get('items') === null, "Items should be empty");
   SC.RunLoop.begin();
-  view.set('objects', ['Calendar', 'Work', 'Home']);
+  view.set('items', ['Calendar', 'Work', 'Home']);
   SC.RunLoop.end();
-  ok(view.get('objects').length === 3, "Objects length should be 3");
+  ok(view.get('items').length === 3, "Items length should be 3");
+
+  // Can someone actually put a redraw test here?
 }) ;
 
 //test8
@@ -207,7 +239,12 @@ test("SelectButtonWithIcon", function() {
 //test9
 test("Check if the objects are sorted based on sortKey", function() {
   var view=pane.view('SortKey');
-  equals('None',view.get('objects')[2].title, 'Third object should be "None" ') ;
+
+
+   SC.run(function() { view.showMenu(); });
+
+  equals('None',view.getPath("menu.displayItems")[2].title, 'Third object should be "None" ') ;
+   SC.run(function() { view.hideMenu(); });
 }) ;
 
 //test10
@@ -216,3 +253,37 @@ test("StaticLayout", function() {
   ok(!view.$().hasClass('disabled'), 'should not have disabled class');
   ok(!view.$().hasClass('sel'), 'should not have sel class');
 });
+
+//test11
+test("SelectButtonWithEmptyName", function() {
+  var view=pane.view('SelectButtonWithEmptyName').$(),
+      label = pane.view('SelectButtonWithEmptyName').$('label');
+  ok(!view.hasClass('icon'), 'hasClass(Icon) should be NO') ;
+  ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ;
+  ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ;
+  ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ;
+  ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ;
+  ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ;
+  ok(!view.hasClass('def'), 'hasClass(def) should be NO') ;
+  equals(label[0].innerHTML, '&lt;empty&gt;', 'The label should be "&lt;empty&gt;"');
+});
+
+/**
+  This is just a simple test that shows that when the first item provided to
+  SC.SelectView is a separator, it ignores it as the default
+  in favor of the first item with a value that is selectable.
+*/
+test("SelectWithSeparator", function() {
+  var view=pane.view('SelectWithSeparator');
+  ok(!view.$().hasClass('icon'), 'hasClass(Icon) should be NO') ;
+  ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ;
+  ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ;
+  ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ;
+  ok(!view.$().hasClass('sel'), 'hasClass(sel) should be NO') ;
+  ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ;
+  ok(!view.$().hasClass('def'), 'hasClass(def) should be NO') ;
+  
+  SC.run(function() { view.showMenu(); });
+  equals(view.getPath("menu.displayItems")[0].title, 'Low', 'The label should be "Low"');
+  SC.run(function() { view.hideMenu(); });
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/select_view/views/select.js

@@ -47,9 +47,9 @@ SC.SelectView = SC.PopupButtonView.extend({
 
     @property
     @type {String}
-    @default 'title'
+    @default null
   */
-  itemTitleKey: 'title',
+  itemTitleKey: null,
 
   /**
     If you set this to a non-null value, then the value of this key will
@@ -68,9 +68,9 @@ SC.SelectView = SC.PopupButtonView.extend({
 
      @property
      @type {String}
-     @default 'value'
+     @default null
   */
-  itemValueKey: 'value',
+  itemValueKey: null,
 
   /**
      Key used to extract icons from the items array.
@@ -90,7 +90,7 @@ SC.SelectView = SC.PopupButtonView.extend({
     @type {String}
     @default null
   */
-  itemSeparatorKey: "separator",
+  itemSeparatorKey: "isSeparator",
 
   /**
     Key used to indicate if the item is to be enabled.
@@ -101,6 +101,39 @@ SC.SelectView = SC.PopupButtonView.extend({
   */
   itemIsEnabledKey: "isEnabled",
 
+  /**
+    Set this to non-null to place an empty option at the top of the menu.
+
+    @property
+    @type String
+    @default null
+  */
+  emptyName: null,
+
+  /**
+    If true, titles will be escaped to avoid scripting attacks.
+
+    @type Boolean
+    @default YES
+  */
+  escapeHTML: YES,
+
+  /**
+    If true, the empty name and the default title will be localized.
+    
+    @type Boolean
+    @default YES
+  */
+  localize: YES,
+
+  /**
+    if true, it means that no sorting will occur, items will appear
+    in the same order as in the array
+
+    @type Boolean
+    @default YES
+  */
+  disableSort: YES,
 
   /**
    The menu that will pop up when this button is clicked.
@@ -150,23 +183,33 @@ SC.SelectView = SC.PopupButtonView.extend({
     this._scsv_valueDidChange();
   },
 
-  /**
-    @private
+  /** @private */
+  _itemTitleKey: function() {
+    return this.get('itemTitleKey') || 'title';
+  }.property('itemTitleKey').cacheable(),
+
+  /** @private */
+  _itemValueKey: function() {
+    return this.get('itemValueKey') || 'value';
+  }.property('itemValueKey').cacheable(),
 
-    This gets the value for a specific menu item. This function allows a few different
-    forms of input:
+  /** @private */
+  _itemIsEnabledKey: function() {
+    return this.get('itemIsEnabledKey') || 'isEnabled';
+  }.property('itemIsEnabledKey').cacheable(),
 
-    - A string: returns the string.
-    - A hash: returns hash[itemValueKey], using 'value' for the key if necessary.
-    - An SC.Object: returns object.get(itemValueKey), using 'value' for the key if needed.
+  /**
+    @private
 
+    This gets the value for a specific menu item. 
+    
     This method therefore accepts both the menu items as created for the menupane's displayItems
     AND the raw items provided by the developer in `items`.
   */
   _scsv_getValueForMenuItem: function(item) {
-    var valueKey = this.get('itemValueKey') || 'value';
+    var valueKey = this.get('_itemValueKey');
 
-    if (SC.typeOf(item) === SC.T_STRING) {
+    if (!item.isDisplayItem && !this.get('itemValueKey')) {
       return item;
     } else if (item.get) {
       return item.get(valueKey);
@@ -181,25 +224,21 @@ SC.SelectView = SC.PopupButtonView.extend({
   */
   _scsv_selectedItemDidChange: function() {
     var sel = this.get('selectedItem'),
-        last = this._scsv_lastSelection,
-        titleKey = this.get('itemTitleKey') || 'title',
-        valueKey = this.get('itemValueKey') || 'value';
+        last = this._scsv_lastSelection;
 
     // selected item could be a menu item from SC.MenuPane's displayItems, or it could
     // be a raw item. So, we have to use _scsv_getValueForMenuItem to resolve it.
-    if(sel) {
+    if (sel) {
       this.setIfChanged('value', this._scsv_getValueForMenuItem(sel));
     }
 
     // add/remove observers for the title and value so we can invalidate.
     if (last && last.addObserver && sel !== last) {
-      last.removeObserver(titleKey, this, this._scsv_selectedItemPropertyDidChange);
-      last.removeObserver(valueKey, this, this._scsv_selectedItemPropertyDidChange);
+      last.removeObserver('*', this, '_scsv_selectedItemPropertyDidChange');
     }
 
     if (sel && sel.addObserver && sel !== last) {
-      sel.addObserver(titleKey, this, this._scsv_selectedItemPropertyDidChange);
-      sel.addObserver(valueKey, this, this._scsv_selectedItemPropertyDidChange);
+      sel.addObserver('*', this, '_scsv_selectedItemPropertyDidChange');
     }
 
     this._scsv_lastSelection = sel;
@@ -208,18 +247,10 @@ SC.SelectView = SC.PopupButtonView.extend({
   // called when either title or value changes on the selected item
   _scsv_selectedItemPropertyDidChange: function(item) {
     this.notifyPropertyChange('title');
-    this.set('value', item.get(this.get('itemValueKey') || 'value'));
+    this.notifyPropertyChange('icon');
+    this.set('value', this._scsv_getValueForMenuItem(item));
   },
 
-  /**
-    The title to show when no item is selected.
-
-    @property
-    @type String
-    @default ""
-  */
-  defaultTitle: "",
-
   /**
     The title of the button, derived from the selected item.
   */
@@ -228,37 +259,165 @@ SC.SelectView = SC.PopupButtonView.extend({
 
     if (!sel) {
       return this.get('defaultTitle');
-    } else if (sel.get) {
-      return sel.get(this.get('itemTitleKey') || 'title');
-    } else if (SC.typeOf(sel) == SC.T_HASH) {
-      return sel[this.get('itemTitleKey') || 'title'];
     } else {
-      return sel;
+      var itemTitleKey = this.get('_itemTitleKey');
+      if (itemTitleKey) {
+        if (sel.get) return sel.get(itemTitleKey);
+        else if (SC.typeOf(sel) == SC.T_HASH) return sel[itemTitleKey];
+      }
+      return sel.toString();
     }
   }.property('selectedItem').cacheable(),
 
+  /** @private */
+  defaultTitle: function() {
+    var emptyName = this.get('emptyName');
+    if (emptyName) {
+      emptyName = this.get('localize') ? SC.String.loc(emptyName) : emptyName;
+      emptyName = this.get('escapeHTML') ? SC.RenderContext.escapeHTML(emptyName) : emptyName;
+    }
+    return emptyName || '';
+  }.property('emptyName').cacheable(),
+
+  /**
+    The icon of the button, derived from the selected item.
+  */
+  icon: function() {
+    var sel = this.get('selectedItem'),
+      itemIconKey = this.get('itemIconKey');
+
+    if (sel && itemIconKey) {
+      if (sel.get) return sel.get(itemIconKey);
+      else if (SC.typeOf(sel) == SC.T_HASH) return sel[itemIconKey];
+    }
+    return null;      
+  }.property('selectedItem').cacheable(),
+
+  /**
+    Returns an array of normalized display items.
+
+    Adds the empty name to the items if applicable.
+
+    `displayItems` should never be set directly; instead, set `items` and
+    `displayItems` will update automatically.
+
+    @type Array
+    @returns {Array} array of display items.
+    @isReadOnly
+  */
+  displayItems: function () {
+    var items = this.get('items'),
+      emptyName = this.get('emptyName'),
+      len,
+      ret = [], idx, item, itemType;
+
+    if (!items) len = 0;
+    else len = items.get('length');
+
+    for (idx = 0; idx < len; idx++) {
+      item = items.objectAt(idx);
+
+      // fast track out if we can't do anything with this item
+      if (!item || (!ret.length && item[this.get('itemSeparatorKey')])) continue;
+
+      itemType = SC.typeOf(item);
+      if (itemType === SC.T_STRING) {
+        item = this._addDisplayItem(item, item);
+      } else if (itemType === SC.T_HASH) {
+        item = SC.Object.create(item);
+      }
+      item.contentIndex = idx;
+
+      ret.push(item);
+    }
+
+    ret = this.sortObjects(ret);
+
+    if (emptyName) {
+      if (len) ret.unshift(this._addDisplayItem(null, null, true));
+      ret.unshift(this._addDisplayItem(emptyName, null));
+    }
+
+    return ret;
+  }.property().cacheable(),
+
+  /** @private */
+  _scsv_itemsDidChange: function () {
+    this.notifyPropertyChange('displayItems');
+  }.observes('*items.[]'),
+
+  /** @private */
+  _addDisplayItem: function (title, value, isSeparator) {
+    var item = SC.Object.create({
+      isDisplayItem: true
+    });
+
+    item[this.get('_itemTitleKey')] = title;
+    item[this.get('_itemValueKey')] = value;
+    item[this.get('_itemIsEnabledKey')] = true;
+    item[this.get('itemSeparatorKey')] = !!isSeparator;
+
+    return item;
+  },
+
+  /**
+
+    override this method to implement your own sorting of the menu. By
+    default, menu items are sorted using the value shown or the sortKey
+
+    @param {SC.Array} objects the unsorted array of objects to display.
+    @returns {SC.Array} sorted array of objects
+  */
+  sortObjects: function (objects) {
+    if (!this.get('disableSort')) {
+      var nameKey = this.get('itemSortKey') || this.get('_itemTitleKey');
+      objects = objects.sort(function(a, b) {
+        if (nameKey) {
+          a = a.get ? a.get(nameKey) : a[nameKey];
+          b = b.get ? b.get(nameKey) : b[nameKey];
+        }
+        return (a<b) ? -1 : ((a>b) ? 1 : 0);
+      });
+    }
+    return objects;
+  },
+
   /**
     * When the value changes, we need to update selectedItem.
     * @private
   */
   _scsv_valueDidChange: function() {
-    var value = this.get('value');
+    var displayItems = this.get('displayItems');
+    if (!displayItems) return;
 
-    if (!this.get('items')) {
-      return;
-    }
+    var len = displayItems.get ? displayItems.get('length') : displayItems.length, 
+      idx, item;
 
-    var items = this.get('items'), len = items.length, idx;
     for (idx = 0; idx < len; idx++) {
-      if (this._scsv_getValueForMenuItem(items[idx]) === value) {
-        this.setIfChanged('selectedItem', items[idx]);
+      item = displayItems.objectAt(idx);
+      
+      if (this.isValueEqualTo(item)) {
+        this.setIfChanged('selectedItem', item);
         return;
       }
     }
 
     // if we got here, this means no item is selected
     this.setIfChanged('selectedItem', null);
-  }.observes('value'),
+  }.observes('value', 'displayItems'),
+
+  /**
+    Check is the passed item is equal to the current value.
+
+    @param {Object} object to check
+    @returns {Boolean}
+  */
+  isValueEqualTo: function(item) {
+    var a = this.get('value'),
+      b = this._scsv_getValueForMenuItem(item);
+
+    return a === b;
+  },
 
   /**
     SelectView must set the selectView property on the menu so that the menu's
@@ -272,7 +431,9 @@ SC.SelectView = SC.PopupButtonView.extend({
     var attrs = {
       selectView: this,
       selectedItem: this.get('selectedItem'),
-      minimumMenuWidth: this.get('minimumMenuWidth')
+      minimumMenuWidth: this.get('minimumMenuWidth'),
+      escapeHTML: this.get('escapeHTML'),
+      localize: this.get('localize')
     };
 
     return klass.create(attrs);
@@ -361,15 +522,14 @@ SC.SelectView = SC.PopupButtonView.extend({
 
     // We have to find the selected item, and then get its 'top' position so we
     // can position the menu correctly.
-    var itemViews = menu.get('menuItemViews'), idx, len = itemViews.length, view;
+    var itemViews = menu.get('menuItemViews'), 
+      len = itemViews.length,
+      idx, view;
+
     for (idx = 0; idx < len; idx++) {
       view = itemViews[idx];
 
-      // we have to compare via value
-      var value = view.get('content').get(this.get('itemValueKey'));
-      if (value === this.get('value')) {
-        break;
-      }
+      if (this.isValueEqualTo(view.get('content'))) break;
     }
 
     if (idx < len) {
@@ -415,21 +575,20 @@ SC.SelectView = SC.PopupButtonView.extend({
 
   /**
     @private
-
-    Pressing the Up or Down arrow key should display the menu pane
+    Pressing the Up or Down arrow key should display the menu pane. Pressing escape should
+    resign first responder.
   */
-  interpretKeyEvents: function(event) {
-    if (event) {
-      if ((event.keyCode === 38 || event.keyCode === 40)) {
-        this.showMenu();
-        return YES;
-      }
-      else if (event.keyCode === 27) {
-        this.resignFirstResponder() ;
-        return YES;
-      }
-    }
-    return sc_super();
+  moveUp: function(evt) {
+    this._action();
+    return YES;
+  },
+  /** @private */
+  moveDown: function(evt) {
+    this._action();
+    return YES;
+  },
+  cancel: function(evt) {
+    this.resignFirstResponder();
   },
 
   /** @private