File: datatable/js/highlight.js
/**
Adds support for highlighting columns with the mouse in a DataTable
@module datatable
@submodule datatable-highlight
@since 3.13.0
*/
var getClassName = Y.ClassNameManager.getClassName;
/**
@class DataTable.Highlight
@since 3.13.0
*/
function Highlight() {}
Highlight.ATTRS = {
/**
Setting this to true will create a delegate on the DataTable adding the
default classname to the row when the mouse is over the row.
@attribute highlightRows
@default false
@since 3.13.0
*/
highlightRows: {
value: false,
setter: '_setHighlightRows',
validator: Y.Lang.isBoolean
},
/**
Setting this to true will create a delegate on the DataTable adding the
default classname to the column when the mouse is over the column.
@attribute highlightCols
@default false
@since 3.13.0
*/
highlightCols: {
value: false,
setter: '_setHighlightCols',
validator: Y.Lang.isBoolean
},
/**
Setting this to true will create a delegate on the DataTable adding the
default classname to the cell when the mouse is over it.
@attribute highlightCells
@default false
@since 3.13.0
*/
highlightCells: {
value: false,
setter: '_setHighlightCells',
validator: Y.Lang.isBoolean
}
};
Highlight.prototype = {
/**
An object consisting of classnames for a `row`, a `col` and a `cell` to
be applied to their respective objects when the user moves the mouse over
the item and the attribute is set to true.
@public
@property highlightClassNames
@type Object
@since 3.13.0
*/
highlightClassNames: {
row: getClassName(NAME, 'row'),
col: getClassName(NAME, 'col'),
cell: getClassName(NAME, 'cell')
},
/**
A string that is used to create a column selector when the column is has
the mouse over it. Can contain the css prefix (`{prefix}`) and the column
name (`{col}`). Further substitution will require `_highlightCol` to be
overwritten.
@protected
@property _colSelector
@type String
@since 3.13.0
*/
_colSelector: '.{prefix}-data .{prefix}-col-{col}',
/**
A string that will be used to create Regular Expression when column
highlighting is set to true. Uses the css prefix (`{prefix}`) from the
DataTable object to populate.
@protected
@property _colNameRegex
@type String
@since 3.13.0
*/
_colNameRegex: '{prefix}-col-(\\S*)',
/**
This object will contain any delegates created when their feature is
turned on.
@protected
@property _highlightDelegates
@type Object
@since 3.13.0
*/
_highlightDelegates: {},
/**
Default setter method for row highlighting. If the value is true, a
delegate is created and stored in `this._highlightDelegates.row`. This
delegate will add/remove the row highlight classname to/from the row when
the mouse enters/leaves a row on the `tbody`
@protected
@method _setHighlightRows
@param {Boolean} val
@return val
@since 3.13.0
*/
_setHighlightRows: function (val) {
var del = this._highlightDelegates;
if (del.row) {
del.row.detach();
}
if (val === true) {
del.row = this.delegate('hover',
Y.bind(this._highlightRow, this),
Y.bind(this._highlightRow, this),
"tbody tr");
}
return val;
},
/**
Default setter method for column highlighting. If the value is true, a
delegate is created and stored in `this._highlightDelegates.col`. This
delegate will add/remove the column highlight classname to/from the
column when the mouse enters/leaves a column on the `tbody`
@protected
@method _setHighlightCols
@param {Boolean} val
@return val
@since 3.13.0
*/
_setHighlightCols: function (val) {
var del = this._highlightDelegates;
if (del.col) {
del.col.detach();
}
if (val === true) {
this._buildColSelRegex();
del.col = this.delegate('hover',
Y.bind(this._highlightCol, this),
Y.bind(this._highlightCol, this),
"tr td");
}
},
/**
Default setter method for cell highlighting. If the value is true, a
delegate is created and stored in `this._highlightDelegates.cell`. This
delegate will add/remove the cell highlight classname to/from the cell
when the mouse enters/leaves a cell on the `tbody`
@protected
@method _setHighlightCells
@param {Boolean} val
@return val
@since 3.13.0
*/
_setHighlightCells: function (val) {
var del = this._highlightDelegates;
if (del.cell) {
del.cell.detach();
}
if (val === true) {
del.cell = this.delegate('hover',
Y.bind(this._highlightCell, this),
Y.bind(this._highlightCell, this),
"tbody td");
}
return val;
},
/**
Method called to turn on or off the row highlighting when the mouse
enters or leaves the row. This is determined by the event phase of the
hover event. Where `over` will turn on the highlighting and anything else
will turn it off.
@protected
@method _highlightRow
@param {EventFacade} e Event from the hover event
@since 3.13.0
*/
_highlightRow: function (e) {
e.currentTarget.toggleClass(this.highlightClassNames.row, (e.phase === 'over'));
},
/**
Method called to turn on or off the column highlighting when the mouse
enters or leaves the column. This is determined by the event phase of the
hover event. Where `over` will turn on the highlighting and anything else
will turn it off.
@protected
@method _highlightCol
@param {EventFacade} e Event from the hover event
@since 3.13.0
*/
_highlightCol: function(e) {
var colName = this._colNameRegex.exec(e.currentTarget.getAttribute('class')),
selector = Y.Lang.sub(this._colSelector, {
prefix: this._cssPrefix,
col: colName[1]
});
this.view.tableNode.all(selector).toggleClass(this.highlightClassNames.col, (e.phase === 'over'));
},
/**
Method called to turn on or off the cell highlighting when the mouse
enters or leaves the cell. This is determined by the event phase of the
hover event. Where `over` will turn on the highlighting and anything else
will turn it off.
@protected
@method _highlightCell
@param {EventFacade} e Event from the hover event
@since 3.13.0
*/
_highlightCell: function(e) {
e.currentTarget.toggleClass(this.highlightClassNames.cell, (e.phase === 'over'));
},
/**
Used to transform the `_colNameRegex` to a Regular Expression when the
column highlighting is initially turned on. If `_colNameRegex` is not a
string when this method is called, no action is taken.
@protected
@method _buildColSelRegex
@since 3.13.0
*/
_buildColSelRegex: function () {
var str = this._colNameRegex,
regex;
if (typeof str === 'string') {
this._colNameRegex = new RegExp(Y.Lang.sub(str, { prefix: this._cssPrefix }));
}
}
};
Y.DataTable.Highlight = Highlight;
Y.Base.mix(Y.DataTable, [Y.DataTable.Highlight]);