sproutcore 0.9.0 → 0.9.1

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

@@ -0,0 +1,36 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+/**
+  Apply this mixin to any view class to automatically inherit most of the
+  basic properties you need to support to act as an item view in a collection.
+  
+  In addition to this module, make sure that your view class knows how to
+  render the object set on the 'content' property.
+  
+  This module provides both the properties and reasonable default observers.
+  You can override them in your own class as well.
+  
+  @namespace
+*/
+SC.CollectionItem = {
+  
+  /** Set to true when the item is selected. */
+  isSelected: false,
+  
+  /** By default, adds the 'sel' CSS class if selected. */
+  isSelectedObserver: function() {
+    this.setClassName('sel', this.get('isSelected')) ;
+  }.observes('isSelected'),
+  
+  /** Set to true when the item is enabled. */
+  isEnabled: true,
+  
+  /** By default, adds the disabled CSS class if disabled. */
+  isEnabledObserver: function() {
+    this.setClassName('disabled', !this.get('isEnabled'));
+  }.observes('isEnabled')
+  
+};

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

@@ -0,0 +1,149 @@
+// ==========================================================================
+// SC.GridView
+// ==========================================================================
+
+require('views/collection') ;
+require('views/collection/text_cell');
+
+/** @class
+
+  A grid view renders a collection of items in a grid of rows and columns.
+
+  @extends SC.CollectionView
+  @author    Charles Jolley  
+  @version 1.0
+*/
+SC.GridView = SC.CollectionView.extend(
+/** @scope SC.GridView.prototype */ {
+  
+  emptyElement: '<div class="grid-view"></div>',
+  
+  /** 
+    The common row height for grid items.
+    
+    The value should be an integer expressed in pixels.
+  */
+  rowHeight: 48,
+  
+  /**
+    The minimum column width for grid items.  Items will actually
+    be laid out as needed to completely fill the space, but the minimum
+    width of each item will be this value.
+  */
+  columnWidth: 64,
+  
+  /**
+    The default example item view will render text-based items.
+    
+    You can override this as you wish.
+  */
+  exampleView: SC.TextCellView,
+  
+  insertionOrientation: SC.HORIZONTAL_ORIENTATION,
+  
+  /** @private */
+  layoutChildViewsFor: function(parentView, startingView) {
+    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') ;
+    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) ;
+    
+    // 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; } 
+    
+    // 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;
+      if (!SC.rectsEqual(view.get('frame'), f)) view.set('frame', f) ;
+      x += columnWidth; 
+      view = view.nextSibling ;
+    }
+    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 ;
+  // },
+  
+  insertionPointClass: SC.View.extend({
+    emptyElement: '<div class="grid-insertion-point"><span class="anchor"></span></div>'
+  }),
+  
+  showInsertionPointBefore: function(itemView) {
+    if (!itemView) return ;
+  
+    if (!this._insertionPointView) {
+      this._insertionPointView = this.insertionPointClass.create() ;
+    } ;
+    
+    var insertionPoint = this._insertionPointView ;
+    var itemViewFrame = itemView.get('frame') ;
+    f = { height: itemViewFrame.height - 6, 
+          x: itemViewFrame.x, 
+          y: itemViewFrame.y + 6, 
+          width: 0 
+        };
+    if (!SC.rectsEqual(insertionPoint.get('frame'), f)) {
+      insertionPoint.set('frame', f) ;
+    }
+  
+    if (insertionPoint.parentNode != itemView.parentNode) {
+      itemView.parentNode.appendChild(insertionPoint) ;
+    }
+  },
+  
+  hideInsertionPoint: function() {
+    var insertionPoint = this._insertionPointView ;
+    if (insertionPoint) insertionPoint.removeFromParent() ;
+  },
+  
+  // // We can do this much faster programatically using the rowHeight
+  insertionIndexForLocation: function(loc) {  
+    var f = this.get('frame') ;
+    loc = this.convertFrameFromView(loc, null) ;
+    
+    var itemsPerRow = this.get('itemsPerRow') || 1 ; 
+    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 ;
+  }
+  
+}) ;

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

