sproutcore 1.0.1046 → 1.0.1049.pre.1

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

@@ -0,0 +1,62 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('views/table_row');
+
+SC.TableCellView = SC.View.extend({
+  
+  classNames: ['sc-table-cell'],
+  
+  column: null,
+  escapeHTMLBinding: SC.Binding.oneWay('.column.escapeHTML'),
+  formatter: SC.Binding.oneWay('.column.formatter'),
+  
+  displayValue: function() {
+    var value = this.get('content') ;
+    
+    // 1. apply the formatter
+    var formatter = this.get('column').get('formatter');
+    if (formatter) {
+      var formattedValue = (SC.typeOf(formatter) === SC.T_FUNCTION) ? formatter(value, this) : formatter.fieldValueForObject(value, this) ;
+      if (!SC.none(formattedValue)) value = formattedValue ;
+    }
+    
+    if (SC.typeOf(value) === SC.T_ARRAY) {
+      var ary = [];
+      for(var idx=0;idx<value.get('length');idx++) {
+        var x = value.objectAt(idx) ;
+        if (!SC.none(x) && x.toString) x = x.toString() ;
+        ary.push(x) ;
+      }
+      value = ary.join(',') ;
+    }
+    
+    if (!SC.none(value) && value.toString) value = value.toString() ;
+    
+    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
+    
+    return value ;
+  }.property('content', 'escapeHTML', 'formatter').cacheable(),
+  
+  render: function(context, firstTime) {
+    context.push(this.get('displayValue'));
+  },
+  
+  init: function() {
+    var column = this.get('column');
+    
+    column.addObserver('width',    this, '_sctcv_layoutDidChange');
+    column.addObserver('maxWidth', this, '_sctcv_layoutDidChange');
+    column.addObserver('minWidth', this, '_sctcv_layoutDidChange');
+    
+  },
+    
+  _sctcv_layoutDidChange: function(sender, key, value, rev) {
+    var pv = this.get('parentView');
+    SC.run( function() { pv.layoutChildViews(); });
+  }
+});

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

@@ -0,0 +1,158 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('views/table');
+sc_require('views/table_header');
+
+/** @class
+
+  The head of a `SC.TableView`. It's a special row of the table that holds
+  the column header cells.
+  
+  @extends SC.View
+  @since SproutCore 1.1
+*/
+SC.TableHeadView = SC.View.extend({  
+/** @scope SC.TableHeadView.prototype */
+  
+  layout: { height: 18, left: 0, right: 0, top: 0 },
+
+  classNames: ['sc-table-head'],
+
+  cells: [],
+  
+  acceptsFirstResponder: YES,
+
+  dragOrder: null,
+  
+  init: function() {
+    // TODO: Figure out why the `columns` observer doesn't work
+    this._scthv_handleChildren();
+  },
+    
+  columns: function() {
+    return this.get('parentView').get('columns');
+  }.property(),  
+  
+  renderChildViews: function(context, firstTime) {
+    var cells = this.get('cells'), cell, idx;
+    for (idx = 0; idx < cells.get('length'); idx++) {
+      cell = cells.objectAt(idx);
+      context = context.begin(cell.get('tagName'));
+      cell.prepareContext(context, firstTime);
+      context = context.end();
+    }
+    return context;
+  },
+  
+  layoutChildViews: function() {
+    var cells = this.get('cells'), cell, idx;
+    for (idx = 0; idx < cells.get('length'); idx++) {
+      cell = cells.objectAt(idx);
+      cell.adjust(this._scthv_layoutForHeaderAtColumnIndex(idx));
+      cell.updateLayout();
+    }
+  },
+
+  
+  // ..........................................................
+  // INTERNAL SUPPORT
+  //
+  
+  _scthv_enterDragMode: function() {
+    var order = [], columns = this.get('columns'), idx;
+    
+    for (idx = 0; idx < columns.get('length'); idx++) {
+      order.push(columns.objectAt(idx).get('key'));
+    }
+    
+    this.set('dragOrder', order);
+  },
+  
+  _scthv_changeDragOrder: function(draggedColumnIndex, leftOfIndex) {
+    var dragOrder = this.get('dragOrder'),
+     draggedColumn = dragOrder.objectAt(draggedColumnIndex);
+    
+    dragOrder.removeAt(idx);
+    dragOrder.insertAt(leftOfIndex, draggedColumn);
+  },
+  
+  _scthv_reorderDragColumnViews: function() {
+    
+  }.observes('dragOrder'),
+  
+  
+  _scthv_columnContentFromTableContent: function(tableContent, columnIndex) {
+    var column = this.get('columns').objectAt(columnIndex),
+        key = column.get('key'),
+        ret = [],
+        idx;
+        
+    if (!tableContent) return ret;
+        
+    var tableView = this.get('parentView'),
+        length = tableContent.get('length');
+        // visibleIndexes = tableView.contentIndexesInRect(
+        //     tableView.get('frame')).toArray();
+            
+    for (idx = 0; idx < length; idx++) {
+      //visibleIndex = visibleIndexes.objectAt(idx);
+      ret.push(tableContent.objectAt(idx).get(key));
+    }
+    
+    return ret;
+  },
+  
+  _scthv_layoutForHeaderAtColumnIndex: function(index) {
+    var columns = this.get('columns'),
+        rowHeight = this.get('parentView').get('rowHeight'),
+        layout = {},
+        left = 0, idx;
+        
+    for (idx = 0; idx < index; idx++) {
+      left += columns.objectAt(idx).get('width');
+    }
+    
+    return {
+      left:   left,
+      width:  columns.objectAt(index).get('width'),
+      height: rowHeight
+    };
+  },
+  
+  _scthv_handleChildren: function() {
+    var columns = this.get('columns');
+    var tableView = this.get('parentView');
+    var tableContent = tableView.get('content');
+    
+    var column, key, label, content, cells = [], cell, idx;
+    for (idx = 0; idx < columns.get('length'); idx++) {
+      column = columns.objectAt(idx);
+      key    = column.get('key');
+      label  = column.get('label');
+      content = this._scthv_columnContentFromTableContent(tableContent, idx);
+      cell   = this._scthv_createTableHeader(column, label, content, idx);
+      cells.push(cell);
+    }
+    this.set('cells', cells);
+    if (cells.length > 0)
+      this.replaceAllChildren(cells);
+  },
+  
+  _scthv_createTableHeader: function(column, label, content, idx) {
+    var tableView = this.get('parentView');
+    var cell = SC.TableHeaderView.create({
+      column:  column,
+      label: label,
+      content: content,
+      tableView: tableView,
+      columnIndex: idx
+    });
+    return cell;
+  }
+});
+

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

