sproutcore 0.9.1 → 0.9.2

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

@@ -0,0 +1,386 @@
+// ==========================================================================
+// SC.SourceListView
+// ==========================================================================
+
+require('views/collection/collection') ;
+require('views/button/disclosure');
+require('views/source_list_group');
+
+SC.BENCHMARK_SOURCE_LIST_VIEW = NO ;
+
+/** @class
+
+  Displays a source list like the source list in iTunes.
+
+  @extends SC.CollectionView
+  @author    Charles Jolley  
+  @version 1.0
+*/
+SC.SourceListView = SC.CollectionView.extend(
+/** @scope SC.SourceListView.prototype */ {
+  
+  emptyElement: '<div class="sc-source-list-view"></div>',
+  
+  /**
+    name of property on the content object to use for the source list text.
+  */
+  contentValueKey: null,
+  
+  /**
+    Set to YES if you want source list items to display an icon.
+    
+    If this property is set, list items will leave space for a display 
+    icon to the left of the text label.  To actually display an icon in that
+    space, you will also need to set the contenIconUrlProperty or the 
+    contentIconClassNameProperty or both.
+  */
+  hasContentIcon: NO,
+  
+  /**
+    Set if YES if you want the source list to display a branch arrow.
+    
+    If this property is set, list items will leave space on the right edge
+    to display a branch arrow, indicating the user can click on the item to
+    reveal a menu or another level of content. 
+    
+    To actually display a branch arrow, you must also set the 
+    contentIsBranchKey.
+  */
+  hasContentBranch: NO,
+  
+  /**
+    Name of the content object property that contains the icon .
+    
+    This is the *name* of the property you want the list items to inspect
+    on content objects to retrieve an icon image URL.  For example, if you
+    set this property to 'icon', then the icon displayed for each item will
+    be the URL returned by content.get('icon').
+
+    The value of this property must be either a URL or a CSS class name.  If
+    you use a CSS class name, then the image src will be set to a blank 
+    image and the class name will be applied automatically so you can use 
+    spriting.  If a URL is returned it will be set as the src property on
+    the image tag.
+  */
+  contentIconKey: null,
+  
+  /**
+    Name of content object property that contains the unread count.
+    
+    The unread count is used to indicate to a user when an item in the 
+    source list contains items that need their attention.  If the unread 
+    count on a content object is a non-zero number, it will be displayed on
+    the right side of the list item.
+    
+    This is the *name* of the property you want the list item to inspect
+    on content objects to receive the unread count for the item.  For example,
+    if you set this property to "unread", then the unread count will be
+    the value returned by content.get('unread').
+    
+    If you do not want to use unread counts, leave this property to null.
+  */
+  contentUnreadCountKey: null,
+  
+  /**
+    Name of the content object property that contains the branch state.
+    
+    If an item is a branch, then a branch arrow will be displayed at the
+    right edge indicating that clicking on the item will reveal another
+    level or content or possibly a popup menu.
+    
+    To display the branch, you must also set hasContentBranch to YES.
+    
+    This is the *name* of the property you want the list item to inspect 
+    on the content objects to retrieve the branch state.  For example, if
+    you set this property to "isBranch", then the branch state will be the
+    value returned by content.get('isBranch').
+  */
+  contentIsBranchKey: null,
+  
+  /**
+    Key that contains the group name.
+    
+    If set, the title shown in the group label will be the value returned
+    by this property on the group object.
+  */
+  groupTitleKey: null,
+
+  /**
+    Key that contains group visibility.
+    
+    If set, the group label will display a disclosure triangle matching the
+    value of this property.
+  */
+  groupVisibleKey: null,
+  
+  /** 
+    The common row height for list view items.
+    
+    The value should be an integer expressed in pixels.
+  */
+  rowHeight: 32,
+  
+  /**
+    Source list view items are usually list item views.  You can override 
+    this if you wish.
+  */
+  exampleView: SC.ListItemView,
+  
+  /**
+    The standard group view provided by source list view generally 
+    provides all the functionality you need.
+  */
+  exampleGroupView: SC.SourceListGroupView,
+  
+  
+  // .......................................
+  // LAYOUT METHODS
+  //
+
+  // whenever updateChildren is called with a deep method, flush the
+  // cached group rows to make sure we get an accurate count.
+  updateChildren: function(deep) {
+    if (deep) this._groupRows = null ;
+    return arguments.callee.base.apply(this, arguments) ;  
+  },
+  
+  // determines if the group at the specified content index is visible or
+  // not.  This will look either at a property on the group or on the
+  // SourceListGroupView.
+  groupAtContentIndexIsVisible: function(contentIndex) {
+    
+    if (!this.get('groupBy')) return YES; // no grouping
+
+    // get the group value and try to find a matching view, which may
+    // or may not exist yet.
+    var groupValue = this.groupValueAtContentIndex(contentIndex) ;
+    var groupView = this.groupViewForGroupValue(groupValue) ;
+    
+    // if the groupView exists, use that.  The visible state is stored here
+    // in case the group does not actually support storing its own visibility.
+    // ignore groupView if it does not support isGroupVisible
+    var ret = YES ;
+    if (groupView) ret = groupView.get('isGroupVisible') ;
+
+    // otherwise try to get from the group itself.
+    if (((ret === undefined) || (ret === null) || !groupView) && groupValue && groupValue.get) {
+      var key = this.get('groupVisibleKey') ;
+      if (key) ret = !!groupValue.get(key) ;
+    }
+    
+    // if the above methods failed for some reason, just leave the group visible
+    if ((ret === undefined) || (ret === null)) ret = YES ;
+    
+    return ret ;
+  },
+    
+  // calculates the number of rows consumed by each group.  stores a hash of
+  // contentIndexes and rows. 
+  computedGroupRows: function() {
+    if (this._groupRows) return this._groupRows;
+    
+    var loc = 0 ; 
+    var content = Array.from(this.get('content')) ;  
+    var max = content.get('length') ;
+    
+    var ret = {} ;
+    while(loc < max) {
+      var range = this.groupRangeForContentIndex(loc) ;
+      var isVisible = this.groupAtContentIndexIsVisible(range.start) ;
+      ret[range.start] = (isVisible) ? range.length : 0 ;
+
+      // add a header row space if neede
+      var groupValue = this.groupValueAtContentIndex(range.start) ;
+      if (groupValue != null) ret[range.start]++ ;
+      
+      loc = (range.length <= 0) ? max : SC.maxRange(range) ;
+    }
+    
+    return this._groupRows = ret ;
+  },
+
+  // Returns the number of rows in the specified range.
+  countRowsInRange: function(range) {
+    var groupRows = this.computedGroupRows() ;
+    var max = SC.maxRange(range) ;
+    var loc = SC.minRange(range) ;
+    var ret = 0 ;
+    
+    while(loc < max) {
+      var range = this.groupRangeForContentIndex(loc) ;
+      loc = (range.length <= 0) ? max : SC.maxRange(range) ;
+      ret += groupRows[range.start] || (range+1);
+    }
+    return ret ;
+  },
+  
+  computeFrame: function() {
+    var content = this.get('content') ;
+    var rowHeight = this.get('rowHeight') || 20 ;
+
+    // find number of groups.  
+    var rows = this.countRowsInRange({ start: 0, length: content.get('length') });
+    if (rows <= 0) rows = 0 ;
+
+    // get parent width
+    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) ;
+    return f ;
+  },
+
+  
+  // disable incremental rendering for now
+  contentRangeInFrame: function(frame) {
+    var content =this.get('content') ;
+    var len = (content) ? content.get('length') : 0 ;
+    var ret = { start: 0, length: len } ;
+    return ret ;
+  },
+
+  
+  /** @private */
+  layoutItemView: function(itemView, contentIndex, firstLayout) {
+    if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+      SC.Benchmark.start('SC.SourceListView.layoutItemViewsFor') ;
+    }
+    
+    // if itemView's group is not visible, then just set to invisible.
+    if (!this.groupAtContentIndexIsVisible(contentIndex)) {
+      itemView.set('isVisible', false) ;
+    } else {
+
+      // if item was not visible, make it visible.  Also force layout.
+      if (!itemView.get('isVisible')) {
+        firstLayout = YES ;        
+        itemView.set('isVisible', true) ;
+      }
+
+      var rowHeight = this.get('rowHeight') || 0 ;
+
+      // layout relative to top of group.  Leave open row for title
+      var range = this.groupRangeForContentIndex(contentIndex) ;
+      contentIndex = (contentIndex - range.start) ;
+      
+      var groupValue = this.groupValueAtContentIndex(range.start) ;
+      if (groupValue != null) contentIndex++ ;
+
+      var f = { 
+        x: 0, 
+        y: contentIndex*rowHeight,
+        height: rowHeight, 
+        width: this.get('innerFrame').width 
+      } ;
+
+      if (firstLayout || !SC.rectsEqual(itemView.get('frame'), f)) {
+        itemView.set('frame', f) ;      
+      }
+
+    }
+    
+    if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+      SC.Benchmark.end('SC.SourceListView.layoutItemViewsFor') ;
+    }
+  },
+  
+  layoutGroupView: function(groupView, groupValue, contentIndexHint, firstLayout) {
+    
+    if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+      SC.Benchmark.start('SC.SourceListView.layoutGroupView') ;
+    }
+    
+    //console.log('layoutGroupView', groupValue) ;
+    
+    // find the range this group will belong to
+    var range = this.groupRangeForContentIndex(contentIndexHint) ;
+    var isVisible = this.groupAtContentIndexIsVisible(range.start) ;
+    
+    var priorRows = this.countRowsInRange({ start: 0, length: range.start }) ;
+    var rowHeight = this.get('rowHeight') || 0 ;
+    var parentView = groupView.get('parentView') || this ;
+    var rows = (isVisible) ? range.length : 0 ;
+    if (groupValue != null) rows++ ;
+
+    var f = { 
+      x: 0, 
+      y: priorRows*rowHeight,
+      height: rowHeight * rows, 
+      width: (parentView || this).get('innerFrame').width 
+    } ;
+    
+    if (firstLayout || !SC.rectsEqual(groupView.get('frame'), f)) {
+      groupView.set('frame', f) ;      
+    }
+
+    if (SC.BENCHMARK_SOURCE_LIST_VIEW) {
+      SC.Benchmark.end('SC.SourceListView.layoutGroupView') ;    
+    }
+  },
+  
+  // .......................................
+  // INSERTION POINT METHODS
+  //
+  
+  insertionOrientation: SC.VERTICAL_ORIENTATION,
+  
+  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('innerFrame') ;
+    var sf = this.get('scrollFrame') ;
+    var rowHeight = this.get('rowHeight') || 0 ;
+
+    // find the offset to work with.
+    var offset = loc.y - f.y - sf.y ;
+    var ret = -1; // the return value
+
+    // search groups until we find one that matches
+    var top = 0;
+    var idx = 0 ;
+    while((ret<0) && (range = this.groupRangeForContentIndex(idx)).length>0){
+      var max = top + ((range.length+1) * rowHeight) ;
+      
+      // the offset is within the group, find the row in the group.  Remember
+      // that the top row is actually the label, so we should return -1 if 
+      // we hit there.
+      if (max >= offset) {
+        offset -= top ;
+        ret = Math.floor((offset / rowHeight) + 0.4) ;
+        if (ret < 1) return -1 ; // top row!
+        ret = (ret - 1) + idx ;
+        
+      // we are not yet within the group, go on to the next group.
+      } else {
+        idx += range.length ;
+        top = max ;
+      }
+    }
+    return ret ;
+  }
+  
+}) ;

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

@@ -0,0 +1,118 @@
+// ==========================================================================
+// SC.TableView
+// ==========================================================================
+
+require('views/collection/collection') ;
+require('views/label');
+
+/** @class
+
+  Displays a table view with columns
+
+  @extends SC.CollectionView
+  @author    Charles Jolley  
+  @version 1.0
+*/
+SC.TableView = SC.CollectionView.extend(
+/** @scope SC.TableView.prototype */ {
+  
+  emptyElement: '<div class="sc-table-view"></div>',
+  
+  /** 
+    The common row height for list view items.
+    
+    If you set this property, then the TableView 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.LabelView,
+  
+  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 */
+  layoutItemView: function(itemView, contentIndex, firstLayout) {
+    if (!itemView) debugger ;
+    SC.Benchmark.start('SC.TableView.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 (firstLayout || !SC.rectsEqual(itemView.get('frame'), f)) {
+      itemView.set('frame', f) ;      
+    }
+    SC.Benchmark.end('SC.TableView.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 ;
+  },
+  
+  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('innerFrame') ;
+    var sf = this.get('scrollFrame') ;
+    var ret = Math.floor(((loc.y - f.y - sf.y) / this.get('rowHeight')) + 0.4) ;
+    return ret ;
+  }
+  
+}) ;