sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/desktop/views/checkbox.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)
 // ==========================================================================
 
 /** @class
@@ -18,111 +18,85 @@
   @extends SC.FieldView
   @since SproutCore 1.0
 */
-SC.CheckboxView = SC.FieldView.extend(SC.StaticLayout, SC.Button,
+SC.CheckboxView = SC.ButtonView.extend(SC.StaticLayout, SC.Button,
   /** @scope SC.CheckboxView.prototype */ {
 
-  classNames: ['sc-checkbox-view'],
+  classNames: ['sc-checkbox-view', 'sc-checkbox-control'],
   tagName: 'label',
+  controlStyle: '', 
 
   /* Ellipsis is disabled by default to allow multiline text */
   needsEllipsis: NO,
-
-  render: function(context, firstTime) {
-    var dt, elem ;
-    
-    // add checkbox -- set name to view guid to separate it from others
-    if (firstTime) {
-      dt = this._field_currentDisplayTitle = this.get('displayTitle');
-
-      var blank = SC.BLANK_IMAGE_URL;
-      var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"';
-      if(SC.browser.msie) context.attr('for', SC.guidFor(this));
-      context.push('<span class="button" ></span>');
-      context.push('<input type="checkbox" id="%@" name="%@" %@ />'.fmt(SC.guidFor(this),SC.guidFor(this),disabled));
-      if(this.get('needsEllipsis')){
-        context.push('<span class="label ellipsis">', dt, '</span>');
-      }else{
-        context.push('<span class="label">', dt, '</span>');  
-      }
-      context.attr('name', SC.guidFor(this));
-
-    // since we don't want to regenerate the contents each time 
-    // actually search for and update the displayTitle.
-    } else {
-      
-      if (elem = this.$input()[0]) {
-        if (this.get('isEnabled')) elem.disabled=NO;
-        else elem.disabled=YES;
-        elem = null ; // avoid memory leaks
-      }
-      
-      dt = this.get('displayTitle');
-      if (dt !== this._field_currentDisplayTitle) {
-        this._field_currentDisplayTitle = dt;
-        this.$('span.label').text(dt);
-      }
-    }
-  },
   
-  // ..........................................
-  // SC.FIELD SUPPORT
-  //
-
-  /** @private - return the input tag */
-  $input: function() { return this.$('input'); },
-
-  /** @private - get the checked value from the input tag.  If the value is
-    unchecked and the last value set was mixed, then return mixed.  This
-    allows mixed states to remain unchanged. */
-  getFieldValue: function() { 
-    var ret = this.$input().attr('checked'); 
-    if (ret) {
-      this._lastFieldValue = null; // clear last field value since it changed
-      
-    // possibly return mixed state if that was the last value set and the 
-    // current checked value is still empty.
-    } else {
-      if (this._lastFieldValue === SC.MIXED_STATE) ret = SC.MIXED_STATE ;
-    }
-    return ret ;
-  },
-
-  /** @private - set the checked value on the input tag.  If the value is 
-    mixed, treat that as unchecked and save the value.  This way the mixed 
-    state can be retained.
+  /** 
+    This is temporary , while we reimplement radio buttons without input 
+    tags.
   */
-  setFieldValue: function(v) { 
-    this._lastFieldValue = v; 
-    this.$input().attr('checked', (v === SC.MIXED_STATE) ? NO : !!v); 
-  },
+  routeTouch: NO,
   
-  /** @private - Converts the field value to the toggleOnValue or mixed */
-  fieldValueForObject: function(obj) {
-    return this.computeIsSelectedForValue(obj) ;
+  createRenderer: function(t) {
+    return t.checkboxControl();
   },
-
-  /** @private - Converts the field value to the toggleOffValue.  If the
-    value is MIXED_STATE, always return the current value */
-  objectForFieldValue: function(v) {
-    var ret = (v === SC.MIXED_STATE) ? this.get('value') : 
-      (!!v) ? this.get('toggleOnValue') : this.get('toggleOffValue'); 
-      return ret ;
-  },
-  
   
-  didCreateLayer: function() {
-    this.setFieldValue(this.get('fieldValue'));
-    SC.Event.add(this.$input()[0], 'click', this, this._field_fieldValueDidChange) ;
+  updateRenderer: function(r) {
+    // get value; we're gonna need it.
+    var value = this.get('value');
+    
+    // set settings
+    r.attr({
+      title: this.get("displayTitle"),
+      name: SC.guidFor(this),
+      ariaValue: value === SC.MIXED_MODE ? 'mixed' : (value === this.get('toggleOnValue') ? 'true' : 'false'),
+      needsEllipsis: this.get('needsEllipsis'),
+      escapeHTML: this.get('escapeHTML'),
+      icon: this.get('icon')
+    });
   },
   
-  willDestroyLayer: function() {
-    SC.Event.remove(this.$input()[0], 'click', this, this._field_fieldValueDidChange); 
-  },
+  acceptsFirstResponder: function() {
+    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
+    else return NO;
+  }.property('isEnabled'),
+  
   
   mouseDown: function(evt) {
+    if(!this.get('isEnabled')) return YES;
     this.set('isActive', YES);
-    this._field_isMouseDown = YES;
+    this._isMouseDown = YES;
+    // even if radiobuttons are not set to get firstResponder, allow default 
+    // action, that way textfields loose focus as expected.
+    if (evt) evt.allowDefault();
+    return YES;
+  },
+  
+  mouseUp: function(evt) {
+    if(!this.get('isEnabled') || 
+      (evt && evt.target && !this.$().within(evt.target))) {
+      return YES;
+    }
+    var val = this.get('value');
+    if (val === this.get('toggleOnValue')) {
+      this.renderer.attr('ariaValue', 'false');
+      this.renderer.update();
+      this.set('value', this.get('toggleOffValue'));
+    }
+    else {
+      this.renderer.attr('ariaValue', 'true');
+      this.renderer.update();
+      this.set('value', this.get('toggleOnValue'));
+    }
+    this.set('isActive', NO);
+    this._isMouseDown = NO;
     return YES;
+  },
+  
+  
+  touchStart: function(evt) {
+    return this.mouseDown(evt);
+  },
+  
+  touchEnd: function(evt) {
+    return this.mouseUp(evt);
   }
     
 }) ;

data/frameworks/sproutcore/frameworks/desktop/views/collection.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)
 // ==========================================================================
 
 sc_require('mixins/collection_view_delegate') ;
@@ -61,6 +61,11 @@ SC.CollectionView = SC.View.extend(
   // PROPERTIES
   //
   
+  /**
+    If YES, uses the VERY EXPERIMENTAL fast CollectionView path.
+  */
+  useFastPath: NO,
+  
   /**
     An array of content objects
     
@@ -430,7 +435,7 @@ SC.CollectionView = SC.View.extend(
     specified index.  This layout will be applied to the view just before it
     is rendered.
     
-    @param {Number} contentIndex the index of content beind rendered by
+    @param {Number} contentIndex the index of content being rendered by
       itemView
     @returns {Hash} a view layout
   */
@@ -579,6 +584,16 @@ SC.CollectionView = SC.View.extend(
     return this.delegateFor('isCollectionContent', del, content);
   }.property('delegate', 'content').cacheable(),
   
+  
+  /** @private
+    A cache of the contentGroupIndexes value returned by the delegate.  This
+    is frequently accessed and usually involves creating an SC.IndexSet
+    object, so it's worthwhile to cache.
+  */
+  _contentGroupIndexes: function() {
+    return this.get('contentDelegate').contentGroupIndexes(this, this.get('content'));
+  }.property('contentDelegate', 'content').cacheable(),
+  
   // ..........................................................
   // CONTENT CHANGES
   // 
@@ -600,6 +615,7 @@ SC.CollectionView = SC.View.extend(
   */
   contentRangeDidChange: function(content, object, key, indexes) {
     if (!object && (key === '[]')) {
+      this.notifyPropertyChange('_contentGroupIndexes');
       this.reload(indexes); // note: if indexes == null, reloads all
     } else {
       this.contentPropertyDidChange(object, key, indexes);
@@ -712,7 +728,7 @@ SC.CollectionView = SC.View.extend(
     var content = this.get('content'),
         lfunc   = this.contentLengthDidChange ;
 
-    if (content === this._content) return this; // nothing to do
+    if (content === this._content) return; // nothing to do
 
     // cleanup old content
     this.removeContentRangeObserver();
@@ -767,7 +783,10 @@ SC.CollectionView = SC.View.extend(
       if (invalid) invalid.add(indexes);
       else invalid = this._invalidIndexes = indexes.clone();
 
-    } else this._invalidIndexes = YES ; // force a total reload
+    }
+    else {
+      this._invalidIndexes = YES ; // force a total reload
+    }
     
     if (this.get('isVisibleInWindow')) this.invokeOnce(this.reloadIfNeeded);
     
@@ -797,70 +816,119 @@ SC.CollectionView = SC.View.extend(
     this._invalidIndexes = NO ;
     
     var content = this.get('content'),
-        len     = content ? content.get('length'): 0,
+        i, len, existing,
         layout  = this.computeLayout(),
         bench   = SC.BENCHMARK_RELOAD,
         nowShowing = this.get('nowShowing'),
         itemViews  = this._sc_itemViews,
         containerView = this.get('containerView') || this,
-        views, idx, view, layer ;
+        exampleView, groupExampleView,
+        shouldReuseViews, shouldReuseGroupViews, shouldReuse,
+        viewsToRemove, viewsToRedraw, viewsToCreate,
+        views, idx, view, layer, parentNode, viewPool,
+        del, groupIndexes, isGroupView;
 
     // if the set is defined but it contains the entire nowShowing range, just
     // replace
     if (invalid.isIndexSet && invalid.contains(nowShowing)) invalid = YES ;
     if (this.willReload) this.willReload(invalid === YES ? null : invalid);
 
+    
+    // Up-front, figure out whether the view class (and, if applicable,
+    // group view class) is re-usable.  If so, it's beneficial for us to
+    // first return all no-longer-needed views to the pool before allocating
+    // new ones, because that will maximize the potential for re-use.
+    exampleView = this.get('exampleView');
+    shouldReuseViews = exampleView ? exampleView.isReusableInCollections : NO;
+    groupExampleView = this.get('groupExampleView');
+    shouldReuseGroupViews = groupExampleView ? groupExampleView.isReusableInCollections : NO;
+
     // if an index set, just update indexes
     if (invalid.isIndexSet) {
-      
       if (bench) {
         SC.Benchmark.start(bench="%@#reloadIfNeeded (Partial)".fmt(this),YES);
       }
+            
+      // Each of these arrays holds indexes.
+      viewsToRemove = [];
+      viewsToRedraw = [];
+      viewsToCreate = [];
       
       invalid.forEach(function(idx) {
         // get the existing item view, if there is one
-        var existing = itemViews ? itemViews[idx] : null;
+        existing = itemViews ? itemViews[idx] : null;
         
         // if nowShowing, then reload the item view.
         if (nowShowing.contains(idx)) {
-          view = this.itemViewForContentIndex(idx, YES);
           if (existing && existing.parentView === containerView) {
-    
-            // if the existing view has a layer, remove it immediately from
-            // the parent.  This is necessary because the old and new views 
-            // will use the same layerId
-            layer = existing.get('layer');
-            if (layer && layer.parentNode) {
-              layer.parentNode.removeChild(layer);  
-            } 
-            layer = null ; // avoid leaks
-            
-            containerView.replaceChild(view, existing);
+            viewsToRedraw.push(idx);
+
           } else {
-            containerView.appendChild(view);
+            viewsToCreate.push(idx);
           }
           
         // if not nowShowing, then remove the item view if needed
         } else if (existing && existing.parentView === containerView) {
-          delete itemViews[idx];
+          viewsToRemove.push(idx);
+        }
+      },this);
+      
+      
+      // Now that we know what operations we need to perform, let's perform
+      // all the removals first…
+      for (i = 0, len = viewsToRemove.length;  i < len;  ++i) {
+        idx = viewsToRemove[i];
+        existing = itemViews ? itemViews[idx] : null;        
+        delete itemViews[idx];
+        
+        // If this view class is reusable, then add it back to the pool.
+        del = this.get('contentDelegate');
+        groupIndexes = this.get('_contentGroupIndexes');
+        isGroupView = groupIndexes && groupIndexes.contains(idx);
+        if (isGroupView) isGroupView = del.contentIndexIsGroup(this, content, idx);
+        shouldReuse = isGroupView ? shouldReuseGroupViews : shouldReuseViews;
+        if (shouldReuse) {
+          viewPool = isGroupView ? this._GROUP_VIEW_POOL : this._VIEW_POOL;
           
-          // if the existing view has a layer, remove it immediately from
-          // the parent...
-          layer = existing.get('layer');
-          if (layer && layer.parentNode) {
-            layer.parentNode.removeChild(layer);
-          }
-          layer = null ; // avoid leaks
+          viewPool.push(existing);
           
-          containerView.removeChild(existing);
+          // Because it's possible that we'll return this view to the pool
+          // and then immediately re-use it, there's the potential that the
+          // layer will not be correctly destroyed, because that support
+          // (built into removeChild) is coalesced at the runloop, and we
+          // will likely change the layerId when re-using the view.  So
+          // we'll destroy the layer now.
+          existing.destroyLayer();
         }
-      },this);
+        
+        containerView.removeChild(existing);
+      }
+      
+      // …then the redraws…
+      for (i = 0, len = viewsToRedraw.length;  i < len;  ++i) {
+        idx = viewsToRedraw[i];
+        existing = itemViews ? itemViews[idx] : null;
+        view = this.itemViewForContentIndex(idx, YES);
+
+        // if the existing view has a layer, remove it immediately from
+        // the parent.  This is necessary because the old and new views 
+        // will use the same layerId
+        existing.destroyLayer();            
+        containerView.replaceChild(view, existing);
+      }
+      
+      // …and finally the creations.
+      for (i = 0, len = viewsToCreate.length;  i < len;  ++i) {
+        idx = viewsToCreate[i];
+        view = this.itemViewForContentIndex(idx, YES);
+        containerView.insertBefore(view, null);   // Equivalent to 'append()', but avoids one more function call
+      }
+      
 
       if (bench) SC.Benchmark.end(bench);
       
     // if set is NOT defined, replace entire content with nowShowing
     } else {
-
       if (bench) {
         SC.Benchmark.start(bench="%@#reloadIfNeeded (Full)".fmt(this),YES);
       }
@@ -868,16 +936,49 @@ SC.CollectionView = SC.View.extend(
       // truncate cached item views since they will all be removed from the
       // container anyway.
       if (itemViews) itemViews.length = 0 ; 
+
+      views = containerView.get('childViews');
+      if (views) views = views.copy();
+
+      // below is an optimized version of:
+      //this.replaceAllChildren(views);
+      containerView.beginPropertyChanges();
+      // views = containerView.get('views');
+      if (this.willRemoveAllChildren) this.willRemoveAllChildren() ;
+      containerView.destroyLayer().removeAllChildren();
       
+      // For all previous views that can be re-used, return them to the pool.
+      if (views) {
+        for (i = 0, len = views.length;  i < len;  ++i) {
+          view = views[i];
+          isGroupView = view.get('isGroupView');
+          shouldReuse = isGroupView ? shouldReuseGroupViews : shouldReuseViews;
+          if (shouldReuse) {
+            viewPool = isGroupView ? this._GROUP_VIEW_POOL : this._VIEW_POOL;
+          
+            viewPool.push(view);
+          
+            // Because it's possible that we'll return this view to the pool
+            // and then immediately re-use it, there's the potential that the
+            // layer will not be correctly destroyed, because that support
+            // (built into removeChild) is coalesced at the runloop, and we
+            // will likely change the layerId when re-using the view.  So
+            // we'll destroy the layer now.
+            view.destroyLayer();
+          }
+        }
+      }
+      
+
+      // Only after the children are removed should we create the new views.
+      // We do this in order to maximize the change of re-use should the view
+      // be marked as such.
       views = [];
       nowShowing.forEach(function(idx) {
         views.push(this.itemViewForContentIndex(idx, YES));
       }, this);
 
-      // below is an optimized version of:
-      //this.replaceAllChildren(views);
-      containerView.beginPropertyChanges();
-      containerView.destroyLayer().removeAllChildren();
+      
       containerView.set('childViews', views); // quick swap
       containerView.replaceLayer();
       containerView.endPropertyChanges();
@@ -890,7 +991,6 @@ SC.CollectionView = SC.View.extend(
     if (layout) this.adjust(layout);
     if (this.didReload) this.didReload(invalid === YES ? null : invalid);
     
-    
     return this ;
   },
   
@@ -901,8 +1001,6 @@ SC.CollectionView = SC.View.extend(
     child views still need to be added, go ahead and add them.
   */
   render: function(context, firstTime) {
-    if (firstTime && this._needsReload) this.reloadIfNeeded() ;
-    
     // add classes for other state.
     context.setClass('focus', this.get('isFirstResponder'));
     context.setClass('disabled', !this.get('isEnabled'));
@@ -915,6 +1013,8 @@ SC.CollectionView = SC.View.extend(
   _TMP_ATTRS: {},
   _COLLECTION_CLASS_NAMES: 'sc-collection-item'.w(),
   _GROUP_COLLECTION_CLASS_NAMES: 'sc-collection-item sc-group-item'.w(),
+  _VIEW_POOL: null,
+  _GROUP_VIEW_POOL: null,
   
   /**
     Returns the item view for the content object at the specified index. Call
@@ -940,19 +1040,27 @@ SC.CollectionView = SC.View.extend(
     @returns {SC.View} instantiated view
   */
   itemViewForContentIndex: function(idx, rebuild) {
+    var ret;
+
+    // Use the cached view for this index, if we have it.  We'll do this up-
+    // front to avoid 
+    var itemViews = this._sc_itemViews;
+    if (!itemViews) {
+      itemViews = this._sc_itemViews = [] ;
+    }
+    else if (!rebuild && (ret = itemViews[idx])) {
+      return ret ; 
+    }
 
     // return from cache if possible
     var content   = this.get('content'),
-        itemViews = this._sc_itemViews,
         item = content.objectAt(idx),
         del  = this.get('contentDelegate'),
-        groupIndexes = del.contentGroupIndexes(this, content),
+        groupIndexes = this.get('_contentGroupIndexes'),
         isGroupView = NO,
-        key, ret, E, layout, layerId;
-
-    // use cache if available
-    if (!itemViews) itemViews = this._sc_itemViews = [] ;
-    if (!rebuild && (ret = itemViews[idx])) return ret ; 
+        key, E, layout, layerId,
+        viewPoolKey, viewPool, reuseFunc, parentView, isEnabled, isSelected,
+        outlineLevel, disclosureState, isVisibleInWindow;
 
     // otherwise generate...
     
@@ -963,38 +1071,103 @@ SC.CollectionView = SC.View.extend(
       key  = this.get('contentGroupExampleViewKey');
       if (key && item) E = item.get(key);
       if (!E) E = this.get('groupExampleView') || this.get('exampleView');
-
+      viewPoolKey = '_GROUP_VIEW_POOL';
     } else {
       key  = this.get('contentExampleViewKey');
       if (key && item) E = item.get(key);
       if (!E) E = this.get('exampleView');
+      viewPoolKey = '_VIEW_POOL';
     }
+    
+    
+    // Collect other state that we'll need whether we're re-using a previous
+    // view or creating a new view.
+    parentView        = this.get('containerView') || this;
+    layerId           = this.layerIdFor(idx);
+    isEnabled         = del.contentIndexIsEnabled(this, content, idx);
+    isSelected        = del.contentIndexIsSelected(this, content, idx);
+    outlineLevel      = del.contentIndexOutlineLevel(this, content, idx);
+    disclosureState   = del.contentIndexDisclosureState(this, content, idx);
+    isVisibleInWindow = this.isVisibleInWindow;
+    layout            = this.layoutForContentIndex(idx);    
+    
+    
+    // If the view is reusable and there is an appropriate view inside the
+    // pool, simply reuse it to avoid having to create a new view.
+    if (E  &&  E.isReusableInCollections) {
+      // Lazily create the view pool.
+      viewPool = this[viewPoolKey];
+      if (!viewPool) viewPool = this[viewPoolKey] = [];
+      
+      // Is there a view we can re-use?
+      if (viewPool.length > 0) {
+        ret = viewPool.pop();
 
-    // collect some other state
-    var attrs = this._TMP_ATTRS;
-    attrs.contentIndex = idx;
-    attrs.content      = item ;
-    attrs.owner        = attrs.displayDelegate = this;
-    attrs.parentView   = this.get('containerView') || this ;
-    attrs.page         = this.page ;
-    attrs.layerId      = this.layerIdFor(idx, item);
-    attrs.isEnabled    = del.contentIndexIsEnabled(this, content, idx);
-    attrs.isSelected   = del.contentIndexIsSelected(this, content, idx);
-    attrs.outlineLevel = del.contentIndexOutlineLevel(this, content, idx);
-    attrs.disclosureState = del.contentIndexDisclosureState(this, content, idx);
-    attrs.isGroupView  = isGroupView;
-    attrs.isVisibleInWindow = this.isVisibleInWindow;
-    if (isGroupView) attrs.classNames = this._GROUP_COLLECTION_CLASS_NAMES;
-    else attrs.classNames = this._COLLECTION_CLASS_NAMES;
-    
-    layout = this.layoutForContentIndex(idx);
-    if (layout) {
-      attrs.layout = layout;
-    } else {
-      delete attrs.layout ;
+        // Tell the view it's about to be re-used.
+        reuseFunc = ret.prepareForReuse;
+        if (reuseFunc) reuseFunc.call(ret);
+        
+        // Set the new state.  We'll set content last, because it's the most
+        // likely to have observers.
+        ret.beginPropertyChanges();
+        ret.set('contentIndex', idx);
+        ret.set('layerId', layerId);
+        ret.set('isEnabled', isEnabled);
+        ret.set('isSelected', isSelected);
+        ret.set('outlineLevel', outlineLevel);
+        ret.set('disclosureState', disclosureState);
+        ret.set('isVisibleInWindow', isVisibleInWindow);
+        
+        // TODO:  In theory this shouldn't be needed, but without it, we
+        //        sometimes get errors when doing a full reload, because
+        //        'childViews' contains the view but the parent is not set.
+        //        This implies a timing issue with the general flow of
+        //        collection view.
+        ret.set('parentView', parentView);
+        
+        // Since we re-use layerIds, we need to reset SproutCore's internal
+        // mapping table.
+        SC.View.views[layerId] = ret;
+        
+        if (layout) {
+          ret.set('layout', layout);
+        }
+        else {
+          ret.set('layout', E.prototype.layout);
+        }
+        ret.set('content', item);
+        ret.endPropertyChanges();
+      }
+    }
+    
+    // If we weren't able to re-use a view, then create a new one.
+    if (!ret) {
+      // collect some other state
+      var attrs = this._TMP_ATTRS;
+      attrs.contentIndex      = idx;
+      attrs.content           = item;
+      attrs.owner             = attrs.displayDelegate = this;
+      attrs.parentView        = parentView;   // Same here; shouldn't be needed
+      attrs.page              = this.page;
+      attrs.layerId           = layerId;
+      attrs.isEnabled         = isEnabled;
+      attrs.isSelected        = isSelected;
+      attrs.outlineLevel      = outlineLevel;
+      attrs.disclosureState   = disclosureState;
+      attrs.isGroupView       = isGroupView;
+      attrs.isVisibleInWindow = isVisibleInWindow;
+      if (isGroupView) attrs.classNames = this._GROUP_COLLECTION_CLASS_NAMES;
+      else attrs.classNames = this._COLLECTION_CLASS_NAMES;
+    
+      if (layout) {
+        attrs.layout = layout;
+      } else {
+        delete attrs.layout ;
+      }
+    
+      ret = this.createItemView(E, idx, attrs);
     }
     
-    ret = this.createItemView(E, idx, attrs);
     itemViews[idx] = ret ;
     return ret ;
   },
@@ -1169,7 +1342,7 @@ SC.CollectionView = SC.View.extend(
         last = this._cv_selection,
         func = this._cv_selectionContentDidChange;
         
-    if (sel === last) return this; // nothing to do
+    if (sel === last) return; // nothing to do
     if (last) last.removeObserver('[]', this, func);
     if (sel) sel.addObserver('[]', this, func);
     
@@ -1290,8 +1463,7 @@ SC.CollectionView = SC.View.extend(
 
     var content = this.get('content'),
         del     = this.get('selectionDelegate'),
-        cdel    = this.get('contentDelegate'),
-        groupIndexes = cdel.contentGroupIndexes(this, content),
+        groupIndexes = this.get('_contentGroupIndexes'),
         sel;
         
     if(!this.get('isSelectable')) return this;
@@ -1391,8 +1563,7 @@ SC.CollectionView = SC.View.extend(
         range   = SC.IndexSet.create(), 
         content = this.get('content'),
         del     = this.get('selectionDelegate'),
-        cdel    = this.get('contentDelegate'),
-        groupIndexes = cdel.contentGroupIndexes(this, content),
+        groupIndexes = this.get('_contentGroupIndexes'),
         ret, sel ;
 
     // fast path
@@ -1434,8 +1605,7 @@ SC.CollectionView = SC.View.extend(
     var range   = SC.IndexSet.create(), 
         content = this.get('content'),
         del     = this.get('selectionDelegate'),
-        cdel    = this.get('contentDelegate'),
-        groupIndexes = cdel.contentGroupIndexes(this, content),
+        groupIndexes = this.get('_contentGroupIndexes'),
         ret ;
 
     if (SC.none(proposedIndex)) proposedIndex = -1;
@@ -1724,7 +1894,11 @@ SC.CollectionView = SC.View.extend(
     Selects the previous item if itemsPerRow > 1.  Otherwise does nothing.
     If item is expandable, will collapse.
   */
-  moveLeft: function(sender, evt) {
+  moveLeft: function(evt) {
+    // If the control key is down, this may be a browser shortcut and
+    // we should not handle the arrow key.
+    if (evt.ctrlKey || evt.metaKey) return NO;
+
     if ((this.get('itemsPerRow') || 1) > 1) {
       this.selectPreviousItem(false, 1);
       this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
@@ -1788,7 +1962,11 @@ SC.CollectionView = SC.View.extend(
   /** @private
     Selects the next item if itemsPerRow > 1.  Otherwise does nothing.
   */
-  moveRight: function(sender, evt) {
+  moveRight: function(evt) {
+    // If the control key is down, this may be a browser shortcut and
+    // we should not handle the arrow key.
+    if (evt.ctrlKey || evt.metaKey) return NO;
+
     if ((this.get('itemsPerRow') || 1) > 1) {
       this.selectNextItem(false, 1) ;
       this._cv_performSelectAction(null, evt, this.ACTION_DELAY);
@@ -1900,8 +2078,6 @@ SC.CollectionView = SC.View.extend(
     // Instead, we just need to save a bunch of state about the mouse down
     // so we can choose the right thing to do later.
     
-    // Toggle selection only triggers on mouse up.  Do nothing.
-    if (this.get('useToggleSelection')) return true;
     
     // find the actual view the mouse was pressed down on.  This will call
     // hitTest() on item views so they can implement non-square detection
@@ -1909,7 +2085,8 @@ SC.CollectionView = SC.View.extend(
     var itemView      = this.itemViewForEvent(ev),
         content       = this.get('content'),
         contentIndex  = itemView ? itemView.get('contentIndex') : -1, 
-        info, anchor ;
+        info, anchor, sel, isSelected, modifierKeyPressed,
+        allowsMultipleSel = content.get('allowsMultipleSelection');
         
     info = this.mouseDownInfo = {
       event:        ev,  
@@ -1917,10 +2094,31 @@ SC.CollectionView = SC.View.extend(
       contentIndex: contentIndex,
       at:           Date.now()
     };
-      
+    
     // become first responder if possible.
     this.becomeFirstResponder() ;
     
+    // Toggle the selection if selectOnMouseDown is true
+    if (this.get('useToggleSelection')) {
+      if (this.get('selectOnMouseDown')) {
+        if (!itemView) return ; // do nothing when clicked outside of elements
+
+        // determine if item is selected. If so, then go on.
+        sel = this.get('selection') ;
+        isSelected = sel && sel.containsObject(itemView.get('content')) ;
+
+        if (isSelected) {
+          this.deselect(contentIndex) ;
+        } else if (!allowsMultipleSel) {
+          this.select(contentIndex, NO) ;
+        } else {
+          this.select(contentIndex, YES) ;
+        }
+      }
+      
+      return YES;
+    }
+        
     // recieved a mouseDown on the collection element, but not on one of the 
     // childItems... unless we do not allow empty selections, set it to empty.
     if (!itemView) {
@@ -1929,12 +2127,13 @@ SC.CollectionView = SC.View.extend(
     }
     
     // collection some basic setup info
-    var sel = this.get('selection'), isSelected, modifierKeyPressed;
+    sel = this.get('selection');
     if (sel) sel = sel.indexSetForSource(content);
     
     isSelected = sel ? sel.contains(contentIndex) : NO;
     info.modifierKeyPressed = modifierKeyPressed = ev.ctrlKey || ev.metaKey ;
     
+    
     // holding down a modifier key while clicking a selected item should 
     // deselect that item...deselect and bail.
     if (modifierKeyPressed && isSelected) {
@@ -1942,7 +2141,7 @@ SC.CollectionView = SC.View.extend(
 
     // if the shiftKey was pressed, then we want to extend the selection
     // from the last selected item
-    } else if (ev.shiftKey && sel && sel.get('length') > 0) {
+    } else if (ev.shiftKey && sel && sel.get('length') > 0 && allowsMultipleSel) {
       sel = this._findSelectionExtendedByShift(sel, contentIndex);
       anchor = this._selectionAnchor ; 
       this.select(sel) ;
@@ -1956,6 +2155,11 @@ SC.CollectionView = SC.View.extend(
     // Otherwise, if selecting on mouse down,  simply select the clicked on 
     // item, adding it to the current selection if a modifier key was pressed.
     } else {
+    
+      if((ev.shiftKey || modifierKeyPressed) && !allowsMultipleSel){
+        this.select(null, false);
+      }
+    
       if (this.get("selectOnMouseDown")) {
         this.select(contentIndex, modifierKeyPressed);
       } else {
@@ -1974,18 +2178,26 @@ SC.CollectionView = SC.View.extend(
     
     var view   = this.itemViewForEvent(ev),
         info   = this.mouseDownInfo,
-        contentIndex, sel, isSelected, canEdit, itemView, content, idx;
+        content       = this.get('content'),
+        contentIndex, sel, isSelected, canEdit, itemView, idx,
+        allowsMultipleSel = content.get('allowsMultipleSelection');
         
     if (this.get('useToggleSelection')) {
-      if (!view) return ; // do nothing when clicked outside of elements
+      // Return if clicked outside of elements or if toggle was handled by mouseDown
+      if (!view || this.get('selectOnMouseDown')) return NO;
       
       // determine if item is selected. If so, then go on.
       sel = this.get('selection') ;
       contentIndex = (view) ? view.get('contentIndex') : -1 ;
-      isSelected = sel && sel.include(contentIndex) ;
-
-      if (isSelected) this.deselect(contentIndex) ;
-      else this.select(contentIndex, YES) ;
+      isSelected = sel && sel.containsObject(view.get('content')) ;
+      
+      if (isSelected) {
+        this.deselect(contentIndex) ;
+      } else if (!allowsMultipleSel) {
+        this.select(contentIndex, NO) ;
+      } else {
+        this.select(contentIndex, YES) ;
+      }
       
     } else if(info) {
       idx = info.contentIndex;
@@ -2005,7 +2217,6 @@ SC.CollectionView = SC.View.extend(
       // selection and reselect the clicked on item.
       if (info.shouldReselect) {
         
-        //debugger ;
         // - contentValueIsEditable is true
         canEdit = this.get('isEditable') && this.get('canEditContent') ;
         
@@ -2080,6 +2291,57 @@ SC.CollectionView = SC.View.extend(
     return YES ;
   },
   
+  // ..........................................................
+  // TOUCH EVENTS
+  //
+  touchStart: function(touch, evt) {
+    // When the user presses the mouse down, we don't do much just yet.
+    // Instead, we just need to save a bunch of state about the mouse down
+    // so we can choose the right thing to do later.
+
+    // Toggle selection only triggers on mouse up.  Do nothing.
+    if (this.get('useToggleSelection')) return true;
+
+    // find the actual view the mouse was pressed down on.  This will call
+    // hitTest() on item views so they can implement non-square detection
+    // modes. -- once we have an item view, get its content object as well.
+    var itemView      = this.itemViewForEvent(touch),
+        content       = this.get('content'),
+        contentIndex  = itemView ? itemView.get('contentIndex') : -1,
+        info, anchor ;
+        
+    // become first responder if possible.
+    this.becomeFirstResponder() ;
+    
+    this.invokeLater("select", 1, contentIndex);
+    
+    return YES;
+  },
+
+  touchesDragged: function(evt, touches) {
+    touches.forEach(function(touch){
+      if (
+        Math.abs(touch.pageX - touch.startX) > 5 ||
+        Math.abs(touch.pageY - touch.startY) > 5
+      ) {
+        this.select(null, NO);
+        touch.makeTouchResponder(touch.nextTouchResponder);
+      }
+    }, this);
+
+  },
+  
+  touchEnd: function(touch) {
+    var itemView = this.itemViewForEvent(touch);
+    
+    // If actOnSelect is implemented, the action will be fired.
+    this._cv_performSelectAction(itemView, touch, 0);
+  },
+
+  touchCancelled: function(evt) {
+    this.select(null, NO);
+  },
+
   /** @private */
   _findSelectionExtendedByShift: function(sel, contentIndex) {
     
@@ -2139,7 +2401,7 @@ SC.CollectionView = SC.View.extend(
     @type String
   */
   reorderDataType: function() {
-    return 'SC.CollectionView.Reorder.%@'.fmt(SC.guidFor(this)) ;
+    return 'SC.CollectionView.Reorder.'+SC.guidFor(this) ;
   }.property().cacheable(),
   
   /**
@@ -2189,8 +2451,7 @@ SC.CollectionView = SC.View.extend(
         content = this.get('content'),
         sel     = this.get('selection'),
         info    = this.mouseDownInfo,
-        cdel    = this.get('contentDelegate'),
-        groupIndexes = cdel.contentGroupIndexes(this, content),
+        groupIndexes = this.get('_contentGroupIndexes'),
         dragContent, dragDataTypes, dragView;
     
     // if the mouse down event was cleared, there is nothing to do; return.
@@ -2251,7 +2512,7 @@ SC.CollectionView = SC.View.extend(
           slideBack: YES,
           dataSource: this
         }); 
-        
+
         // Also use this opportunity to clean up since mouseUp won't 
         // get called.
         this._cleanupMouseDown() ;
@@ -2725,6 +2986,7 @@ SC.CollectionView = SC.View.extend(
   
   init: function() {
      sc_super();
+     if (this.useFastPath) this.mixin(SC.CollectionFastPath);
      if (this.get('canReorderContent')) this._cv_canReorderContentDidChange();
      this._sccv_lastNowShowing = this.get('nowShowing').clone();
      if (this.content) this._cv_contentDidChange();