@@ -0,0 +1,212 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('views/table');
+
+/** @class
+  The views that make up the column header cells in a typical `SC.TableView`.
+  
+  In addition, this view is in charge of rendering the _entire_ table column
+  (both header and body) when the table is in the "drag-reorder" state. This
+  is the state that occurs when the user clicks and holds on a table header,
+  then drags that header horizontally.
+
+  @extends SC.View
+  @since SproutCore 1.1
+*/
+SC.TableHeaderView = SC.View.extend({
+  
+  classNames: ['sc-table-header'],
+  
+  displayProperties: ['sortState', 'isInDragMode'],
+  
+  acceptsFirstResponder: YES,
+  
+  isInDragMode: NO,
+  
+  hasHorizontalScroller: NO,
+  hasVerticalScroller: NO,
+  
+  childViews: ['dragModeView'],
+  
+  
+  /**
+    The view that is visible when the column is in drag mode.
+  */
+  dragModeView: SC.ListView.design({
+    isVisible: NO,
+    
+    layout: { left: 0, right: 0, bottom: 0 },
+    
+    init: function() {
+      var tableHeaderView = this.get('parentView');
+      
+      if (tableHeaderView) {
+        tableHeaderView.addObserver('isInDragMode', this,
+            '_scthv_dragModeDidChange');
+      }
+      
+    },
+    
+    _scthv_dragModeDidChange: function() {
+      // var isInDragMode = this.get('tableHeaderView').get('isInDragMode');
+      // this.set('isVisible', isInDragMode);
+    }
+  }),
+
+  /**
+    The SC.TableColumn object this header cell is bound to.
+  */
+  column:  null,
+  
+  render: function(context, firstTime) {
+    var column = this.get('column'), icon = column.get('icon'), html;
+    var span = context.begin('span');
+    if (icon) {
+      html = '<img src="%@" class="icon" />'.fmt(icon);
+      span.push(html);
+    } else {
+      span.push(this.get('label'));
+    }
+    span.end();
+  },
+    
+  // ========================================================
+  // = For the column we look after, set up some observers. =
+  // ========================================================
+  init: function() {
+    var column = this.get('column');
+    column.addObserver('width',     this, '_scthv_layoutDidChange');
+    column.addObserver('maxWidth',  this, '_scthv_layoutDidChange');
+    column.addObserver('minWidth',  this, '_scthv_layoutDidChange');
+    column.addObserver('sortState', this, '_scthv_sortStateDidChange');
+    column.addObserver('tableContent', this, '_scthv_tableContentDidChange');
+    
+    // var tableContent = column.get('tableContent');
+    // var columnContent = this._scthv_columnContentFromTableContent(tableContent);
+    // this.set('content', columnContent);
+    
+    return sc_super();
+  },
+  
+  /**
+    The sortState of the header view's column.
+  */
+  sortState: function() {
+    return this.get('column').get('sortState');
+  }.property(),
+  
+  mouseDown: function(evt) {
+    var tableView = this.get('tableView');    
+    return tableView ? tableView.mouseDownInTableHeaderView(evt, this) :
+     sc_super();
+  },
+  
+  mouseUp: function(evt) {
+    var tableView = this.get('tableView');
+    return tableView ? tableView.mouseUpInTableHeaderView(evt, this) :
+     sc_super();
+  },
+  
+  mouseDragged: function(evt) {
+    var tableView = this.get('tableView');
+    return tableView ? tableView.mouseDraggedInTableHeaderView(evt, this) :
+     sc_super();
+  },
+  
+  _scthv_dragViewForHeader: function() {
+    var dragLayer = this.get('layer').cloneNode(true);
+    var view = SC.View.create({ layer: dragLayer, parentView: this });
+    
+    // cleanup weird stuff that might make the drag look out of place
+    SC.$(dragLayer).css('backgroundColor', 'transparent')
+      .css('border', 'none')
+      .css('top', 0).css('left', 0);      
+    
+    return view;
+  },
+  
+  _scthv_enterDragMode: function() {
+    this.set('isInDragMode', YES);
+  },
+  
+  _scthv_exitDragMode: function() {
+    this.set('isInDragMode', NO);
+  },
+  
+  // _scthv_hideViewInDragMode: function() {    
+  //   var shouldBeVisible = !this.get('isInDragMode'), layer = this.get('layer');
+  //   console.log('should be visible: %@'.fmt(!this.get('isInDragMode')));
+  //   SC.RunLoop.begin();
+  //   SC.$(layer).css('display', shouldBeVisible ? 'block' : 'none');
+  //   SC.RunLoop.end();
+  // }.observes('isInDragMode'),
+  
+  // _scthv_setupDragMode: function() {
+  //   var isInDragMode = this.get('isInDragMode');
+  //   if (isInDragMode) {
+  //     });      
+  //   } else {
+  //     //
+  //   }
+  //   
+  //   
+  // }.observes('isInDragMode'),
+  
+  _scthv_dragModeViewDidChange: function() {
+    var dragModeView = this.get('dragModeView');
+    if (dragModeView && dragModeView.set) {
+      dragModeView.set('tableHeadView', this);
+      dragModeView.set('tableView', this.get('tableView'));
+    }
+  }.observes('dragModeView'),
+  
+  _scthv_layoutDidChange: function(sender, key, value, rev) {
+    var pv = this.get('parentView');
+    pv.invokeOnce(pv.layoutChildViews);
+    
+    // Tell the container view how tall the header is so that it can adjust
+    // itself accordingly.
+    var layout = this.get('layout');    
+    //this.get('dragModeView').adjust('top', layout.height);
+  },
+  
+  // When our column's tableContent property changes, we need to go back and get our column content
+  _scthv_tableContentDidChange: function() {
+    var tableContent = this.get('column').get('tableContent');    
+    var columnContent = this.get('parentView')._scthv_columnContentFromTableContent(tableContent, this.get('columnIndex'));
+    this.set('content', columnContent);
+  },
+  
+  _scthv_sortStateDidChange: function() {
+    SC.RunLoop.begin();
+    var sortState  = this.get('column').get('sortState');
+    var classNames = this.get('classNames');
+    
+    classNames.removeObject('sc-table-header-sort-asc');
+    classNames.removeObject('sc-table-header-sort-desc');
+    classNames.removeObject('sc-table-header-sort-active');
+    
+    if (sortState !== null) {
+      classNames.push('sc-table-header-sort-active');
+    }
+    
+    if (sortState === SC.SORT_ASCENDING) {
+      classNames.push('sc-table-header-sort-asc');
+    }
+    
+    if (sortState === SC.SORT_DESCENDING) {
+      classNames.push('sc-table-header-sort-desc');
+    }
+    
+    // TODO: Figure out why it's not enough to simply call
+    // `displayDidChange` here.
+    this.displayDidChange();
+    this.invokeOnce('updateLayer');
+    SC.RunLoop.end();
+  }
+});

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

