1 YUI.add('datatable-highlight', function (Y, NAME) {

     2 

     3 /**

     4  Adds support for highlighting columns with the mouse in a DataTable

     5 

     6  @module datatable

     7  @submodule datatable-highlight

     8  @since 3.13.0

     9  */

    10 

    11 

    12 var getClassName = Y.ClassNameManager.getClassName;

    13 

    14 /**

    15  @class DataTable.Highlight

    16  @since 3.13.0

    17  */

    18 function Highlight() {}

    19 

    20 Highlight.ATTRS = {

    21     /**

    22      Setting this to true will create a delegate on the DataTable adding the

    23      default classname to the row when the mouse is over the row.

    24 

    25      @attribute highlightRows

    26      @default false

    27      @since 3.13.0

    28      */

    29     highlightRows: {

    30         value: false,

    31         setter: '_setHighlightRows',

    32         validator: Y.Lang.isBoolean

    33     },

    34 

    35     /**

    36      Setting this to true will create a delegate on the DataTable adding the

    37      default classname to the column when the mouse is over the column.

    38 

    39      @attribute highlightCols

    40      @default false

    41      @since 3.13.0

    42      */

    43     highlightCols: {

    44         value: false,

    45         setter: '_setHighlightCols',

    46         validator: Y.Lang.isBoolean

    47     },

    48 

    49     /**

    50      Setting this to true will create a delegate on the DataTable adding the

    51      default classname to the cell when the mouse is over it.

    52 

    53      @attribute highlightCells

    54      @default false

    55      @since 3.13.0

    56      */

    57     highlightCells: {

    58         value: false,

    59         setter: '_setHighlightCells',

    60         validator: Y.Lang.isBoolean

    61     }

    62 };

    63 

    64 

    65 Highlight.prototype = {

    66 

    67     /**

    68      An object consisting of classnames for a `row`, a `col` and a `cell` to

    69      be applied to their respective objects when the user moves the mouse over

    70      the item and the attribute is set to true.

    71 

    72      @public

    73      @property highlightClassNames

    74      @type Object

    75      @since 3.13.0

    76      */

    77     highlightClassNames: {

    78         row: getClassName(NAME, 'row'),

    79         col: getClassName(NAME, 'col'),

    80         cell: getClassName(NAME, 'cell')

    81     },

    82 

    83     /**

    84      A string that is used to create a column selector when the column is has

    85      the mouse over it. Can contain the css prefix (`{prefix}`) and the column

    86      name (`{col}`). Further substitution will require `_highlightCol` to be

    87      overwritten.

    88 

    89      @protected

    90      @property _colSelector

    91      @type String

    92      @since 3.13.0

    93      */

    94     _colSelector: '.{prefix}-data .{prefix}-col-{col}',

    95 

    96     /**

    97      A string that will be used to create Regular Expression when column

    98      highlighting is set to true. Uses the css prefix (`{prefix}`) from the

    99      DataTable object to populate.

   100 

   101      @protected

   102      @property _colNameRegex

   103      @type String

   104      @since 3.13.0

   105      */

   106     _colNameRegex: '{prefix}-col-(\\S*)',

   107 

   108     /**

   109      This object will contain any delegates created when their feature is

   110      turned on.

   111 

   112      @protected

   113      @property _highlightDelegates

   114      @type Object

   115      @since 3.13.0

   116      */

   117     _highlightDelegates: {},

   118 

   119     /**

   120      Default setter method for row highlighting. If the value is true, a

   121      delegate is created and stored in `this._highlightDelegates.row`. This

   122      delegate will add/remove the row highlight classname to/from the row when

   123      the mouse enters/leaves a row on the `tbody`

   124 

   125      @protected

   126      @method _setHighlightRows

   127      @param {Boolean} val

   128      @return val

   129      @since 3.13.0

   130      */

   131     _setHighlightRows: function (val) {

   132         var del = this._highlightDelegates;

   133 

   134         if (del.row) {

   135             del.row.detach();

   136         }

   137 

   138         if (val === true) {

   139             del.row = this.delegate('hover',

   140                 Y.bind(this._highlightRow, this),

   141                 Y.bind(this._highlightRow, this),

   142             "tbody tr");

   143         }

   144 

   145         return val;

   146     },

   147 

   148     /**

   149      Default setter method for column highlighting. If the value is true, a

   150      delegate is created and stored in `this._highlightDelegates.col`. This

   151      delegate will add/remove the column highlight classname to/from the

   152      column when the mouse enters/leaves a column on the `tbody`

   153 

   154      @protected

   155      @method _setHighlightCols

   156      @param {Boolean} val

   157      @return val

   158      @since 3.13.0

   159      */

   160     _setHighlightCols: function (val) {

   161         var del = this._highlightDelegates;

   162 

   163         if (del.col) {

   164             del.col.detach();

   165         }

   166 

   167         if (val === true) {

   168             this._buildColSelRegex();

   169 

   170             del.col = this.delegate('hover',

   171                 Y.bind(this._highlightCol, this),

   172                 Y.bind(this._highlightCol, this),

   173             "tr td");

   174         }

   175     },

   176 

   177     /**

   178      Default setter method for cell highlighting. If the value is true, a

   179      delegate is created and stored in `this._highlightDelegates.cell`. This

   180      delegate will add/remove the cell highlight classname to/from the cell

   181      when the mouse enters/leaves a cell on the `tbody`

   182 

   183      @protected

   184      @method _setHighlightCells

   185      @param {Boolean} val

   186      @return val

   187      @since 3.13.0

   188      */

   189     _setHighlightCells: function (val) {

   190         var del = this._highlightDelegates;

   191 

   192         if (del.cell) {

   193             del.cell.detach();

   194         }

   195 

   196         if (val === true) {

   197 

   198             del.cell = this.delegate('hover',

   199                 Y.bind(this._highlightCell, this),

   200                 Y.bind(this._highlightCell, this),

   201             "tbody td");

   202         }

   203 

   204         return val;

   205     },

   206 

   207     /**

   208      Method called to turn on or off the row highlighting when the mouse

   209      enters or leaves the row. This is determined by the event phase of the

   210      hover event. Where `over` will turn on the highlighting and anything else

   211      will turn it off.

   212 

   213      @protected

   214      @method _highlightRow

   215      @param {EventFacade} e Event from the hover event

   216      @since 3.13.0

   217      */

   218     _highlightRow: function (e) {

   219         e.currentTarget.toggleClass(this.highlightClassNames.row, (e.phase === 'over'));

   220     },

   221 

   222     /**

   223      Method called to turn on or off the column highlighting when the mouse

   224      enters or leaves the column. This is determined by the event phase of the

   225      hover event. Where `over` will turn on the highlighting and anything else

   226      will turn it off.

   227 

   228      @protected

   229      @method _highlightCol

   230      @param {EventFacade} e Event from the hover event

   231      @since 3.13.0

   232      */

   233     _highlightCol: function(e) {

   234         var colName = this._colNameRegex.exec(e.currentTarget.getAttribute('class')),

   235             selector = Y.Lang.sub(this._colSelector, {

   236                 prefix: this._cssPrefix,

   237                 col: colName[1]

   238             });

   239 

   240         this.view.tableNode.all(selector).toggleClass(this.highlightClassNames.col, (e.phase === 'over'));

   241     },

   242 

   243     /**

   244      Method called to turn on or off the cell highlighting when the mouse

   245      enters or leaves the cell. This is determined by the event phase of the

   246      hover event. Where `over` will turn on the highlighting and anything else

   247      will turn it off.

   248 

   249      @protected

   250      @method _highlightCell

   251      @param {EventFacade} e Event from the hover event

   252      @since 3.13.0

   253      */

   254     _highlightCell: function(e) {

   255         e.currentTarget.toggleClass(this.highlightClassNames.cell, (e.phase === 'over'));

   256     },

   257 

   258     /**

   259      Used to transform the `_colNameRegex` to a Regular Expression when the

   260      column highlighting is initially turned on. If `_colNameRegex` is not a

   261      string when this method is called, no action is taken.

   262 

   263      @protected

   264      @method _buildColSelRegex

   265      @since 3.13.0

   266      */

   267     _buildColSelRegex: function () {

   268         var str = this._colNameRegex,

   269             regex;

   270 

   271         if (typeof str === 'string') {

   272             this._colNameRegex = new RegExp(Y.Lang.sub(str, { prefix: this._cssPrefix }));

   273         }

   274     }

   275 };

   276 

   277 Y.DataTable.Highlight = Highlight;

   278 

   279 Y.Base.mix(Y.DataTable, [Y.DataTable.Highlight]);

   280 

   281 

   282 }, '@VERSION@', {"requires": ["datatable-base", "event-hover"], "skinnable": true});