API Docs for: 3.17.2
Show:

File: datatable/js/highlight.js

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