@@ -0,0 +1,155 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+  
+  The default example view for a table row. Belongs to a SC.TableView.
+
+  @extends SC.View
+  @since SproutCore 1.1
+*/
+
+SC.TableRowView = SC.View.extend({
+/** @scope SC.TableRowView.prototype */ 
+
+  //layout: { height: 18, left: 0, right: 0, top: 0 },
+  
+  // ..........................................................
+  // PROPERTIES
+  //
+  
+  classNames: ['sc-table-row'],
+  
+  cells: [],
+
+  acceptsFirstResponder: YES,
+  
+  /**
+    A reference to the row's encompassing TableView.
+    
+    @property
+    @type SC.TableView
+  */
+  tableView: null,
+  
+  // ..........................................................
+  // METHODS
+  // 
+  
+  init: function() {
+    // TODO: Figure out why the `columns` observer doesn't work
+    this._sctrv_handleChildren();
+  },
+  
+  /**
+    A collection of `SC.TableColumn` objects.
+    
+    @property
+    @type Array
+  */
+  columns: function() {
+    return this.get('tableView').get('columns');
+  }.property(),
+  
+  prepareContext: function(context, firstTime) {
+    sc_super();
+    context.setClass('sel', this.get('isSelected'));
+  },
+  
+  render: function(context, firstTime) {
+    var classArray = [];
+    
+    classArray.push((this.get('contentIndex')%2 === 0) ? 'even' : 'odd');
+    context.addClass(classArray);
+    
+    sc_super();
+  },
+  
+  renderChildViews: function(context, firstTime) {
+    var cells = this.get('cells'), cell, idx;
+    for (idx = 0; idx < cells.get('length'); idx++) {
+      cell = cells.objectAt(idx);
+      context = context.begin(cell.get('tagName'));
+      cell.prepareContext(context, firstTime);
+      context = context.end();
+    }
+    return context;
+  },
+  
+  layoutChildViews: function() {
+    var cells = this.get('cells'), columns = this.get('columns'),
+        cell, column, idx;
+    var left = 0, width, rowHeight = this.get('tableView').get('rowHeight');
+    
+    for (idx = 0; idx < cells.get('length'); idx++) {
+      cell = cells.objectAt(idx);
+      column = columns.objectAt(idx);
+      width = column.get('width');
+      
+      cell.adjust({
+        left: left,
+        width: width,
+        height: rowHeight
+      });
+      
+      left += width;
+      cell.updateLayout();
+    }
+  },
+  
+  // ..........................................................
+  // INTERNAL SUPPORT
+  // 
+  
+  _sctrv_layoutForChildAtColumnIndex: function(index) {
+    var columns = this.get('columns'),
+        rowHeight = this.get('tableView').get('rowHeight'),
+        layout = {},
+        left = 0, idx;
+        
+    for (idx = 0; idx < index; idx++) {
+      left += columns.objectAt(idx).get('width');
+    }
+    
+    return {
+      left:   left,
+      width:  columns.objectAt(index).get('width'),
+      height: rowHeight
+    };
+  },  
+  
+  _sctrv_createTableCell: function(column, value) {
+    var cell = SC.TableCellView.create({
+      column:  column,
+      content: value
+    });
+    return cell;
+  },
+  
+  // The row needs to redraw when the selection state changes.
+  _sctrv_handleSelection: function() {
+    this.displayDidChange();
+  }.observes('isSelected'),
+  
+  _sctrv_handleChildren: function() {
+    var content = this.get('content'), columns = this.get('columns');
+    
+    this.removeAllChildren();
+    var column, key, value, cells = [], cell, idx;
+    for (idx = 0; idx < columns.get('length'); idx++) {
+      column = columns.objectAt(idx);
+      key    = column.get('key');
+      value  = content ? content.getPath(key) : "";
+      cell   = this._sctrv_createTableCell(column, value);
+      cells.push(cell);
+      this.appendChild(cell);
+    }
+    
+    this.set('cells', cells);
+  }
+});
+