[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 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.17.2', {"requires": ["datatable-base", "event-hover"], "skinnable": true});