Permalink
Browse files

Added column specific cell rendering.

  • Loading branch information...
1 parent 76343e3 commit 190abd9d6c1ecf7463d9db75ce4d6474783f2c05 Wesley Workman committed Apr 12, 2012
@@ -1,4 +1,6 @@
+sc_require('delegates/stars_cell_delegate');
+
TableTest.columnsController = SC.ArrayController.create({
content: [
SC.TableColumn.create({
@@ -37,8 +39,10 @@ TableTest.columnsController = SC.ArrayController.create({
SC.TableColumn.create({
title: "Some Stars!",
- width: 110,
- canResize: NO
+ width: 106,
+ isResizable: NO,
+ contentKey: 'stars',
+ cellDelegate: SC.StarsCellDelegate
}),
SC.TableColumn.create({
@@ -1,72 +1,12 @@
-TableTest.RecordModel = SC.Object.extend({
-
- tasks: [],
-
- tasksIcon: function() {
- return this.getPath('tasks.length') > 0 ? (this.get('treeItemIsExpanded') ? 'sc-icon-minus-16' : 'sc-icon-plus-16') : null;
- }.property('treeItemIsExpanded', 'tasks', 'tasks.length').cacheable(),
-
- tasksLabel: function() {
- var length = this.getPath('tasks.length') ;
- return (length > 0) ? '(%@)'.fmt(length) : '';
- }.property('treeItemIsExpanded', 'tasks', 'tasks.length').cacheable(),
-
- tasksToggle: function() {
- this.set('treeItemIsExpanded', !this.get('treeItemIsExpanded'));
- },
-
- treeItemIsExpanded: NO,
- treeItemChildren: function() {
- return this.get('tasks');
- }.property(),
-
- init: function() {
- sc_super();
- var that = this,
- index = this.get('index');
-
- if(index === 1 || index === 4 || index === 6) {
- this.set('tasks', [ { name: 'Hello World' }, { name: 'Foo Bar' } ].map(function(x) {
- return TableTest.TaskModel.create(x, { parent: that });
- }));
- }
- }
-});
-
-TableTest.TaskModel = SC.Object.extend({
- name: '',
- number: 0,
-
- init: function() {
- sc_super();
- this.set('number', TableTest.TaskModel.uid());
- },
-
- removeTask: function() {
- var parent = this.get('parent'),
- tasks = SC.get(parent, 'tasks');
-
- if(tasks) { tasks.removeObject(this); }
- this.destroy();
- }
-});
-
-TableTest.TaskModel.mixin({
- _suid: 1200,
- uid: function() {
- return this._suid++;
- }
-});
-
TableTest.TreeNodeBinding = SC.Binding.transform(function(value, binding) {
// This creates the root object for the tree
return SC.Object.create({
name: 'root',
treeItemIsExpanded: YES,
treeItemChildren: function() {
var values = [],
- src = value.map(function(x) { return TableTest.RecordModel.create(x); }),
+ src = value.map(function(x) { return TableTest.PersonModel.create(x); }),
currentItem;
for(var i = 0; i < src.get('length'); i++) {
@@ -1,6 +1,4 @@
-sc_require('mixins/row_delegate');
-
SC.GroupedRowDelegated = SC.Object.create(SC.RowDelegate, {
isRowDelegateFor: function(dataSource) {
var content = dataSource.get('content');
@@ -1,6 +1,4 @@
-sc_require('mixins/row_delegate');
-
SC.InlineEditRowDelegate = SC.Object.create(SC.RowDelegate, {
isRowDelegateFor: function(dataSource) {
@@ -0,0 +1,66 @@
+
+SC.StarsCellDelegate = SC.Object.create(SC.CellDelegate, {
+
+ renderTableCell: function(dataSource, context, column, columnIndex) {
+ var content = dataSource.get('content'),
+ numStars = content.get(column.get('contentKey')) * 1, i;
+ var on = ['', '', '', '', ''];
+
+ // The content template, this._STARS_TEMPLATE, contains placeholders for adding
+ // classes to show which stars should be 'lit'. Replace appropriate placeholders
+ // with the 'on' class and the rest with empty strings. Calls to renderContext methods are
+ // quite expensive relatively speaking so this way we reduce everything down to one
+ // renderContext.push() call below.
+ for (i = 0; i < numStars; i++) {
+ on[i] = 'on';
+ }
+
+ return context.push(this._STARS_TEMPLATE.fmt.apply(this._STARS_TEMPLATE, on));
+ },
+
+
+ mouseDown: function(dataSource, evt, column, columnIndex) {
+ var classNames = evt.target.className, n, i,
+ contentKey = column.get('contentKey');
+
+ // Special column rendering demo: look for a mouse-down on a star and set a row's value based
+ // on which star was clicked
+ if (classNames) {
+ classNames = classNames.split(' ');
+
+ for (i = 0; i < classNames.length; i++) {
+ if (classNames[i].substr(0, 6) === 'stars-') {
+ n = classNames[i].substr(6, classNames[i].length - 6) * 1;
+ dataSource.setPath('content.' + contentKey, n);
+ dataSource.displayDidChange();
+ }
+ }
+ }
+
+
+ return YES;
+ },
+
+ mouseUp: function(dataSource, evt, column, columnIndex) {
+ return YES;
+ },
+
+ touchStart: function(dataSource, evt, column, columnIndex) {
+ return this.mouseDown(dataSource, evt, column, columnIndex);
+ },
+
+ touchEnd: function(dataSource, evt, column, columnIndex) {
+ return this.mouseUp(dataSource, evt, column, columnIndex);
+ },
+
+
+
+ // PRIVATE PROPERTIES
+
+ /*
+ Template string for rendering the stars column -- we'll substitute an 'on' class at render time for the '%@'
+ in any star divs that should be 'lit', and an empty string for the rest.
+ */
+ _STARS_TEMPLATE: '<div class=\"stars-0\"></div><div class=\"stars-1 %@\"></div><div class=\"stars-2 %@\"></div><div class=\"stars-3 %@\"></div><div class=\"stars-4 %@\"></div><div class=\"stars-5 %@\"></div>'
+
+});
@@ -0,0 +1,40 @@
+
+TableTest.PersonModel = SC.Object.extend({
+
+ stars: 0,
+
+ // ...........................................................
+ // Tasks
+ // ...........................................................
+ tasks: [],
+
+ tasksIcon: function() {
+ return this.getPath('tasks.length') > 0 ? (this.get('treeItemIsExpanded') ? 'sc-icon-minus-16' : 'sc-icon-plus-16') : null;
+ }.property('treeItemIsExpanded', 'tasks', 'tasks.length').cacheable(),
+
+ tasksLabel: function() {
+ var length = this.getPath('tasks.length') ;
+ return (length > 0) ? '(%@)'.fmt(length) : '';
+ }.property('treeItemIsExpanded', 'tasks', 'tasks.length').cacheable(),
+
+ tasksToggle: function() {
+ this.set('treeItemIsExpanded', !this.get('treeItemIsExpanded'));
+ },
+
+ treeItemIsExpanded: NO,
+ treeItemChildren: function() {
+ return this.get('tasks');
+ }.property(),
+
+ init: function() {
+ sc_super();
+ var that = this,
+ index = this.get('index');
+
+ if(index === 1 || index === 4 || index === 6) {
+ this.set('tasks', [ { name: 'Hello World' }, { name: 'Foo Bar' } ].map(function(x) {
+ return TableTest.TaskModel.create(x, { parent: that });
+ }));
+ }
+ }
+});
@@ -0,0 +1,27 @@
+/**
+ Simple Tasks model. Used by the person model.
+ */
+TableTest.TaskModel = SC.Object.extend({
+ name: '',
+ number: 0,
+
+ init: function() {
+ sc_super();
+ this.set('number', TableTest.TaskModel.uid());
+ },
+
+ removeTask: function() {
+ var parent = this.get('parent'),
+ tasks = SC.get(parent, 'tasks');
+
+ if(tasks) { tasks.removeObject(this); }
+ this.destroy();
+ }
+});
+
+TableTest.TaskModel.mixin({
+ _suid: 1200,
+ uid: function() {
+ return this._suid++;
+ }
+});
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -71,3 +71,63 @@
height: 16px;
@include slice("images/icon-minus-16.png");
}
+
+.stars-0 {
+ top: 6px;
+ left: 0px;
+ width: 10px;
+ height: 16px;
+}
+
+.stars-1 {
+ top: 6px;
+ left: 10px;
+ width: 16px;
+ height: 16px;
+ background-image: static_url('images/mini_888888.png');
+ background-position: -224px -112px;
+}
+
+.stars-2 {
+ top: 6px;
+ left: 26px;
+ width: 16px;
+ height: 16px;
+ background-image: static_url('images/mini_888888.png');
+ background-position: -224px -112px;
+}
+
+.stars-3 {
+ top: 6px;
+ left: 42px;
+ width: 16px;
+ height: 16px;
+ background-image: static_url('images/mini_888888.png');
+ background-position: -224px -112px;
+}
+
+.stars-4 {
+ top: 6px;
+ left: 58px;
+ width: 16px;
+ height: 16px;
+ background-image: static_url('images/mini_888888.png');
+ background-position: -224px -112px;
+}
+
+.stars-5 {
+ top: 6px;
+ left: 74px;
+ width: 16px;
+ height: 16px;
+ background-image: static_url('images/mini_888888.png');
+ background-position: -224px -112px;
+}
+
+/*
+ When a star is on, give it a darker color
+*/
+.stars-1.on, .stars-2.on, .stars-3.on, .stars-4.on, .stars-5.on {
+ background-image: static_url('images/mini_222222.png');
+ background-position: -224px -112px;
+}
@@ -1,4 +1,7 @@
-SC.StandardCellDelegate = SC.Object.create({
+
+sc_require('mixins/cell_delegate');
+
+SC.StandardCellDelegate = SC.Object.create(SC.CellDelegate, {
/**
Column Values
@@ -0,0 +1,26 @@
+
+SC.CellDelegate = {
+
+ isCellDelegate: YES,
+
+ renderTableCell: function(dataSource, context, column, columnIndex) {
+
+ },
+
+ mouseDown: function(dataSource, evt, column, columnIndex) {
+ return NO;
+ },
+
+ mouseUp: function(dataSource, evt, column, columnIndex) {
+ return NO;
+ },
+
+ touchStart: function(dataSource, evt, column, columnIndex) {
+ return NO;
+ },
+
+ touchEnd: function(dataSource, evt, column, columnIndex) {
+ return NO;
+ }
+
+};

0 comments on commit 190abd9

Please sign in to comment.