[DT] Add Highlight module to DataTable

src/datatable/HISTORY.md

@@ -3,6 +3,8 @@ DataTable Change History
 
 @VERSION@
 ------
+* Add highlight module [Pull Request #1196]
+
 * Document updates and variable changes to improve understanding of code
   [Pull Request #946] [Satyam]
 

src/datatable/assets/datatable-highlight/datatable-highlight-core.css

@@ -0,0 +1,26 @@
+.yui3-datatable tr td {
+    -webkit-transition: background-color 0.05s ease-in;
+    -moz-transition: background-color 0.05s ease-in;
+    -o-transition: background-color 0.05s ease-in;
+    transition: background-color 0.05s ease-in;
+}
+.yui3-datatable .yui3-datatable-highlight-row td {
+    -webkit-transition: background-color 0.1s ease-out;
+    -moz-transition: background-color 0.1s ease-out;
+    -o-transition: background-color 0.1s ease-out;
+    transition: background-color 0.1s ease-out;
+}
+
+.yui3-datatable tr .yui3-datatable-highlight-col {
+    -webkit-transition: background-color 0.1s ease-out;
+    -moz-transition: background-color 0.1s ease-out;
+    -o-transition: background-color 0.1s ease-out;
+    transition: background-color 0.1s ease-out;
+}
+
+.yui3-datatable tr .yui3-datatable-highlight-cell {
+    -webkit-transition: background-color 0.1s ease-out;
+    -moz-transition: background-color 0.1s ease-out;
+    -o-transition: background-color 0.1s ease-out;
+    transition: background-color 0.1s ease-out;
+}

src/datatable/assets/datatable-highlight/skins/night/datatable-highlight-skin.css

@@ -0,0 +1,11 @@
+.yui3-skin-night .yui3-datatable .yui3-datatable-highlight-row td {
+    background-color: #38383f;
+}
+
+.yui3-skin-night .yui3-datatable tr .yui3-datatable-highlight-col {
+    background-color: #38383f;
+}
+
+.yui3-skin-night .yui3-datatable tr .yui3-datatable-highlight-cell {
+    background-color: #38383f;
+}

src/datatable/assets/datatable-highlight/skins/sam/datatable-highlight-skin.css

@@ -0,0 +1,11 @@
+.yui3-skin-sam .yui3-datatable .yui3-datatable-highlight-row td {
+    background-color: #fef2cd;
+}
+
+.yui3-skin-sam .yui3-datatable tr .yui3-datatable-highlight-col {
+    background-color: #fef2cd;
+}
+
+.yui3-skin-sam .yui3-datatable tr .yui3-datatable-highlight-cell {
+    background-color: #fef2cd;
+}

src/datatable/build.json

@@ -75,6 +75,11 @@
             "jsfiles": [
                 "foot.js"
             ]
+        },
+        "datatable-highlight": {
+            "jsfiles": [
+                "highlight.js"
+            ]
         }
     }
 }

src/datatable/js/highlight.js

@@ -0,0 +1,277 @@
+/**
+ Adds support for highlighting columns with the mouse in a DataTable
+
+ @module datatable
+ @submodule datatable-highlight
+ @since @SINCE@
+ */
+
+
+var getClassName = Y.ClassNameManager.getClassName;
+
+/**
+ @class DataTable.Highlight
+ @since @SINCE@
+ */
+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 @SINCE@
+     */
+    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 @SINCE@
+     */
+    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 @SINCE@
+     */
+    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 @SINCE@
+     */
+    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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _colNameRegex: '{prefix}-col-(\\S*)',
+
+    /**
+     This object will contain any delegates created when their feature is
+     turned on.
+
+     @protected
+     @property _highlightDelegates
+     @type Object
+     @since @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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 @SINCE@
+     */
+    _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]);

src/datatable/meta/datatable.json

@@ -122,6 +122,13 @@
                 "requires": [
                     "template"
                 ]
+            },
+            "datatable-highlight": {
+                "requires": [
+                    "datatable-base",
+                    "event-hover"
+                ],
+                "skinnable": true
             }
         }
     }