sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/views/collection/grid.js

@@ -2,8 +2,8 @@
 // SC.GridView
 // ==========================================================================
 
-require('views/collection') ;
-require('views/collection/text_cell');
+require('views/collection/collection') ;
+require('views/label');
 
 /** @class
 
@@ -37,76 +37,150 @@ SC.GridView = SC.CollectionView.extend(
     
     You can override this as you wish.
   */
-  exampleView: SC.TextCellView,
+  exampleView: SC.LabelView,
   
   insertionOrientation: SC.HORIZONTAL_ORIENTATION,
+
+  // computed function for keyboard handling.
+  itemsPerRow: function() {
+    var ret = this._computeItemsPerRow() ;
+    console.log('ret = %@'.fmt(ret)) ;
+    return ret ;
+  }.property(),
+  
+  /** 
+    Calculates the number of items per row.
+  */
+  _computeItemsPerRow: function() {
+    var f = this.get('innerFrame') ;
+    var columnWidth = this.get('columnWidth') || 0 ;
+    return (columnWidth <= 0) ? 1 : Math.floor(f.width / columnWidth) ;
+  },
+
+  /** @private
+    Find the contentRange to display in the passed frame.  Note that we 
+    ignore the width of the frame passed since we need to have a single
+    contiguous range.
+  */
+  contentRangeInFrame: function(frame) {
+    var rowHeight = this.get('rowHeight') || 48 ;
+    var itemsPerRow = this._computeItemsPerRow() ;
+
+    var min = Math.floor(SC.minY(frame) / rowHeight) * itemsPerRow  ;
+    var max = Math.ceil(SC.maxY(frame) / rowHeight) * itemsPerRow ;
+    var ret = { start: min, length: max - min } ; 
+    //console.log('contentRangeInFrame(%@) = %@'.fmt($H(frame).inspect(), $H(ret).inspect()));
+    //if (frame.height < 100) debugger ;
+    return ret ;
+  },
+
+  layoutItemView: function(itemView, contentIndex, firstLayout) {
+    if (!itemView) debugger ;
+    SC.Benchmark.start('SC.GridView.layoutItemViewsFor') ;
+
+    var rowHeight = this.get('rowHeight') || 0 ;
+    var parentView = itemView.get('parentView') ;
+    var frameWidth = this.get('innerFrame').width ;
+    var itemsPerRow = this._computeItemsPerRow() ;
+    var columnWidth = Math.floor(frameWidth/itemsPerRow);
+    
+    var row = Math.floor(contentIndex / itemsPerRow) ;
+    var col = contentIndex - (itemsPerRow*row) ;
+    var f = { 
+      x: col * columnWidth, y: row * rowHeight,
+      height: rowHeight, width: columnWidth
+    };
+
+    if (firstLayout || !SC.rectsEqual(itemView.get('frame'), f)) {
+      itemView.set('frame', f) ;      
+    }
+    SC.Benchmark.end('SC.GridView.layoutItemViewsFor') ;
+  },
+
+  computeFrame: function() {
+    var content = this.get('content') ;
+    var rows = (content) ? content.get('length') : 0 ;
+    var rowHeight = this.get('rowHeight') || 20 ;
+
+    var parent = this.get('parentNode') ;
+    var f = (parent) ? parent.get('innerFrame') : { width: 100, height: 100 } ;
+
+    f.x = f.y = 0;
+    f.height = Math.max(f.height, rows * rowHeight) ;
+//    console.log('computeFrame(%@)'.fmt($H(f).inspect())) ;
+    return f ;
+  },
   
+    
   /** @private */
