sproutcore 1.8.2.1 → 1.9.0

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

@@ -2149,8 +2149,11 @@ SC.CollectionView = SC.View.extend(SC.CollectionViewDelegate, SC.CollectionConte
     @returns {Boolean} Usually YES.
   */
   mouseDown: function(ev) {
+    var content = this.get('content');
+
+    if (!content) return this.get('isSelectable');
+
     var itemView      = this.itemViewForEvent(ev),
-        content       = this.get('content'),
         contentIndex  = itemView ? itemView.get('contentIndex') : -1,
         info, anchor, sel, isSelected, modifierKeyPressed, didSelect = NO,
         allowsMultipleSel = content.get('allowsMultipleSelection');

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

@@ -4,13 +4,20 @@
 //            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-
 sc_require('views/list') ;
 
+
 /** @class
 
   A grid view renders a collection of items in a grid of rows and columns.
 
+  ## Dropping on an Item
+
+  When the grid view is configured to accept drags and drops onto its items, it
+  will set the isDropTarget property on the target item accordingly.  This
+  allows you to modify the appearance of the drop target grid item accordingly
+  (@see SC.ListItemView#isDropTarget).
+
   @extends SC.ListView
   @author Charles Jolley
   @version 1.0
@@ -79,7 +86,7 @@ SC.GridView = SC.ListView.extend(
         columnWidth = this.get('columnWidth') || 0 ;
 
     return (columnWidth <= 0) ? 1 : Math.floor(f.width / columnWidth) ;
-  }.property('clippingFrame', 'columnWidth').cacheable(),
+  }.property('frame', 'columnWidth').cacheable(),
 
   /** @private
     Find the contentIndexes to display in the passed rect. Note that we
@@ -97,7 +104,7 @@ SC.GridView = SC.ListView.extend(
   /** @private */
   layoutForContentIndex: function(contentIndex) {
     var rowHeight = this.get('rowHeight') || 48,
-        frameWidth = this.get('clippingFrame').width,
+        frameWidth = this.get('frame').width,
         itemsPerRow = this.get('itemsPerRow'),
         columnWidth = Math.floor(frameWidth/itemsPerRow),
         row = Math.floor(contentIndex / itemsPerRow),
@@ -144,21 +151,29 @@ SC.GridView = SC.ListView.extend(
 
   /** @private */
   showInsertionPoint: function(itemView, dropOperation) {
-    if (!itemView) return ;
+    if (!itemView) return;
 
     // if drop on, then just add a class...
-    if (dropOperation === SC.DROP_ON) {
-      if (itemView !== this._dropOnInsertionPoint) {
-        this.hideInsertionPoint() ;
-        //itemView.addClassName('drop-target') ;
-        this._dropOnInsertionPoint = itemView ;
+    if (dropOperation & SC.DROP_ON) {
+      if (itemView !== this._lastDropOnView) {
+        this.hideInsertionPoint();
+
+        // If the drag is supposed to drop onto an item, notify the item that it
+        // is the current target of the drop.
+        itemView.set('isDropTarget', YES);
+
+        // Track the item so that we can clear isDropTarget when the drag changes;
+        // versus having to clear it from all items.
+        this._lastDropOnView = itemView;
       }
 
     } else {
 
-      if (this._dropOnInsertionPoint) {
-        //this._dropOnInsertionPoint.removeClassName('drop-target') ;
-        this._dropOnInsertionPoint = null ;
+      if (this._lastDropOnView) {
+        // If there was an item that was the target of the drop previously, be
+        // sure to clear it.
+        this._lastDropOnView.set('isDropTarget', NO);
+        this._lastDropOnView = null ;
       }
 
       if (!this._insertionPointView) {
@@ -184,15 +199,18 @@ SC.GridView = SC.ListView.extend(
 
   },
 
-  /** @private */
+  /** @see SC.CollectionView#hideInsertionPoint */
   hideInsertionPoint: function() {
-    var insertionPoint = this._insertionPointView ;
-    if (insertionPoint) insertionPoint.removeFromParent() ;
-
-    if (this._dropOnInsertionPoint) {
-      //this._dropOnInsertionPoint.removeClassName('drop-target') ;
-      this._dropOnInsertionPoint = null ;
+    // If there was an item that was the target of the drop previously, be
+    // sure to clear it.
+    if (this._lastDropOnView) {
+      this._lastDropOnView.set('isDropTarget', NO);
+      this._lastDropOnView = null;
     }
+
+    var view = this._insertionPointView ;
+    if (view) view.removeFromParent().destroy();
+    this._insertionPointView = null;
   },
 
   /** @private */
@@ -225,21 +243,36 @@ SC.GridView = SC.ListView.extend(
   },
 
   /** @private
-    If the size of the clipping frame changes, all of the item views
-    on screen are potentially in the wrong position.  Update all of their
-    layouts if different.
+    Since GridView lays out items evenly from left to right, if the width of the
+    frame changes, all of the item views on screen are potentially in
+    the wrong position.
+
+    Update all of their layouts if necessary.
   */
-  _gv_clippingFrameDidChange: function() {
-    var nowShowing = this.get('nowShowing'), itemView, idx, len;
-    this.notifyPropertyChange('itemsPerRow');
-
-    len = nowShowing.get('length');
-
-    // Only loop through the now showing indexes, if the content is sparsely
-    // loaded we could inadvertently trigger reloading unneeded content.
-    nowShowing.forEach(function(idx) {
-      itemView = this.itemViewForContentIndex(idx);
-      itemView.adjust(this.layoutForContentIndex(idx));
-    }, this);
-  }.observes('clippingFrame')
-}) ;
+  _gv_frameDidChange: function() {
+    var frame = this.get('frame'),
+      width;
+
+    // Changes to the width of the frame is the only variable that
+    // alters the layout of item views.
+    width = frame.width;
+    if (this._lastFrameWidth && width !== this._lastFrameWidth) {
+      this.notifyPropertyChange('itemsPerRow');
+
+      var idx,
+        itemView,
+        nowShowing = this.get('nowShowing');
+
+      // Only loop through the now showing indexes, if the content is sparsely
+      // loaded we could inadvertently trigger reloading unneeded content.
+      nowShowing.forEach(function(idx) {
+        itemView = this.itemViewForContentIndex(idx);
+        itemView.adjust(this.layoutForContentIndex(idx));
+      }, this);
+    }
+
+    // Cache the last width in order to check for differences.
+    this._lastFrameWidth = width;
+  }.observes('frame')
+
+});

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

@@ -47,13 +47,19 @@ sc_require('mixins/collection_row_delegate');
   Note that row heights and offsets are cached so once they are calculated
   the list view will be able to display very quickly.
 
-  (Can we also have an 'estimate row heights' property that will simply
-  cheat for very long data sets to make rendering more efficient?)
+  ## Dropping on an Item
+
+  When the list view is configured to accept drags and drops onto its items, it
+  will set the isDropTarget property on the target item accordingly.  This
+  allows you to modify the appearance of the drop target list item accordingly
+  (@see SC.ListItemView#isDropTarget).
 
   @extends SC.CollectionView
   @extends SC.CollectionRowDelegate
   @since SproutCore 1.0
 */
+// (Can we also have an 'estimate row heights' property that will simply
+// cheat for very long data sets to make rendering more efficient?)
 SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
 /** @scope SC.ListView.prototype */ {
 
@@ -433,7 +439,7 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
 
 
   // ..........................................................
-  // DRAG AND ROP SUPPORT
+  // DRAG AND DROP SUPPORT
   //
 
   /**
@@ -486,13 +492,23 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     if (SC.none(level)) level = -1;
 
     if (dropOperation & SC.DROP_ON) {
-      this.hideInsertionPoint();
-      itemView.set('isSelected', YES);
-      this._lastDropOnView = itemView;
+      if (itemView !== this._lastDropOnView) {
+        this.hideInsertionPoint();
+
+        // If the drag is supposed to drop onto an item, notify the item that it
+        // is the current target of the drop.
+        itemView.set('isDropTarget', YES);
+
+        // Track the item so that we can clear isDropTarget when the drag changes;
+        // versus having to clear it from all items.
+        this._lastDropOnView = itemView;
+      }
     } else {
 
       if (this._lastDropOnView) {
-        this._lastDropOnView.set('isSelected', NO);
+        // If there was an item that was the target of the drop previously, be
+        // sure to clear it.
+        this._lastDropOnView.set('isDropTarget', NO);
         this._lastDropOnView = null;
       }
 
@@ -508,12 +524,12 @@ SC.ListView = SC.CollectionView.extend(SC.CollectionRowDelegate,
     }
   },
 
-  /**
-    @see SC.CollectionView#hideInsertionPoint
-  */
+  /** @see SC.CollectionView#hideInsertionPoint */
   hideInsertionPoint: function() {
+    // If there was an item that was the target of the drop previously, be
+    // sure to clear it.
     if (this._lastDropOnView) {
-      this._lastDropOnView.set('isSelected', NO);
+      this._lastDropOnView.set('isDropTarget', NO);
       this._lastDropOnView = null;
     }
 

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

@@ -56,7 +56,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     @default ['disclosureState', 'escapeHTML']
     @see SC.View#displayProperties
   */
-  displayProperties: ['disclosureState', 'escapeHTML'],
+  displayProperties: ['disclosureState', 'escapeHTML', 'isDropTarget'],
 
 
   // ..........................................................
@@ -89,7 +89,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
-    
+
     @type Boolean
     @default NO
   */
@@ -100,7 +100,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     If false, the icon on the list item view will be hidden.  Otherwise,
     space will be left for the icon next to the list item view.
-    
+
     @type Boolean
     @default NO
   */
@@ -111,7 +111,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     arrow.
 
     If false, the space for the branch arrow will be collapsed.
-    
+
     @type Boolean
     @default NO
   */
@@ -130,18 +130,31 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /**
     The URL or CSS class name to use for the icon. This is only used if
     contentIconKey is null, or returns null from the delegate.
-    
+
     @type String
     @default null
   */
   icon: null,
 
+  /**
+    Whether this item is the drop target of a drag operation.
+
+    If the list view supports the SC.DROP_ON operation, it will set this
+    property on whichever list item view is the current target of the drop.
+
+    When true, the 'drop-target' class is added to the element.
+
+    @type Boolean
+    @default false
+  */
+  isDropTarget: NO,
+
   /**
     (displayDelegate) Property key to use for the icon url
 
     This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
-    
+
     @type String
     @default NO
   */
@@ -150,7 +163,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /**
     The URL or CSS class name to use for the right icon. This is only used if
     contentRightIconKey is null, or returns null from the delegate.
-    
+
     @type String
     @default null
   */
@@ -161,7 +174,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     This property will be checked on the content object to determine the
     icon to display.  It must return either a URL or a CSS class name.
-    
+
     @type String
     @default null
   */
@@ -171,7 +184,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     (displayDelegate) The name of the property used for label itself
 
     If null, then the content object itself will be used..
-    
+
     @type String
     @default null
   */
@@ -182,7 +195,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     You should only disable this option if you are sure you will only
     display content that is already escaped and you need the added
     performance gain.
-    
+
     @type Boolean
     @default YES
   */
@@ -194,7 +207,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     The count will only be visible if this property is not null and the
     returned value is not 0.
-    
+
     @type String
     @default null
   */
@@ -207,17 +220,17 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
     If this is null, then the branch view will be completely hidden.
     Otherwise space will be allocated for it.
-    
+
     @type String
     @default null
   */
   contentIsBranchKey: null,
-  
+
   /**
     Indent to use when rendering a list item with an outline level > 0.  The
     left edge of the list item will be indented by this amount for each
     outline level.
-    
+
     @type Number
     @default 16
   */
@@ -225,7 +238,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
 
   /**
     Outline level for this list item.  Usually set by the collection view.
-    
+
     @type Number
     @default 0
   */
@@ -234,11 +247,11 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /**
     Disclosure state for this list item.  Usually set by the collection view
     when the list item is created. Possible values:
-    
+
       - SC.LEAF_NODE
       - SC.BRANCH_OPEN
       - SC.BRANCH_CLOSED
-    
+
     @type String
     @default SC.LEAF_NODE
   */
@@ -272,7 +285,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /**
     Determines if content is editable or not. Checkboxes and other related
     components will render disabled if an item is not editable.
-    
+
     @field
     @type Boolean
     @observes content
@@ -281,13 +294,13 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     var content = this.get('content');
     return content && (content.get ? content.get('isEditable')!==NO : NO);
   }.property('content').cacheable(),
-  
+
   /**
     @type Object
     @default SC.InlineTextFieldDelegate
   */
   inlineEditorDelegate: SC.InlineTextFieldDelegate,
-  
+
   /**
     Finds and retrieves the element containing the label.  This is used
     for inline editing.  The default implementation returns a CoreQuery
@@ -309,7 +322,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     if (!layer) return NO ; // no layer yet -- nothing to do
 
     var el = SC.$(evt.target) ;
-    var ret = NO, classNames ;
+    var ret = NO;
     while(!ret && el.length>0 && (el[0] !== layer)) {
       if (el.hasClass(className)) ret = YES ;
       el = el.parent() ;
@@ -585,7 +598,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
   /*
     Edits the label portion of the list item. If scrollIfNeeded is YES, will
     scroll to the item before editing it.
-    
+
     @params {Boolean} if the parent scroll view should be scrolled to this item
       before editing begins
     @returns {Boolean} YES if successful
@@ -686,7 +699,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     this._oldOpacity = el.css('opacity');
     el.css('opacity', 0.0) ;
 
-    // restore old line height for original item if the old line height 
+    // restore old line height for original item if the old line height
     // was saved.
     if (this._oldLineHeight) el.css({ lineHeight: this._oldLineHeight }) ;
   }.enhance(),
@@ -736,6 +749,7 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
     // add alternating row classes
     classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
     context.setClass('disabled', !this.get('isEnabled'));
+    context.setClass('drop-target', this.get('isDropTarget'));
 
     // outline level wrapper
     working = context.begin("div").addClass("sc-outline");
@@ -764,8 +778,10 @@ SC.ListItemView = SC.View.extend(SC.InlineEditable, SC.Control,
       key = this.getDelegateProperty('contentIconKey', del) ;
       value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
 
-      this.renderIcon(working, value);
-      classArray.push('has-icon');
+      if (value) {
+        this.renderIcon(working, value);
+        classArray.push('has-icon');
+      }
     } else if (this.get('icon')) {
       value = this.get('icon');
       this.renderIcon(working, value);