lib/yuilib/3.13.0/datatable-highlight/datatable-highlight.js

   1 /*
   2 YUI 3.13.0 (build 508226d)
   3 Copyright 2013 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7
   8 YUI.add('datatable-highlight', function (Y, NAME) {
   9
  10 /**
  11  Adds support for highlighting columns with the mouse in a DataTable
  12
  13  @module datatable
  14  @submodule datatable-highlight
  15  @since 3.13.0
  16  */
  17
  18
  19 var getClassName = Y.ClassNameManager.getClassName;
  20
  21 /**
  22  @class DataTable.Highlight
  23  @since 3.13.0
  24  */
  25 function Highlight() {}
  26
  27 Highlight.ATTRS = {
  28     /**
  29      Setting this to true will create a delegate on the DataTable adding the
  30      default classname to the row when the mouse is over the row.
  31
  32      @attribute highlightRows
  33      @default false
  34      @since 3.13.0
  35      */
  36     highlightRows: {
  37         value: false,
  38         setter: '_setHighlightRows',
  39         validator: Y.Lang.isBoolean
  40     },
  41
  42     /**
  43      Setting this to true will create a delegate on the DataTable adding the
  44      default classname to the column when the mouse is over the column.
  45
  46      @attribute highlightCols
  47      @default false
  48      @since 3.13.0
  49      */
  50     highlightCols: {
  51         value: false,
  52         setter: '_setHighlightCols',
  53         validator: Y.Lang.isBoolean
  54     },
  55
  56     /**
  57      Setting this to true will create a delegate on the DataTable adding the
  58      default classname to the cell when the mouse is over it.
  59
  60      @attribute highlightCells
  61      @default false
  62      @since 3.13.0
  63      */
  64     highlightCells: {
  65         value: false,
  66         setter: '_setHighlightCells',
  67         validator: Y.Lang.isBoolean
  68     }
  69 };
  70
  71
  72 Highlight.prototype = {
  73
  74     /**
  75      An object consisting of classnames for a `row`, a `col` and a `cell` to
  76      be applied to their respective objects when the user moves the mouse over
  77      the item and the attribute is set to true.
  78
  79      @public
  80      @property highlightClassNames
  81      @type Object
  82      @since 3.13.0
  83      */
  84     highlightClassNames: {
  85         row: getClassName(NAME, 'row'),
  86         col: getClassName(NAME, 'col'),
  87         cell: getClassName(NAME, 'cell')
  88     },
  89
  90     /**
  91      A string that is used to create a column selector when the column is has
  92      the mouse over it. Can contain the css prefix (`{prefix}`) and the column
  93      name (`{col}`). Further substitution will require `_highlightCol` to be
  94      overwritten.
  95
  96      @protected
  97      @property _colSelector
  98      @type String
  99      @since 3.13.0
 100      */
 101     _colSelector: '.{prefix}-data .{prefix}-col-{col}',
 102
 103     /**
 104      A string that will be used to create Regular Expression when column
 105      highlighting is set to true. Uses the css prefix (`{prefix}`) from the
 106      DataTable object to populate.
 107
 108      @protected
 109      @property _colNameRegex
 110      @type String
 111      @since 3.13.0
 112      */
 113     _colNameRegex: '{prefix}-col-(\\S*)',
 114
 115     /**
 116      This object will contain any delegates created when their feature is
 117      turned on.
 118
 119      @protected
 120      @property _highlightDelegates
 121      @type Object
 122      @since 3.13.0
 123      */
 124     _highlightDelegates: {},
 125
 126     /**
 127      Default setter method for row highlighting. If the value is true, a
 128      delegate is created and stored in `this._highlightDelegates.row`. This
 129      delegate will add/remove the row highlight classname to/from the row when
 130      the mouse enters/leaves a row on the `tbody`
 131
 132      @protected
 133      @method _setHighlightRows
 134      @param {Boolean} val
 135      @return val
 136      @since 3.13.0
 137      */
 138     _setHighlightRows: function (val) {
 139         var del = this._highlightDelegates;
 140
 141         if (del.row) {
 142             del.row.detach();
 143         }
 144
 145         if (val === true) {
 146             del.row = this.delegate('hover',
 147                 Y.bind(this._highlightRow, this),
 148                 Y.bind(this._highlightRow, this),
 149             "tbody tr");
 150         }
 151
 152         return val;
 153     },
 154
 155     /**
 156      Default setter method for column highlighting. If the value is true, a
 157      delegate is created and stored in `this._highlightDelegates.col`. This
 158      delegate will add/remove the column highlight classname to/from the
 159      column when the mouse enters/leaves a column on the `tbody`
 160
 161      @protected
 162      @method _setHighlightCols
 163      @param {Boolean} val
 164      @return val
 165      @since 3.13.0
 166      */
 167     _setHighlightCols: function (val) {
 168         var del = this._highlightDelegates;
 169
 170         if (del.col) {
 171             del.col.detach();
 172         }
 173
 174         if (val === true) {
 175             this._buildColSelRegex();
 176
 177             del.col = this.delegate('hover',
 178                 Y.bind(this._highlightCol, this),
 179                 Y.bind(this._highlightCol, this),
 180             "tr td");
 181         }
 182     },
 183
 184     /**
 185      Default setter method for cell highlighting. If the value is true, a
 186      delegate is created and stored in `this._highlightDelegates.cell`. This
 187      delegate will add/remove the cell highlight classname to/from the cell
 188      when the mouse enters/leaves a cell on the `tbody`
 189
 190      @protected
 191      @method _setHighlightCells
 192      @param {Boolean} val
 193      @return val
 194      @since 3.13.0
 195      */
 196     _setHighlightCells: function (val) {
 197         var del = this._highlightDelegates;
 198
 199         if (del.cell) {
 200             del.cell.detach();
 201         }
 202
 203         if (val === true) {
 204
 205             del.cell = this.delegate('hover',
 206                 Y.bind(this._highlightCell, this),
 207                 Y.bind(this._highlightCell, this),
 208             "tbody td");
 209         }
 210
 211         return val;
 212     },
 213
 214     /**
 215      Method called to turn on or off the row highlighting when the mouse
 216      enters or leaves the row. This is determined by the event phase of the
 217      hover event. Where `over` will turn on the highlighting and anything else
 218      will turn it off.
 219
 220      @protected
 221      @method _highlightRow
 222      @param {EventFacade} e Event from the hover event
 223      @since 3.13.0
 224      */
 225     _highlightRow: function (e) {
 226         e.currentTarget.toggleClass(this.highlightClassNames.row, (e.phase === 'over'));
 227     },
 228
 229     /**
 230      Method called to turn on or off the column highlighting when the mouse
 231      enters or leaves the column. This is determined by the event phase of the
 232      hover event. Where `over` will turn on the highlighting and anything else
 233      will turn it off.
 234
 235      @protected
 236      @method _highlightCol
 237      @param {EventFacade} e Event from the hover event
 238      @since 3.13.0
 239      */
 240     _highlightCol: function(e) {
 241         var colName = this._colNameRegex.exec(e.currentTarget.getAttribute('class')),
 242             selector = Y.Lang.sub(this._colSelector, {
 243                 prefix: this._cssPrefix,
 244                 col: colName[1]
 245             });
 246
 247         this.view.tableNode.all(selector).toggleClass(this.highlightClassNames.col, (e.phase === 'over'));
 248     },
 249
 250     /**
 251      Method called to turn on or off the cell highlighting when the mouse
 252      enters or leaves the cell. This is determined by the event phase of the
 253      hover event. Where `over` will turn on the highlighting and anything else
 254      will turn it off.
 255
 256      @protected
 257      @method _highlightCell
 258      @param {EventFacade} e Event from the hover event
 259      @since 3.13.0
 260      */
 261     _highlightCell: function(e) {
 262         e.currentTarget.toggleClass(this.highlightClassNames.cell, (e.phase === 'over'));
 263     },
 264
 265     /**
 266      Used to transform the `_colNameRegex` to a Regular Expression when the
 267      column highlighting is initially turned on. If `_colNameRegex` is not a
 268      string when this method is called, no action is taken.
 269
 270      @protected
 271      @method _buildColSelRegex
 272      @since 3.13.0
 273      */
 274     _buildColSelRegex: function () {
 275         var str = this._colNameRegex,
 276             regex;
 277
 278         if (typeof str === 'string') {
 279             this._colNameRegex = new RegExp(Y.Lang.sub(str, { prefix: this._cssPrefix }));
 280         }
 281     }
 282 };
 283
 284 Y.DataTable.Highlight = Highlight;
 285
 286 Y.Base.mix(Y.DataTable, [Y.DataTable.Highlight]);
 287
 288
 289 }, '3.13.0', {"requires": ["datatable-base", "event-hover"], "skinnable": true});