@@ -0,0 +1,154 @@
+// ==========================================================================
+// SC.TextCellView
+// ==========================================================================
+
+require('views/collection/collection_item') ;
+
+/** @class
+
+  An image cell displays a single image inside of a collection view.  Unlike
+  a single imageView, the image cell will automatically position the image
+  inside of the view to reflect the actual size of the image on load.
+
+  @extends SC.View
+  @author    AuthorName  
+  @version 0.1
+*/
+SC.ImageCellView = SC.View.extend(SC.CollectionItem,
+/** @scope SC.ImageCellView.prototype */ {
+
+  emptyElement: '<div class="image-cell collection-item"><img src="%@"  style="position:relative;" /></div>'.fmt(static_url('blank')),
+  
+  /** 
+    The content object this image item view will display. 
+  */
+  content: null,
+
+  /** 
+    The owner view of this cell.  The ImageCell relies on this
+    view to provide many of its behavioral defaults and for 
+    event handling.
+  */
+  owner: null,
+  
+  /**
+    Set this to a validator or to a function and the value
+    will be passed through it before being set.
+    
+    This is a default default that can be overidden by the
+    settings in the owner view.
+  */
+  formatter: null,
+  
+  displayProperty: null,
+  
+  /**
+    This is the required margin you want to appear around the image.  Expressed in px
+  */
+  imageMargin: 2,
+  
+  /** 
+    The imageView that will manage the image itself.  No bindings are
+    configured for the image; the cell will simply inform it when
+    important changes occur.
+  */
+  imageView: SC.ImageView.extend({
+    
+    // Resizes the imageView to fix within the boundaries of its 
+    // parent.  Automatically triggered when load status changes and
+    // also by owner whenever it is resized.
+    sizeToFit: function() {
+      
+      // find the best fit.
+      var f= this.owner.get('frame') ;
+      var margin = this.owner.get('imageMargin') ;
+      f.width -= margin*2 ;
+      f.height -= margin*2 ;
+      
+      var w = this.get('imageWidth') ;
+      var h = this.get('imageHeight') ;
+      var wideScaleFactor = (f.width / w) ;
+      var tallScaleFactor = (f.height / h) ;
+      var scaleFactor = (tallScaleFactor < wideScaleFactor) ? tallScaleFactor : wideScaleFactor;
+      w = w * scaleFactor ; h = h*scaleFactor;
+      
+      var f= this.owner.get('frame') ; // reset w/o margin
+      var newFrame = { width: w, height: h, x: Math.floor((f.width - w) /2), y: Math.floor((f.height - h) /2) };
+      if (!SC.rectsEqual(newFrame, this.get('frame'))) {
+        this.set('frame', newFrame);
+      }
+      
+    }.observes('status')
+    
+  }).outletFor('img?'),
+  
+  outlets: ['imageView'],
+  
+  resizeChildrenWithOldSize: function() {
+    if (this.get('content')) {
+      this.outlet('imageView').sizeToFit() ;
+    }  
+  },
+  
+  // 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 
+    it is the content object itself.
+  */
+  _valueDidChange: function() {
+    var content = this.get('content') ;
+    var value = (content && this._displayProperty) ? content.get(this._displayProperty) : content;
+    var owner = this.get('owner') ;
+    
+    // prepare the value...
+    
+    // 1. apply the formatter
+    var formatter = this._getDefault('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() ;
+
+    // 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) ;
+  }  
+}) ;

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

@@ -0,0 +1,115 @@
+// ==========================================================================
+// SC.ListView
+// ==========================================================================
+
+require('views/collection') ;
+require('views/collection/text_cell');
+
+/** @class
+
+  A list view renders vertical lists of items.  It is a specialized form of
+  collection view that is simpler than the table view, but more refined than
+  a generic collection.
+  
+  You can use a list view just like a collection view, except that often you
+  also should provide a default rowHeight.  Setting this value will allow 
+  the ListView to optimize its rendering.
+
+  @extends SC.CollectionView
+  @author    Charles Jolley  
+  @version 1.0
+*/
+SC.ListView = SC.CollectionView.extend(
+/** @scope SC.ListView.prototype */ {
+  
+  emptyElement: '<div class="list-view"></div>',
+  
+  /** 
+    The common row height for list view items.
+    
+    If you set this property, then the ListView will be able to use this
+    property to perform absolute layout of its children and to minimize t
+    number of actual views it has to create.
+    
+    The value should be an integer expressed in pixels.
+  */
+  rowHeight: 20,
+  
+  /**
+    The default example item view will render text-based items.
+    
+    You can override this as you wish.
+  */
+  exampleView: SC.TextCellView,
+  
+  insertionOrientation: SC.VERTICAL_ORIENTATION,
+  
+  /** @private */
+  layoutChildViewsFor: function(parentView, startingView) {
+    var rowHeight = this.get('rowHeight') ;
+    if (rowHeight == null) return false ;
+    
+    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 ;
+    }
+    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 ;
+  // },
+  
+  insertionPointClass: SC.View.extend({
+    emptyElement: '<div class="list-insertion-point"><span class="anchor"></span></div>'
+  }),
+  
+  showInsertionPointBefore: function(itemView) {
+    if (!itemView) return ;
+
+    if (!this._insertionPointView) {
+      this._insertionPointView = this.insertionPointClass.create() ;
+    } ;
+    
+    var insertionPoint = this._insertionPointView ;
+    f = { height: 0, x: 8, y: itemView.get('frame').y, width: itemView.owner.get('frame').width };
+    insertionPoint.set('frame', f) ;
+
+    if (insertionPoint.parentNode != itemView.parentNode) {
+      itemView.parentNode.appendChild(insertionPoint) ;
+    }
+  },
+  
+  hideInsertionPoint: function() {
+    var insertionPoint = this._insertionPointView ;
+    if (insertionPoint) insertionPoint.removeFromParent() ;
+  },
+  
+  // 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) ;
+    return ret ;
+  }
+  
+}) ;