datatable-debug.js revision a9469f39cbc0ff8977226a5e0469330341c5186e
DATATABLE = "datatable",
COLUMN = "column",
FOCUS = "focus",
KEYDOWN = "keydown",
MOUSEENTER = "mouseenter",
MOUSELEAVE = "mouseleave",
MOUSEUP = "mouseup",
MOUSEDOWN = "mousedown",
CLICK = "click",
DBLCLICK = "dblclick",
TEMPLATE_TABLE = '<table></table>',
TEMPLATE_COL = '<col></col>',
TEMPLATE_TH = '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}" abbr="{abbr}"><div class="'+CLASS_LINER+'">{value}</div></th>',
TEMPLATE_TR = '<tr id="{id}"></tr>',
TEMPLATE_TD = '<td headers="{headers}" class="{classnames}"><div class="'+CLASS_LINER+'">{value}</div></td>',
TEMPLATE_VALUE = '{value}',
/**
* The Column class defines and manages attributes of Columns for DataTable.
*
* @class Column
* @extends Widget
* @constructor
*/
}
/////////////////////////////////////////////////////////////////////////////
//
// STATIC PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
/**
* Class name.
*
* @property NAME
* @type String
* @static
* @final
* @value "column"
*/
NAME: "column",
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTES
//
/////////////////////////////////////////////////////////////////////////////
ATTRS: {
/**
* @attribute id
* @description Unique internal identifier, used to stamp ID on TH element.
* @type String
* @readOnly
*/
id: {
valueFn: "_defaultId",
readOnly: true
},
/**
* @attribute key
* @description User-supplied identifier. Defaults to id.
* @type String
*/
key: {
valueFn: "_defaultKey"
},
/**
* @attribute field
* @description Points to underlying data field (for sorting or formatting,
* for example). Useful when column doesn't hold any data itself, but is
* just a visual representation of data from another column or record field.
* Defaults to key.
* @type String
*/
field: {
valueFn: "_defaultField"
},
/**
* @attribute label
* @description Display label for column header. Defaults to key.
* @type String
*/
label: {
valueFn: "_defaultLabel"
},
/**
* @attribute children
* @description Array of child column definitions (for nested headers).
* @type String
*/
children: {
value: null
},
/**
* @attribute abbr
* @description TH abbr attribute.
* @type String
*/
abbr: {
value: ""
},
//TODO: support custom classnames
// TH CSS classnames
classnames: {
readOnly: true,
getter: "_getClassnames"
},
// Column formatter
formatter: {},
//requires datatable-sort
sortable: {
value: false
},
//sortOptions:defaultDir, sortFn, field
//TODO: support editable columns
// Column editor
editor: {},
//TODO: support resizeable columns
//TODO: support setting widths
// requires datatable-colresize
width: {},
resizeable: {},
minimized: {},
minWidth: {},
maxAutoWidth: {}
}
});
/////////////////////////////////////////////////////////////////////////////
//
// PROTOTYPE
//
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTE HELPERS
//
/////////////////////////////////////////////////////////////////////////////
/**
* @method _defaultId
* @description Return ID for instance.
* @returns String
* @private
*/
_defaultId: function() {
return Y.guid();
},
/**
* @method _defaultKey
* @description Return key for instance. Defaults to ID if one was not
* provided.
* @returns String
* @private
*/
_defaultKey: function(key) {
},
/**
* @method _defaultField
* @description Return field for instance. Defaults to key if one was not
* provided.
* @returns String
* @private
*/
_defaultField: function(field) {
},
/**
* @method _defaultLabel
* @description Return label for instance. Defaults to key if one was not
* provided.
* @returns String
* @private
*/
_defaultLabel: function(label) {
},
/**
* Updates the UI if changes are made to abbr.
*
* @method _afterAbbrChange
* @param e {Event} Custom event for the attribute change.
* @private
*/
_afterAbbrChange: function (e) {
this._uiSetAbbr(e.newVal);
},
/////////////////////////////////////////////////////////////////////////////
//
// PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
/**
* Reference to Column's current position index within its Columnset's keys
* array, if applicable. This property only applies to non-nested and bottom-
* level child Columns. Value is set by Columnset code.
*
* @property keyIndex
* @type Number
*/
keyIndex: null,
/**
* @property headers
* @description Array of TH IDs associated with this column, for TD "headers"
* attribute. Value is set by Columnset code
* @type String[]
*/
headers: null,
/**
* Number of cells the header spans. Value is set by Columnset code.
*
* @property colSpan
* @type Number
* @default 1
*/
colSpan: 1,
/**
* Number of rows the header spans. Value is set by Columnset code.
*
* @property rowSpan
* @type Number
* @default 1
*/
rowSpan: 1,
/**
* Column's parent Column instance, if applicable. Value is set by Columnset
* code.
*
* @property parent
* @type Y.Column
*/
parent: null,
/**
* The Node reference to the associated TH element.
*
* @property thNode
* @type Y.Node
*/
thNode: null,
/*TODO
* The Node reference to the associated liner element.
*
* @property thLinerNode
* @type Y.Node
thLinerNode: null,*/
/////////////////////////////////////////////////////////////////////////////
//
// METHODS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Initializer.
*
* @method initializer
* @param config {Object} Config object.
* @private
*/
initializer: function(config) {
},
/**
* Destructor.
*
* @method destructor
* @private
*/
destructor: function() {
},
/**
* Returns classnames for Column.
*
* @method _getClassnames
* @private
*/
_getClassnames: function () {
/*var allClasses;
// Add CSS classes
if(lang.isString(oColumn.className)) {
// Single custom class
allClasses = [oColumn.className];
}
else if(lang.isArray(oColumn.className)) {
// Array of custom classes
allClasses = oColumn.className;
}
else {
// no custom classes
allClasses = [];
}
// Hook for setting width with via dynamic style uses key since ID is too disposable
allClasses[allClasses.length] = this.getId() + "-col-" +oColumn.getSanitizedKey();
// Column key - minus any chars other than "A-Z", "a-z", "0-9", "_", "-", ".", or ":"
allClasses[allClasses.length] = "yui-dt-col-" +oColumn.getSanitizedKey();
var isSortedBy = this.get("sortedBy") || {};
// Sorted
if(oColumn.key === isSortedBy.key) {
allClasses[allClasses.length] = isSortedBy.dir || '';
}
// Hidden
if(oColumn.hidden) {
allClasses[allClasses.length] = DT.CLASS_HIDDEN;
}
// Selected
if(oColumn.selected) {
allClasses[allClasses.length] = DT.CLASS_SELECTED;
}
// Sortable
if(oColumn.sortable) {
allClasses[allClasses.length] = DT.CLASS_SORTABLE;
}
// Resizeable
if(oColumn.resizeable) {
allClasses[allClasses.length] = DT.CLASS_RESIZEABLE;
}
// Editable
if(oColumn.editor) {
allClasses[allClasses.length] = DT.CLASS_EDITABLE;
}
if(aAddClasses) {
allClasses = allClasses.concat(aAddClasses);
}
return allClasses.join(' ');*/
},
////////////////////////////////////////////////////////////////////////////
//
// SYNC
//
////////////////////////////////////////////////////////////////////////////
/**
* Syncs UI to intial state.
*
* @method syncUI
* @private
*/
syncUI: function() {
},
/**
* Updates abbr.
*
* @method _uiSetAbbr
* @param val {String} New abbr.
* @protected
*/
_uiSetAbbr: function(val) {
}
});
/**
* The Columnset class defines and manages a collection of Columns.
*
* @class Columnset
* @extends Base
* @constructor
*/
}
/////////////////////////////////////////////////////////////////////////////
//
// STATIC PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
/**
* Class name.
*
* @property NAME
* @type String
* @static
* @final
* @value "columnset"
*/
NAME: "columnset",
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTES
//
/////////////////////////////////////////////////////////////////////////////
ATTRS: {
/**
* @attribute definitions
* @description Array of column definitions that will populate this Columnset.
* @type Array
*/
definitions: {
setter: "_setDefinitions"
}
}
});
/////////////////////////////////////////////////////////////////////////////
//
// PROTOTYPE
//
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTE HELPERS
//
/////////////////////////////////////////////////////////////////////////////
/**
* @method _setDefinitions
* @description Clones definitions before setting.
* @param definitions {Array} Array of column definitions.
* @returns Array
* @private
*/
_setDefinitions: function(definitions) {
return Y.clone(definitions);
},
/////////////////////////////////////////////////////////////////////////////
//
// PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
/**
* Top-down tree representation of Column hierarchy. Used to create DOM
* elements.
*
* @property tree
* @type Y.Column[]
*/
tree: null,
/**
* Hash of all Columns by ID.
*
* @property idHash
* @type Object
*/
idHash: null,
/**
* Hash of all Columns by key.
*
* @property keyHash
* @type Object
*/
keyHash: null,
/**
* Array of only Columns that are meant to be displayed in DOM.
*
* @property keys
* @type Y.Column[]
*/
keys: null,
/////////////////////////////////////////////////////////////////////////////
//
// METHODS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Initializer. Generates all internal representations of the collection of
* Columns.
*
* @method initializer
* @param config {Object} Config object.
* @private
*/
initializer: function() {
// DOM tree representation of all Columns
var tree = [],
// Hash of all Columns by ID
idHash = {},
// Hash of all Columns by key
keyHash = {},
// Flat representation of only Columns that are meant to display data
keys = [],
// Original definitions
self = this;
// Internal recursive function to define Column instances
var i=0,
// One level down
depth++;
// Create corresponding dom node if not already there for this depth
}
// Parse each node at this depth for attributes and any children
for(; i<len; ++i) {
currentDefinition = YLang.isString(currentDefinition) ? {key:currentDefinition} : currentDefinition;
// Instantiate a new Column for each node
// Cross-reference Column ID back to the original object literal definition
// Add the new Column to the hash
// Assign its parent as an attribute, if applicable
if(parent) {
}
// The Column has descendants
// The children themselves must also be parsed for Column instances
}
}
// This Column does not have any children
else {
// Default is already 1
//column.colSpan = 1;
}
// Add the Column to the top-down dom tree
}
depth--;
}
// Parse out Column instances from the array of object literals
// Save to the Columnset instance
this._setRowSpans();
this._setHeaders();
},
/**
* Destructor.
*
* @method destructor
* @private
*/
destructor: function() {
},
/////////////////////////////////////////////////////////////////////////////
//
// COLUMN HELPERS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Cascade certain properties to children if not defined on their own.
*
* @method _cascadePropertiesToChildren
* @private
*/
//TODO: this is all a giant todo
var i = 0,
// Cascade certain properties to children if not defined on their own
for(; i<len; ++i) {
child = currentChildren[i];
}
}
}
}
}
}
}
}
}
}
},
/**
* @method _setColSpans
* @description Calculates and sets colSpan attribute on given Column.
* @param column {Array} Column instance.
* @param definition {Object} Column definition.
* @private
*/
// Determine COLSPAN value for this Column
var terminalChildNodes = 0;
function countTerminalChildNodes(ancestor) {
i = 0,
// Drill down each branch and count terminal nodes
for(; i<len; ++i) {
// Keep drilling down
}
// Reached branch terminus
else {
}
}
}
},
/**
* @method _setRowSpans
* @description Calculates and sets rowSpan attribute on all Columns.
* @private
*/
_setRowSpans: function() {
// Determine ROWSPAN value for each Column in the DOM tree
function parseDomTreeForRowSpan(tree) {
var maxRowDepth = 1,
m,p;
// Calculate the max depth of descendants for this row
var i = 0,
col;
for(; i<len; ++i) {
// Column has children, so keep counting
tmpRowDepth++;
tmpRowDepth--;
}
// Column has children, so keep counting
tmpRowDepth++;
tmpRowDepth--;
}
// No children, is it the max depth?
else {
if(tmpRowDepth > maxRowDepth) {
}
}
}
}
// Count max row depth for each row
currentRow = tree[m];
// Assign the right ROWSPAN values to each Column in the row
currentColumn = currentRow[p];
}
// Default is already 1
// else currentColumn.rowSpan =1;
}
// Reset counter for next row
maxRowDepth = 1;
}
}
parseDomTreeForRowSpan(this.tree);
},
/**
* @method _setHeaders
* @description Calculates and sets headers attribute on all Columns.
* @private
*/
_setHeaders: function() {
}
}
for(; i<len; ++i) {
headers = [];
}
},
//TODO
getColumn: function() {
}
});
/**
* The DataTable widget provides a progressively enhanced DHTML control for
* displaying tabular data across A-grade browsers.
*
* @module datatable
*/
/**
* Provides the base DataTable implementation, which can be extended to add
* additional functionality, such as sorting or scrolling.
*
* @module datatable
* @submodule datatable-base
*/
/**
* Base class for the DataTable widget.
* @class DataTable.Base
* @extends Widget
* @constructor
*/
}
/////////////////////////////////////////////////////////////////////////////
//
// STATIC PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
/**
* Class name.
*
* @property NAME
* @type String
* @static
* @final
* @value "dataTable"
*/
NAME: "dataTable",
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTES
//
/////////////////////////////////////////////////////////////////////////////
ATTRS: {
/**
* @attribute columnset
* @description Pointer to Columnset instance.
* @type Array | Y.Columnset
*/
columnset: {
setter: "_setColumnset"
},
/**
* @attribute recordset
* @description Pointer to Recordset instance.
* @type Array | Y.Recordset
*/
recordset: {
valueFn: '_initRecordset',
setter: "_setRecordset"
},
/*TODO
* @attribute state
* @description Internal state.
* @readonly
* @type
*/
/*state: {
value: new Y.State(),
readOnly: true
},*/
/**
* @attribute summary
* @description Summary.
* @type String
*/
summary: {
},
/**
* @attribute caption
* @description Caption
* @type String
*/
caption: {
},
/**
* @attribute thValueTemplate
* @description Tokenized markup template for TH value.
* @type String
* @default '{value}'
*/
},
/**
* @attribute tdValueTemplate
* @description Tokenized markup template for TD value.
* @type String
* @default '{value}'
*/
},
/**
* @attribute trTemplate
* @description Tokenized markup template for TR node creation.
* @type String
* @default '<tr id="{id}"></tr>'
*/
trTemplate: {
}
},
/////////////////////////////////////////////////////////////////////////////
//
// TODO: HTML_PARSER
//
/////////////////////////////////////////////////////////////////////////////
HTML_PARSER: {
/*caption: function (srcNode) {
}*/
}
});
/////////////////////////////////////////////////////////////////////////////
//
// PROTOTYPE
//
/////////////////////////////////////////////////////////////////////////////
/**
* @property thTemplate
* @description Tokenized markup template for TH node creation.
* @type String
* @default '<th id="{id}" rowspan="{rowspan}" colspan="{colspan}" class="{classnames}" abbr="{abbr}"><div class="'+CLASS_LINER+'">{value}</div></th>'
*/
/**
* @property tdTemplate
* @description Tokenized markup template for TD node creation.
* @type String
* @default '<td headers="{headers}"><div class="'+CLASS_LINER+'">{value}</div></td>'
*/
/**
* @property _theadNode
* @description Pointer to THEAD node.
* @type Y.Node
* @private
*/
_theadNode: null,
/**
* @property _tbodyNode
* @description Pointer to TBODY node.
* @type Y.Node
* @private
*/
_tbodyNode: null,
/**
* @property _msgNode
* @description Pointer to message display node.
* @type Y.Node
* @private
*/
_msgNode: null,
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTE HELPERS
//
/////////////////////////////////////////////////////////////////////////////
/**
* @method _setColumnset
* @description Converts Array to Y.Columnset.
* @param columns {Array | Y.Columnset}
* @returns Y.Columnset
* @private
*/
_setColumnset: function(columns) {
},
/**
* Updates the UI if Columnset is changed.
*
* @method _afterColumnsetChange
* @param e {Event} Custom event for the attribute change.
* @protected
*/
_afterColumnsetChange: function (e) {
if(this.get("rendered")) {
this._uiSetColumnset(e.newVal);
}
},
/**
* @method _setRecordset
* @description Converts Array to Y.Recordset.
* @param records {Array | Y.Recordset}
* @returns Y.Recordset
* @private
*/
_setRecordset: function(rs) {
}
return rs;
},
/**
* Updates the UI if Recordset is changed.
*
* @method _afterRecordsetChange
* @param e {Event} Custom event for the attribute change.
* @protected
*/
_afterRecordsetChange: function (e) {
if(this.get("rendered")) {
this._uiSetRecordset(e.newVal);
}
},
/**
* Updates the UI if summary is changed.
*
* @method _afterSummaryChange
* @param e {Event} Custom event for the attribute change.
* @protected
*/
_afterSummaryChange: function (e) {
if(this.get("rendered")) {
this._uiSetSummary(e.newVal);
}
},
/**
* Updates the UI if caption is changed.
*
* @method _afterCaptionChange
* @param e {Event} Custom event for the attribute change.
* @protected
*/
_afterCaptionChange: function (e) {
if(this.get("rendered")) {
this._uiSetCaption(e.newVal);
}
},
/////////////////////////////////////////////////////////////////////////////
//
// METHODS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Initializer.
*
* @method initializer
* @param config {Object} Config object.
* @private
*/
initializer: function(config) {
},
/**
* Destructor.
*
* @method destructor
* @private
*/
destructor: function() {
},
////////////////////////////////////////////////////////////////////////////
//
// RENDER
//
////////////////////////////////////////////////////////////////////////////
/**
* Renders UI.
*
* @method renderUI
* @private
*/
renderUI: function() {
// TABLE
// COLGROUP
this._addColgroupNode(this._tableNode);
// THEAD
this._addTheadNode(this._tableNode);
// Primary TBODY
this._addTbodyNode(this._tableNode);
// Message TBODY
this._addMessageNode(this._tableNode);
// CAPTION
this._addCaptionNode(this._tableNode);
},
/**
* Creates and attaches TABLE element to given container.
*
* @method _addTableNode
* @param containerNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addTableNode: function(containerNode) {
if (!this._tableNode) {
}
return this._tableNode;
},
/**
* Creates and attaches COLGROUP element to given TABLE.
*
* @method _addColgroupNode
* @param tableNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addColgroupNode: function(tableNode) {
// Add COLs to DOCUMENT FRAGMENT
i = 0,
allCols = ["<colgroup>"];
for(; i<len; ++i) {
}
// Create COLGROUP
this._colgroupNode = tableNode.insertBefore(Ycreate(allCols.join("")), tableNode.get("firstChild"));
return this._colgroupNode;
},
/**
* Creates and attaches THEAD element to given container.
*
* @method _addTheadNode
* @param tableNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addTheadNode: function(tableNode) {
if(tableNode) {
return this._theadNode;
}
},
/**
* Creates and attaches TBODY element to given container.
*
* @method _addTbodyNode
* @param tableNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addTbodyNode: function(tableNode) {
return this._tbodyNode;
},
/**
* Creates and attaches message display element to given container.
*
* @method _addMessageNode
* @param tableNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addMessageNode: function(tableNode) {
return this._msgNode;
},
/**
* Creates and attaches CAPTION element to given container.
*
* @method _addCaptionNode
* @param tableNode {Y.Node} Parent node.
* @protected
* @returns Y.Node
*/
_addCaptionNode: function(tableNode) {
},
////////////////////////////////////////////////////////////////////////////
//
// BIND
//
////////////////////////////////////////////////////////////////////////////
/**
* Binds events.
*
* @method bindUI
* @private
*/
bindUI: function() {
},
//TODO: is this necessary?
if(type==="dblclick") {
}
else {
}
},
////////////////////////////////////////////////////////////////////////////
//
// SYNC
//
////////////////////////////////////////////////////////////////////////////
/**
* Syncs UI to intial state.
*
* @method syncUI
* @private
*/
syncUI: function() {
// THEAD ROWS
// DATA ROWS
// SUMMARY
// CAPTION
},
/**
* Updates summary.
*
* @method _uiSetSummary
* @param val {String} New summary.
* @protected
*/
_uiSetSummary: function(val) {
},
/**
* Updates caption.
*
* @method _uiSetCaption
* @param val {String} New caption.
* @protected
*/
_uiSetCaption: function(val) {
var caption = this._captionNode,
if (method) {
// prepend of remove necessary
}
},
////////////////////////////////////////////////////////////////////////////
//
//
////////////////////////////////////////////////////////////////////////////
/**
* Updates THEAD.
*
* @method _uiSetColumnset
* @param cs {Y.Columnset} New Columnset.
* @protected
*/
_uiSetColumnset: function(cs) {
thead = this._theadNode,
i = 0,
// Move THEAD off DOM
// Iterate tree of columns to add THEAD rows
for(; i<len; ++i) {
}
// Column helpers needs _theadNode to exist
//this._createColumnHelpers();
// Re-attach THEAD to DOM
},
/**
* Creates and attaches header row element.
*
* @method _addTheadTrNode
* @param o {Object} {thead, columns}.
* @param isFirst {Boolean} Is first row.
* @param isFirst {Boolean} Is last row.
* @protected
*/
this._attachTheadTrNode(o);
},
/**
* Creates header row element.
*
* @method _createTheadTrNode
* @param o {Object} {thead, columns}.
* @param isFirst {Boolean} Is first row.
* @param isLast {Boolean} Is last row.
* @protected
* @returns Y.Node
*/
//TODO: custom classnames
i = 0,
if(isFirst) {
}
if(isLast) {
}
for(; i<len; ++i) {
}
return tr;
},
/**
* Attaches header row element.
*
* @method _attachTheadTrNode
* @param o {Object} {thead, columns, tr}.
* @protected
*/
_attachTheadTrNode: function(o) {
},
/**
* Creates and attaches header cell element.
*
* @method _addTheadThNode
* @param o {Object} {value, column, tr}.
* @protected
*/
_addTheadThNode: function(o) {
o.th = this._createTheadThNode(o);
this._attachTheadThNode(o);
//TODO: assign all node pointers: thNode, thLinerNode, thLabelNode
},
/**
* Creates header cell element.
*
* @method _createTheadThNode
* @param o {Object} {value, column, tr}.
* @protected
* @returns Y.Node
*/
_createTheadThNode: function(o) {
// Populate template object
/*TODO
// Clear minWidth on hidden Columns
if(column.get("hidden")) {
//this._clearMinWidth(column);
}
*/
},
/**
* Attaches header cell element.
*
* @method _attachTheadThNode
* @param o {Object} {value, column, tr}.
* @protected
*/
_attachTheadThNode: function(o) {
},
////////////////////////////////////////////////////////////////////////////
//
//
////////////////////////////////////////////////////////////////////////////
/**
* Updates TBODY.
*
* @method _uiSetRecordset
* @param rs {Y.Recordset} New Recordset.
* @protected
*/
_uiSetRecordset: function(rs) {
var i = 0,//TODOthis.get("state.offsetIndex")
oldTbody = this._tbodyNode,
o = {},
// Replace TBODY with a new one
oldTbody = null;
this._tbodyNode = newTbody;
// Iterate Recordset to use existing TR when possible or add new TR
for(; i<len; ++i) {
o.rowindex = i;
this._addTbodyTrNode(o); //TODO: sometimes rowindex != recordindex
}
// TBODY to DOM
},
/**
* Creates and attaches data row element.
*
* @method _addTbodyTrNode
* @param o {Object} {tbody, record}
* @protected
*/
_addTbodyTrNode: function(o) {
this._attachTbodyTrNode(o);
},
/**
* Creates data row element.
*
* @method _createTbodyTrNode
* @param o {Object} {tbody, record}
* @protected
* @returns Y.Node
*/
_createTbodyTrNode: function(o) {
i = 0,
for(; i<len; ++i) {
this._addTbodyTdNode(o);
}
return tr;
},
/**
* Attaches data row element.
*
* @method _attachTbodyTrNode
* @param o {Object} {tbody, record, tr}.
* @protected
*/
_attachTbodyTrNode: function(o) {
if(isEven) {
}
else {
}
},
/**
* Creates and attaches data cell element.
*
* @method _addTbodyTdNode
* @param o {Object} {record, column, tr}.
* @protected
*/
_addTbodyTdNode: function(o) {
o.td = this._createTbodyTdNode(o);
this._attachTbodyTdNode(o);
},
/**
* Creates data cell element.
*
* @method _createTbodyTdNode
* @param o {Object} {record, column, tr}.
* @protected
* @returns Y.Node
*/
_createTbodyTdNode: function(o) {
//TODO: attributes? or methods?
o.value = this.formatDataCell(o);
},
/**
* Attaches data cell element.
*
* @method _attachTbodyTdNode
* @param o {Object} {record, column, tr, headers, classnames, value}.
* @protected
*/
_attachTbodyTdNode: function(o) {
},
/**
* Returns markup to insert into data cell element.
*
* @method formatDataCell
* @param @param o {Object} {record, column, tr, headers, classnames}.
*/
formatDataCell: function(o) {
},
_initRecordset: function () {
}
});
/**
* Plugs DataTable with DataSource integration.
*
* @module datatable
* @submodule datatable-datasource
*/
/**
* Adds DataSource integration to DataTable.
* @class DataTableDataSource
* @extends Plugin.Base
*/
function DataTableDataSource() {
}
/////////////////////////////////////////////////////////////////////////////
//
// STATIC PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
Y.mix(DataTableDataSource, {
/**
* The namespace for the plugin. This will be the property on the host which
* references the plugin instance.
*
* @property NS
* @type String
* @static
* @final
* @value "datasource"
*/
NS: "datasource",
/**
* Class name.
*
* @property NAME
* @type String
* @static
* @final
* @value "dataTableDataSource"
*/
NAME: "dataTableDataSource",
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTES
//
/////////////////////////////////////////////////////////////////////////////
ATTRS: {
/**
* @attribute datasource
* @description Pointer to DataSource instance.
* @type Y.DataSource
*/
datasource: {
setter: "_setDataSource"
},
/**
* @attribute initialRequest
* @description Request sent to DataSource immediately upon initialization.
* @type Object
*/
setter: "_setInitialRequest"
}
}
});
/////////////////////////////////////////////////////////////////////////////
//
// PROTOTYPE
//
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTE HELPERS
//
/////////////////////////////////////////////////////////////////////////////
/**
* @method _setDataSource
* @description Creates new DataSource instance if one is not provided.
* @param ds {Object | Y.DataSource}
* @returns Y.DataSource
* @private
*/
_setDataSource: function(ds) {
},
/**
* @method _setInitialRequest
* @description Sends request to DataSource.
* @param request {Object} DataSource request.
* @private
*/
_setInitialRequest: function(request) {
},
/////////////////////////////////////////////////////////////////////////////
//
// METHODS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Initializer.
*
* @method initializer
* @param config {Object} Config object.
* @private
*/
initializer: function(config) {
}
},
////////////////////////////////////////////////////////////////////////////
//
// DATA
//
////////////////////////////////////////////////////////////////////////////
/**
* Load data by calling DataSource's sendRequest() method under the hood.
*
* @method load
* @param config {object} Optional configuration parameters:
*
* <dl>
* <dt>request</dt><dd>Pass in a new request, or initialRequest is used.</dd>
* <dt>callback</dt><dd>Pass in DataSource callback object, or the following default is used:
* <dl>
* <dt>success</dt><dd>datatable.onDataReturnInitializeTable</dd>
* <dt>failure</dt><dd>datatable.onDataReturnInitializeTable</dd>
* <dt>scope</dt><dd>datatable</dd>
* <dt>argument</dt><dd>datatable.getState()</dd>
* </dl>
* </dd>
* <dt>datasource</dt><dd>Pass in a new DataSource instance to override the current DataSource for this transaction.</dd>
* </dl>
*/
};
if(ds) {
}
},
/**
* Callback function passed to DataSource's sendRequest() method populates
* an entire DataTable with new data, clearing previous data, if any.
*
* @method onDataReturnInitializeTable
* @param e {Event.Facade} DataSource Event Facade object.
*/
onDataReturnInitializeTable : function(e) {
}
});
/**
* Plugs DataTable with sorting functionality.
*
* @module datatable
* @submodule datatable-sort
*/
/**
* Adds column sorting to DataTable.
* @class DataTableSort
* @extends Plugin.Base
*/
DATATABLE = "datatable",
COLUMN = "column",
ASC = "asc",
DESC = "desc",
TEMPLATE = '<a class="{link_class}" title="{link_title}" href="{link_href}">{value}</a>';
function DataTableSort() {
}
/////////////////////////////////////////////////////////////////////////////
//
// STATIC PROPERTIES
//
/////////////////////////////////////////////////////////////////////////////
Y.mix(DataTableSort, {
/**
* The namespace for the plugin. This will be the property on the host which
* references the plugin instance.
*
* @property NS
* @type String
* @static
* @final
* @value "sort"
*/
NS: "sort",
/**
* Class name.
*
* @property NAME
* @type String
* @static
* @final
* @value "dataTableSort"
*/
NAME: "dataTableSort",
/////////////////////////////////////////////////////////////////////////////
//
// ATTRIBUTES
//
/////////////////////////////////////////////////////////////////////////////
ATTRS: {
/**
* @attribute trigger
* @description Defines the trigger that causes a column to be sorted:
* {event, selector}, where "event" is an event type and "selector" is
* is a node query selector.
* @type Object
* @default {event:"click", selector:"th"}
* @writeOnce "initOnly"
*/
trigger: {
writeOnce: "initOnly"
},
/**
* @attribute lastSortedBy
* @description Describes last known sort state: {key,dir}, where
* "key" is column key and "dir" is either "asc" or "desc".
* @type Object
*/
lastSortedBy: {
setter: "_setLastSortedBy",
lazyAdd: false
},
/**
* @attribute template
* @description Tokenized markup template for TH sort element.
* @type String
* @default '<a class="{link_class}" title="{link_title}" href="{link_href}">{value}</a>'
*/
template: {
}
}
});
/////////////////////////////////////////////////////////////////////////////
//
// PROTOTYPE
//
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
//
// METHODS
//
/////////////////////////////////////////////////////////////////////////////
/**
* Initializer.
*
* @method initializer
* @param config {Object} Config object.
* @private
*/
initializer: function(config) {
// Wrap link around TH value
// Add class
// Attach trigger handlers
// Attach UI hooks
});
this.on("lastSortedByChange", function(e) {
});
//TODO
//dt.after("recordset:mutation", function() {//reset lastSortedBy});
//TODO
//add Column sortFn ATTR
// Update UI after the fact (render-then-plug case)
}
},
/**
* @method _setLastSortedBy
* @description Normalizes lastSortedBy
* @param val {String | Object} {key, dir} or "key"
* @returns {key, dir, notdir}
* @private
*/
_setLastSortedBy: function(val) {
}
}
else {
}
}
else {
return null;
}
},
/**
* Updates sort UI.
*
* @method _uiSetLastSortedBy
* @param val {Object} New lastSortedBy object {key,dir}.
* @param dt {Y.DataTable.Base} Host.
* @protected
*/
// Clear previous UI
if(prevColumn) {
}
// Add new sort UI
if(newColumn) {
}
},
/**
* Before header cell element is created, inserts link markup around {value}.
*
* @method _beforeCreateTheadThNode
* @param o {Object} {value, column, tr}.
* @protected
*/
_beforeCreateTheadThNode: function(o) {
link_title: "title",
link_href: "#",
});
}
},
/**
* Before header cell element is attached, sets applicable class names.
*
* @method _beforeAttachTheadThNode
* @param o {Object} {value, column, tr}.
* @protected
*/
_beforeAttachTheadThNode: function(o) {
// This Column is sortable
}
// This Column is currently sorted
}
},
/**
* Before header cell element is attached, sets applicable class names.
*
* @method _before_beforeAttachTbodyTdNode
* @param o {Object} {record, column, tr, headers, classnames, value}.
* @protected
*/
_beforeAttachTbodyTdNode: function(o) {
// This Column is sortable
}
// This Column is currently sorted
}
},
/**
* In response to the "trigger" event, sorts the underlying Recordset and
* updates the lastSortedBy attribute.
*
* @method _onEventSortColumn
* @param o {Object} {value, column, tr}.
* @protected
*/
_onEventSortColumn: function(e) {
e.halt();
//TODO: normalize e.currentTarget to TH
dir = (lastSortedBy &&
}
}
});
/**
* Extends DataTable base to enable x,y, and xy scrolling.
* @module datatable
* @submodule datatable-scroll
*/
DATATABLE = "datatable",
TEMPLATE_TABLE = '<table></table>';
/**
* Adds scrolling to DataTable.
* @class DataTableScroll
* @extends Plugin.Base
*/
function DataTableScroll() {
}
Y.mix(DataTableScroll, {
NS: "scroll",
NAME: "dataTableScroll",
ATTRS: {
/**
* @description The width for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the x direction.
*
* @attribute width
* @public
* @type string
*/
width: {
writeOnce: "initOnly"
},
/**
* @description The height for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the y-direction.
*
* @attribute height
* @public
* @type string
*/
height: {
writeOnce: "initOnly"
},
/**
* @description The scrolling direction for the table.
*
* @attribute scroll
* @private
* @type string
*/
_scroll: {
//value: 'y',
valueFn: function() {
var w = this.get('width'),
h = this.get('height');
if (w && h) {
return 'xy';
}
else if (w) {
return 'x';
}
else if (h) {
return 'y';
}
else {
return null;
}
}
},
/**
* @description The hexadecimal colour value to set on the top-right of the table if a scrollbar exists.
*
* @attribute COLOR_COLUMNFILLER
* @public
* @type string
*/
value: '#f2f2f2',
if (this._headerContainerNode) {
}
}
}
}
});
/**
* @description The table node created in datatable-base
*
* @property _parentTableNode
* @private
* @type Y.Node
*/
_parentTableNode: null,
/**
* @description The THEAD node which resides within the table node created in datatable-base
*
* @property _parentTheadNode
* @private
* @type Y.Node
*/
_parentTheadNode: null,
/**
* @description The TBODY node which resides within the table node created in datatable-base
*
* @property _parentTbodyNode
* @private
* @type Y.Node
*/
_parentTbodyNode: null,
/**
* @description The TBODY Message node which resides within the table node created in datatable-base
*
* @property _parentMsgNode
* @private
* @type Y.Node
*/
_parentMsgNode: null,
/**
* @description The contentBox specified for the datatable in datatable-base
*
* @property _parentContainer
* @private
* @type Y.Node
*/
_parentContainer: null,
/**
* @description The DIV node that contains all the scrollable elements (a table with a tbody on it)
*
* @property _bodyContainerNode
* @private
* @type Y.Node
*/
_bodyContainerNode: null,
/**
* @description The DIV node that contains a table with a THEAD in it (which syncs its horizontal scroll with the _bodyContainerNode above)
*
* @property _headerContainerNode
* @private
* @type Y.Node
*/
_headerContainerNode: null,
//--------------------------------------
// Methods
//--------------------------------------
initializer: function(config) {
this._setUpNodes();
},
/////////////////////////////////////////////////////////////////////////////
//
// Set up Table Nodes
//
/////////////////////////////////////////////////////////////////////////////
/**
* @description Set up methods to fire after host methods execute
*
* @method _setUpNodes
* @private
*/
_setUpNodes: function() {
//this.beforeHostMethod('renderUI', this._removeCaptionNode);
}
},
/**
* @description Stores the main <table> node provided by the host as a private property
*
* @method _setUpParentTableNode
* @private
*/
_setUpParentTableNode: function() {
},
/**
* @description Stores the main <thead> node provided by the host as a private property
*
* @method _setUpParentTheadNode
* @private
*/
_setUpParentTheadNode: function() {
},
/**
* @description Stores the main <tbody> node provided by the host as a private property
*
* @method _setUpParentTbodyNode
* @private
*/
_setUpParentTbodyNode: function() {
},
/**
* @description Stores the main <tbody> message node provided by the host as a private property
*
* @method _setUpParentMessageNode
* @private
*/
_setUpParentMessageNode: function() {
},
/////////////////////////////////////////////////////////////////////////////
//
// Renderer
//
/////////////////////////////////////////////////////////////////////////////
/**
* @description Primary rendering method that takes the datatable rendered in
* the host, and splits it up into two separate <divs> each containing two
* separate tables (one containing the head and one containing the body).
* This method fires after renderUI is called on datatable-base.
*
* @method renderUI
* @public
*/
renderUI: function() {
//Y.Profiler.start('render');
this._createBodyContainer();
this._createHeaderContainer();
this._setContentBoxDimensions();
//Y.Profiler.stop('render');
//console.log(Y.Profiler.getReport("render"));
},
/**
* @description Post rendering method that is responsible for creating a column
* filler, and performing width and scroll synchronization between the <th>
* elements and the <td> elements.
* This method fires after syncUI is called on datatable-base
*
* @method syncUI
* @public
*/
syncUI: function() {
//Y.Profiler.start('sync');
this._removeCaptionNode();
this._syncWidths();
this._syncScroll();
//Y.Profiler.stop('sync');
//console.log(Y.Profiler.getReport("sync"));
},
/**
* @description Remove the caption created in base. Scrolling datatables dont support captions.
*
* @method _removeCaptionNode
* @private
*/
_removeCaptionNode: function() {
//Y.DataTable.Base.prototype.createCaption = function(v) {/*do nothing*/};
//Y.DataTable.Base.prototype._uiSetCaption = function(v) {/*do nothing*/};
},
/**
* @description Adjusts the width of the TH and the TDs to make sure that the two are in sync
*
* Implementation Details:
* Compares the width of the TH liner div to the the width of the TD node. The TD liner width
* is not actually used because the TD often stretches past the liner if the parent DIV is very
* large. Measuring the TD width is more accurate.
*
* Instead of measuring via .get('width'), 'clientWidth' is used, as it returns a number, whereas
* 'width' returns a string, In IE6, 'clientWidth' is not supported, so 'offsetWidth' is used.
* 'offsetWidth' is not as accurate on Chrome,FF as 'clientWidth' - thus the need for the fork.
*
* @method _syncWidths
* @private
*/
_syncWidths: function() {
var th = YNode.all('#'+this._parentContainer.get('id')+ ' .' + CLASS_HEADER + ' table thead th'), //nodelist of all THs
td = YNode.one('#'+this._parentContainer.get('id')+ ' .' + CLASS_BODY + ' table .' + CLASS_DATA).get('firstChild').get('children'), //nodelist of all TDs in 1st row
i,
len,
//stylesheet = new YStyleSheet('columnsSheet'),
//className;
/*
This for loop goes through the first row of TDs in the table.
In a table, the width of the row is equal to the width of the longest cell in that column.
Therefore, we can observe the widths of the cells in the first row only, as they will be the same in all the cells below (in each respective column)
*/
//className = '.'+td.item(i).get('classList')._nodes[0];
//If a width has not been already set on the TD:
//if (td.item(i).get('firstChild').getStyle('width') === "auto") {
//Get the liners for the TH and the TD cell in question
/*
If browser is not IE - get the clientWidth of the Liner div and the TD.
Note: We are not getting the width of the TDLiner, we are getting the width of the actual cell.
Why? Because when the table is set to auto width, the cell will grow to try to fit the table in its container.
The liner could potentially be much smaller than the cell width.
TODO: Explore if there is a better way using only LINERS widths
*/
if (!ie) {
thWidth = thLiner.get('clientWidth'); //TODO: this should actually be done with getComputedStyle('width') but this messes up columns. Explore this option.
}
//IE wasn't recognizing clientWidths, so we are using offsetWidths.
//TODO: should use getComputedStyle('width') because offsetWidth will screw up when padding is changed.
else {
//thWidth = parseFloat(thLiner.getComputedStyle('width').split('px')[0]);
//tdWidth = parseFloat(td.item(i).getComputedStyle('width').split('px')[0]); /* TODO: for some reason, using tdLiner.get('clientWidth') doesn't work - why not? */
}
//if TH is bigger than TD, enlarge TD Liner
//thLiner.setStyle('width', (tdWidth - 20 + 'px'));
//stylesheet.set(className,{'width': (thWidth - 20 + 'px')});
}
//if TD is bigger than TH, enlarge TH Liner
tdLiner.setStyle('width', (tdWidth - 20 + 'px')); //if you don't set an explicit width here, when the width is set in line 368, it will auto-shrink the widths of the other cells (because they dont have an explicit width)
//stylesheet.set(className,{'width': (tdWidth - 20 + 'px')});
}
//}
}
//stylesheet.enable();
},
/**
* @description Adds the approriate width to the liner divs of the TH nodes before they are appended to DOM
*
* @method _attachTheadThNode
* @private
*/
_attachTheadThNode: function(o) {
if (w !== 'auto') {
o.th.get('firstChild').setStyles({width: w, overflow:'hidden'}); //TODO: use liner API but liner is undefined here (not created?)
}
return o;
},
/**
* @description Adds the appropriate width to the liner divs of the TD nodes before they are appended to DOM
*
* @method _attachTbodyTdNode
* @private
*/
_attachTbodyTdNode: function(o) {
if (w !== 'auto') {
o.td.get('firstChild').setStyles({width: w, overflow: 'hidden'}); //TODO: use liner API but liner is undefined here (not created?)
//o.td.setStyles({'width': w, 'overflow': 'hidden'});
}
return o;
},
/**
* @description Creates the body DIV that contains all the data.
*
* @method _createBodyContainer
* @private
*/
_createBodyContainer: function() {
this._bodyContainerNode = bd;
this._setStylesForTbody();
},
/**
* @description Creates the DIV that contains a <table> with all the headers.
*
* @method _createHeaderContainer
* @private
*/
_createHeaderContainer: function() {
this._headerContainerNode = hd;
//hd.setStyle('backgroundColor',this.get("COLOR_COLUMNFILLER"));
this._setStylesForThead();
},
/**
* @description Creates styles for the TBODY based on what type of table it is.
*
* @method _setStylesForTbody
* @private
*/
_setStylesForTbody: function() {
el = this._bodyContainerNode,
if (dir === 'x') {
//X-Scrolling tables should not have a Y-Scrollbar so overflow-y is hidden. THe width on x-scrolling tables must be set by user.
}
else if (dir === 'y') {
//Y-Scrolling tables should not have a X-Scrollbar so overflow-x is hidden. The width isn't neccessary because it can be auto.
}
else if (dir === 'xy') {
}
else {
//scrolling is set to 'null' - ie: width and height are not set. Don't have any type of scrolling.
}
return el;
},
/**
* @description Creates styles for the THEAD based on what type of datatable it is.
*
* @method _setStylesForThead
* @private
*/
_setStylesForThead: function() {
el = this._headerContainerNode;
//if (dir !== 'y') {
// }
},
/**
* @description Sets an auto width on the content box if it doesn't exist or if its a y-datatable.
*
* @method _setContentBoxDimensions
* @private
*/
_setContentBoxDimensions: function() {
}
},
/////////////////////////////////////////////////////////////////////////////
//
// Scroll Syncing
//
/////////////////////////////////////////////////////////////////////////////
/**
* @description Ensures that scrolling is synced across the two tables
*
* @method _onScroll
* @private
*/
_onScroll: function() {
},
/**
* @description Syncs padding around scrollable tables, including Column header right-padding
* and container width and height.
*
* @method _syncScroll
* @private
*/
_syncScroll : function() {
this._syncScrollX();
this._syncScrollY();
this._syncScrollOverhang();
// Bug 1925874
if(!this.get("width")) {
// Bug 1926125
}
}
},
/**
* @description Snaps container width for y-scrolling tables.
*
* @method _syncScrollY
* @private
*/
_syncScrollY : function() {
var tBody = this._parentTbodyNode,
tBodyContainer = this._bodyContainerNode,
w;
// X-scrolling not enabled
if(!this.get("width")) {
// Snap outer container width to content
// but account for y-scrollbar since it is visible
// no y-scrollbar, just borders
}
},
/**
* @description Snaps container height for x-scrolling tables in IE. Syncs message TBODY width.
* Taken from YUI2 ScrollingDataTable.js
*
* @method _syncScrollX
* @private
*/
_syncScrollX: function() {
var tBody = this._parentTbodyNode,
tBodyContainer = this._bodyContainerNode,
w;
}
this._parentMsgNode.get('parentNode').setStyle('width', this._parentTheadNode.get('parentNode').get('offsetWidth')+'px');
}
else {
}
},
/**
* Taken from YUI2 ScrollingDataTable.js
*
* @method _syncScrollOverhang
* @private
*/
_syncScrollOverhang: function() {
var tBodyContainer = this._bodyContainerNode,
padding = 1;
//when its both x and y scrolling
if ((tBodyContainer.get('scrollHeight') > tBodyContainer.get('clientHeight')) || (tBodyContainer.get('scrollWidth') > tBodyContainer.get('clientWidth'))) {
padding = 18;
}
this._setOverhangValue(padding);
//After the widths have synced, there is a wrapping issue in the headerContainer in IE6. The header does not span the full
//length of the table (does not cover all of the y-scrollbar). By adding this line in when there is a y-scroll, the header will span correctly.
//TODO: this should not really occur on this.get('_scroll') === y - it should occur when scrollHeight > clientHeight, but clientHeight is not getting recognized in IE6?
if (YUA.ie !== 0 && this.get('_scroll') === 'y' && this._bodyContainerNode.get('scrollHeight') > this._bodyContainerNode.get('offsetHeight'))
{
}
},
/**
* @description Sets Column header overhang to given width.
* Taken from YUI2 ScrollingDataTable.js with minor modifications
*
* @method _setOverhangValue
* @param nBorderWidth {Number} Value of new border for overhang.
* @private
*/
_setOverhangValue: function(borderWidth) {
//lastHeaders = cols[cols.length-1] || [],
}
});
YUI.add('datatable', function(Y){}, '@VERSION@' ,{use:['datatable-base','datatable-datasource','datatable-sort','datatable-scroll']});