- /**
- 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]);
-
-