-  layoutChildViewsFor: function(parentView, startingView) {
+  layoutItemViewsFor: function(parentView, startingView) {
+    SC.Benchmark.start('SC.GridView.layoutItemViewsFor') ;
+
     var rowHeight = this.get('rowHeight') ;
     var columnWidth = this.get('columnWidth') ;
     if ((rowHeight == null) || (columnWidth == null)) return false ;
 
     // set items per row.
     parentView = parentView || this ;
-    var f = parentView.get('frame') ;
+    var f = parentView.get('innerFrame') ;
     f.x= f.y = 0 ; 
     var itemsPerRow = Math.floor(f.width / (columnWidth || 1)) ;
     if (this.get('itemsPerRow') != itemsPerRow) this.set('itemsPerRow', itemsPerRow);
     
     // fix width to evenly match items per row
-    columnWidth = Math.floor(f.width/itemsPerRow) ;
+    columnWidth = Math.floor((f.width-20)/itemsPerRow) ;
     
-    // get the startingView and the starting X,Y
-    if (!startingView) startingView = parentView.firstChild ;
-    var x,y ;
-    if (startingView && startingView.previousSibling) {
-      var prevFrame = startingView.previousSibling.get('frame') ;
-      x = SC.maxX(prevFrame); y = SC.minY(prevFrame) ;
-    } else { x = f.x; y = f.y; } 
+    // get the startingView and the starting row, col
+    var view = startingView || parentView.firstChild;
+    var content = this.get('content') || [] ;
+    var idx = (view) ? content.indexOf(view.get('content')) : 0;
+
     
-    // Now setup the default frame
-    var maxX = SC.maxX(f);
-    var minX = f.x;
     f = { x: 0, y: 0, height: rowHeight, width: columnWidth } ;
-    var view = startingView ;
+    
     while(view) {
-      // loop back to beginning of next line if needed.
-      if (x >= maxX) {
-        x = minX ;
-        y += rowHeight ;
-      }
-
-      // save frame
-      view.set('isPositioned', true) ;
-      f.y = y ; f.x = x;
+
+      // calculate position.
+      var row = Math.floor(idx / itemsPerRow) ;
+      var col = idx - (row * itemsPerRow) ;
+      f.x = col * columnWidth;  f.y = row * rowHeight ;
+
       if (!SC.rectsEqual(view.get('frame'), f)) view.set('frame', f) ;
-      x += columnWidth; 
+      
+      // go to next one
       view = view.nextSibling ;
+      idx++ ;
     }
+    
+    SC.Benchmark.end('SC.GridView.layoutItemViewsFor') ;
+    
     return true; 
   },
   
-  // computedViewHeight: function(groupView) {
-  //   var content = this.get('content') ;
-  //   var rowHeight = this.get('rowHeight') ;
-  //   var parentNode = this.get('parentNode') ;
-  //   var minHeight = (parentNode) ? 20 : parentNode.get('frame').height ;
-  //   var height = 0 ;
-  //   
-  //   if (content && rowHeight) {
-  //     var rows = content.get('length') ;
-  //     height = rows * rowHeight ;
-  //   }
-  //   if (height < minHeight) height = minHeight ;
-  //   return height ;
-  // },
+  computeFrame: function() {
+    var content = this.get('content') ;
+    var count = (content) ? content.get('length') : 0 ;
+    var rowHeight = this.get('rowHeight') || 0 ;
+    var columnWidth = this.get('columnWidth') || 0 ;
+
+    var parent = this.get('parentNode') ;
+    var f = (parent) ? parent.get('innerFrame') : { width: 0, height: 0 };
+    var itemsPerRow = (columnWidth <= 0) ? 1 : (f.width / columnWidth) ;
+    var rows = Math.ceil(count / itemsPerRow) ;
+
+    f.x = f.y = 0;
+    f.height = Math.max(f.height, rows * rowHeight) ;
+    
+    return f ;
+  },
+  
   
   insertionPointClass: SC.View.extend({
     emptyElement: '<div class="grid-insertion-point"><span class="anchor"></span></div>'
   }),
   
   showInsertionPointBefore: function(itemView) {
+    
     if (!itemView) return ;
   
     if (!this._insertionPointView) {
@@ -120,6 +194,7 @@ SC.GridView = SC.CollectionView.extend(
           y: itemViewFrame.y + 6, 
           width: 0 
         };
+        
     if (!SC.rectsEqual(insertionPoint.get('frame'), f)) {
       insertionPoint.set('frame', f) ;
     }
@@ -137,13 +212,16 @@ SC.GridView = SC.CollectionView.extend(
   // // We can do this much faster programatically using the rowHeight
   insertionIndexForLocation: function(loc) {  
     var f = this.get('frame') ;
-    loc = this.convertFrameFromView(loc, null) ;
+    var sf = this.get('scrollFrame') ;
     
-    var itemsPerRow = this.get('itemsPerRow') || 1 ; 
+    var itemsPerRow = this._computeItemsPerRow(); 
     var columnWidth = Math.floor(f.width / itemsPerRow) ;
-    var row = Math.floor((loc.y - f.y) / this.get('rowHeight') + 0.5) ;
-    var col = Math.floor((loc.x - f.x) / columnWidth + 0.5) ;
-    return (row*itemsPerRow) + col ;
+    var row = Math.floor((loc.y - f.y - sf.y) / this.get('rowHeight')) ;
+    var col = Math.floor(((loc.x - f.x - sf.x) / columnWidth) + 0.5) ;
+    
+    var ret= (row*itemsPerRow) + col ;
+    //console.log("insertionIndexForLocation = %@".fmt(ret)) ;
+    return ret ;
   }
   
 }) ;

data/frameworks/sproutcore/views/collection/image_cell.js

@@ -1,8 +1,9 @@
 // ==========================================================================
-// SC.TextCellView
+// SC.LabelView
 // ==========================================================================
 
-require('views/collection/collection_item') ;
+require('mixins/control') ;
+require('views/image') ;
 
 /** @class
 
@@ -14,15 +15,15 @@ require('views/collection/collection_item') ;
   @author    AuthorName  
   @version 0.1
 */
-SC.ImageCellView = SC.View.extend(SC.CollectionItem,
+SC.ImageCellView = SC.View.extend(SC.Control,
 /** @scope SC.ImageCellView.prototype */ {
 
-  emptyElement: '<div class="image-cell collection-item"><img src="%@"  style="position:relative;" /></div>'.fmt(static_url('blank')),
+  emptyElement: '<div class="image-cell sc-collection-item"><img src="%@"  style="position:relative;" /></div>'.fmt(static_url('blank')),
   
   /** 
-    The content object this image item view will display. 
+    The image URL you wish to display.
   */
-  content: null,
+  value: null,
 
   /** 
     The owner view of this cell.  The ImageCell relies on this
@@ -40,7 +41,7 @@ SC.ImageCellView = SC.View.extend(SC.CollectionItem,
   */
   formatter: null,
   
-  displayProperty: null,
+  contentValueKey: null,
   
   /**
     This is the required margin you want to appear around the image.  Expressed in px
@@ -58,6 +59,8 @@ SC.ImageCellView = SC.View.extend(SC.CollectionItem,
     // parent.  Automatically triggered when load status changes and
     // also by owner whenever it is resized.
     sizeToFit: function() {
+
+      if (this.get('status') != 'loaded') return ; 
       
       // find the best fit.
       var f= this.owner.get('frame') ;
@@ -90,65 +93,33 @@ SC.ImageCellView = SC.View.extend(SC.CollectionItem,
     }  
   },
   
-  // invoked whenever the content object changes.
-  _contentObserver: function() {
-    var content = this.get('content') ;
-    if (this._content == content) return ;
-    var f = this._boundValueDidChange() ;
-
-    // stop observing the old display property, if there is one.
-    if (this._content && this._displayProperty) {
-      this._content.removeObserver(this._displayProperty, f) ;
-    }
-    
-    // start observing the new display property, if there is one
-    this._displayProperty = this._getDefault('displayProperty') ;
-    this._content = content ;
-    if (this._content && this._displayProperty) {
-      this._content.addObserver(this._displayProperty, f) ;
-    }
-    
-    // notify value did change
-    this._valueDidChange() ;
-  }.observes('content'),
-  
   /** 
     @private
     
     Invoked whenever the monitored value on the content object 
     changes.
     
-    The value processed is either the displayProperty, if set, or 
+    The value processed is either the contentValueKey, if set, or 
     it is the content object itself.
   */
   _valueDidChange: function() {
-    var content = this.get('content') ;
-    var value = (content && this._displayProperty) ? content.get(this._displayProperty) : content;
+    var value = this.get('value') ;
     var owner = this.get('owner') ;
     
     // prepare the value...
     
     // 1. apply the formatter
-    var formatter = this._getDefault('formatter') ;
+    var formatter = this.getDelegateProperty(this.displayDelegate, 'formatter') ;
     if (formatter) {
       var formattedValue = ($type(formatter) == T_FUNCTION) ? formatter(value, this) : formatter.fieldValueForObject(value, this) ;
       if (formattedValue != null) value = formattedValue ;
     }
     
     // 2. If the returned value is not a string, convert it.
-    if (($type(value) != T_NULL) && value.toString) value = value.toString() ;
+    if (value != null && value.toString) value = value.toString() ;
 
     // 3. Apply URL to image view.
-    this.outlet('imageView').set('content', value) ;
-  },
-  
-  _boundValueDidChange: function() { 
-    return this._boundValueDidChange = this._boundValueDidChange  || this._valueDidChange.bind(this); 
-  },
-  
-  // Retrieves the default value from the owner or locally.
-  _getDefault: function(keyName) {
-    var ret = (this.owner) ? this.owner.get(keyName) : null ;
-    return (ret != null) ? ret : this.get(keyName) ;
-  }  
+    this.outlet('imageView').set('value', value) ;
+  }.observes('value')
+ 
 }) ;

data/frameworks/sproutcore/views/collection/list.js

@@ -2,8 +2,8 @@
 // SC.ListView
 // ==========================================================================
 
-require('views/collection') ;
-require('views/collection/text_cell');
+require('views/collection/collection') ;
+require('views/label');
 
 /** @class
 
@@ -40,44 +40,54 @@ SC.ListView = SC.CollectionView.extend(
     
     You can override this as you wish.
   */
-  exampleView: SC.TextCellView,
+  exampleView: SC.ListItemView,
   
   insertionOrientation: SC.VERTICAL_ORIENTATION,
   
+  contentRangeInFrame: function(frame) {
+    var rowHeight = this.get('rowHeight') || 0 ;
+    var min = Math.max(0,Math.floor(SC.minY(frame) / rowHeight)-1) ;
+    var max = Math.ceil(SC.maxY(frame) / rowHeight) ;
+    var ret = { start: min, length: max - min } ; 
+//    console.log('contentRangeInFrame(%@) = %@'.fmt($H(frame).inspect(), $H(ret).inspect()));
+    //if (frame.height < 100) debugger ;
+    return ret ;
+  },
+  
   /** @private */
-  layoutChildViewsFor: function(parentView, startingView) {
-    var rowHeight = this.get('rowHeight') ;
-    if (rowHeight == null) return false ;
+  layoutItemView: function(itemView, contentIndex, firstLayout) {
+    if (!itemView) debugger ;
+    SC.Benchmark.start('SC.ListView.layoutItemViewsFor') ;
+    
+    var rowHeight = this.get('rowHeight') || 0 ;
+    var parentView = itemView.get('parentView') ;
+    var f = { 
+      x: 0, 
+      y: contentIndex*rowHeight,
+      height: rowHeight, 
+      width: (parentView || this).get('innerFrame').width 
+    } ;
     
-    if (!startingView) startingView = parentView.firstChild ;
-    var y = (startingView && startingView.previousSibling) ? SC.maxY(startingView.previousSibling.get('frame')) : 0;
-    var f = (parentView || this).get('frame') ; 
-    f = { x: 0, height: rowHeight } ;
-    var view = startingView || parentView.firstChild;
-    while(view) {
-      view.set('isPositioned', true) ;
-      f.y = y ;
-      if (!SC.rectsEqual(view.get('frame'), f)) view.set('frame', f) ;
-      y += rowHeight; 
-      view = view.nextSibling ;
+    if (firstLayout || !SC.rectsEqual(itemView.get('frame'), f)) {
+      itemView.set('frame', f) ;      
+      itemView.setStyle({ zIndex: contentIndex.toString() }) ;
     }
-    return true; 
+    SC.Benchmark.end('SC.ListView.layoutItemViewsFor') ;
   },
   
-  // computedViewHeight: function(groupView) {
-  //   var content = this.get('content') ;
-  //   var rowHeight = this.get('rowHeight') ;
-  //   var parentNode = this.get('parentNode') ;
-  //   var minHeight = (parentNode) ? 20 : parentNode.get('frame').height ;
-  //   var height = 0 ;
-  //   
-  //   if (content && rowHeight) {
-  //     var rows = content.get('length') ;
-  //     height = rows * rowHeight ;
-  //   }
-  //   if (height < minHeight) height = minHeight ;
-  //   return height ;
-  // },
+  computeFrame: function() {
+    var content = this.get('content') ;
+    var rows = (content) ? content.get('length') : 0 ;
+    var rowHeight = this.get('rowHeight') || 20 ;
+    
+    var parent = this.get('parentNode') ;
+    var f = (parent) ? parent.get('innerFrame') : { width: 100, height: 100 } ;
+
+    f.x = f.y = 0;
+    f.height = Math.max(f.height, rows * rowHeight) ;
+//    console.log('computeFrame(%@)'.fmt($H(f).inspect())) ;
+    return f ;
+  },
   
   insertionPointClass: SC.View.extend({
     emptyElement: '<div class="list-insertion-point"><span class="anchor"></span></div>'
@@ -106,9 +116,9 @@ SC.ListView = SC.CollectionView.extend(
   
   // We can do this much faster programatically using the rowHeight
   insertionIndexForLocation: function(loc) {  
-    var f = this.get('frame') ;
-    loc = this.convertFrameFromView(loc, null) ;
-    var ret = Math.floor((loc.y - f.y) / this.get('rowHeight') + 0.5) ;
+    var f = this.get('innerFrame') ;
+    var sf = this.get('scrollFrame') ;
+    var ret = Math.floor(((loc.y - f.y - sf.y) / this.get('rowHeight')) + 0.4) ;
     return ret ;
   }