|
1 /* |
|
2 YUI 3.10.3 (build 2fb5187) |
|
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-body', function (Y, NAME) { |
|
9 |
|
10 /** |
|
11 View class responsible for rendering the `<tbody>` section of a table. Used as |
|
12 the default `bodyView` for `Y.DataTable.Base` and `Y.DataTable` classes. |
|
13 |
|
14 @module datatable |
|
15 @submodule datatable-body |
|
16 @since 3.5.0 |
|
17 **/ |
|
18 var Lang = Y.Lang, |
|
19 isArray = Lang.isArray, |
|
20 isNumber = Lang.isNumber, |
|
21 isString = Lang.isString, |
|
22 fromTemplate = Lang.sub, |
|
23 htmlEscape = Y.Escape.html, |
|
24 toArray = Y.Array, |
|
25 bind = Y.bind, |
|
26 YObject = Y.Object, |
|
27 valueRegExp = /\{value\}/g; |
|
28 |
|
29 /** |
|
30 View class responsible for rendering the `<tbody>` section of a table. Used as |
|
31 the default `bodyView` for `Y.DataTable.Base` and `Y.DataTable` classes. |
|
32 |
|
33 Translates the provided `modelList` into a rendered `<tbody>` based on the data |
|
34 in the constituent Models, altered or ammended by any special column |
|
35 configurations. |
|
36 |
|
37 The `columns` configuration, passed to the constructor, determines which |
|
38 columns will be rendered. |
|
39 |
|
40 The rendering process involves constructing an HTML template for a complete row |
|
41 of data, built by concatenating a customized copy of the instance's |
|
42 `CELL_TEMPLATE` into the `ROW_TEMPLATE` once for each column. This template is |
|
43 then populated with values from each Model in the `modelList`, aggregating a |
|
44 complete HTML string of all row and column data. A `<tbody>` Node is then created from the markup and any column `nodeFormatter`s are applied. |
|
45 |
|
46 Supported properties of the column objects include: |
|
47 |
|
48 * `key` - Used to link a column to an attribute in a Model. |
|
49 * `name` - Used for columns that don't relate to an attribute in the Model |
|
50 (`formatter` or `nodeFormatter` only) if the implementer wants a |
|
51 predictable name to refer to in their CSS. |
|
52 * `cellTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells in this |
|
53 column only. |
|
54 * `formatter` - Used to customize or override the content value from the |
|
55 Model. These do not have access to the cell or row Nodes and should |
|
56 return string (HTML) content. |
|
57 * `nodeFormatter` - Used to provide content for a cell as well as perform any |
|
58 custom modifications on the cell or row Node that could not be performed by |
|
59 `formatter`s. Should be used sparingly for better performance. |
|
60 * `emptyCellValue` - String (HTML) value to use if the Model data for a |
|
61 column, or the content generated by a `formatter`, is the empty string, |
|
62 `null`, or `undefined`. |
|
63 * `allowHTML` - Set to `true` if a column value, `formatter`, or |
|
64 `emptyCellValue` can contain HTML. This defaults to `false` to protect |
|
65 against XSS. |
|
66 * `className` - Space delimited CSS classes to add to all `<td>`s in a column. |
|
67 |
|
68 A column `formatter` can be: |
|
69 |
|
70 * a function, as described below. |
|
71 * a string which can be: |
|
72 * the name of a pre-defined formatter function |
|
73 which can be located in the `Y.DataTable.BodyView.Formatters` hash using the |
|
74 value of the `formatter` property as the index. |
|
75 * A template that can use the `{value}` placeholder to include the value |
|
76 for the current cell or the name of any field in the underlaying model |
|
77 also enclosed in curly braces. Any number and type of these placeholders |
|
78 can be used. |
|
79 |
|
80 Column `formatter`s are passed an object (`o`) with the following properties: |
|
81 |
|
82 * `value` - The current value of the column's associated attribute, if any. |
|
83 * `data` - An object map of Model keys to their current values. |
|
84 * `record` - The Model instance. |
|
85 * `column` - The column configuration object for the current column. |
|
86 * `className` - Initially empty string to allow `formatter`s to add CSS |
|
87 classes to the cell's `<td>`. |
|
88 * `rowIndex` - The zero-based row number. |
|
89 * `rowClass` - Initially empty string to allow `formatter`s to add CSS |
|
90 classes to the cell's containing row `<tr>`. |
|
91 |
|
92 They may return a value or update `o.value` to assign specific HTML content. A |
|
93 returned value has higher precedence. |
|
94 |
|
95 Column `nodeFormatter`s are passed an object (`o`) with the following |
|
96 properties: |
|
97 |
|
98 * `value` - The current value of the column's associated attribute, if any. |
|
99 * `td` - The `<td>` Node instance. |
|
100 * `cell` - The `<div>` liner Node instance if present, otherwise, the `<td>`. |
|
101 When adding content to the cell, prefer appending into this property. |
|
102 * `data` - An object map of Model keys to their current values. |
|
103 * `record` - The Model instance. |
|
104 * `column` - The column configuration object for the current column. |
|
105 * `rowIndex` - The zero-based row number. |
|
106 |
|
107 They are expected to inject content into the cell's Node directly, including |
|
108 any "empty" cell content. Each `nodeFormatter` will have access through the |
|
109 Node API to all cells and rows in the `<tbody>`, but not to the `<table>`, as |
|
110 it will not be attached yet. |
|
111 |
|
112 If a `nodeFormatter` returns `false`, the `o.td` and `o.cell` Nodes will be |
|
113 `destroy()`ed to remove them from the Node cache and free up memory. The DOM |
|
114 elements will remain as will any content added to them. _It is highly |
|
115 advisable to always return `false` from your `nodeFormatter`s_. |
|
116 |
|
117 @class BodyView |
|
118 @namespace DataTable |
|
119 @extends View |
|
120 @since 3.5.0 |
|
121 **/ |
|
122 Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], { |
|
123 // -- Instance properties ------------------------------------------------- |
|
124 |
|
125 /** |
|
126 HTML template used to create table cells. |
|
127 |
|
128 @property CELL_TEMPLATE |
|
129 @type {HTML} |
|
130 @default '<td {headers} class="{className}">{content}</td>' |
|
131 @since 3.5.0 |
|
132 **/ |
|
133 CELL_TEMPLATE: '<td {headers} class="{className}">{content}</td>', |
|
134 |
|
135 /** |
|
136 CSS class applied to even rows. This is assigned at instantiation. |
|
137 |
|
138 For DataTable, this will be `yui3-datatable-even`. |
|
139 |
|
140 @property CLASS_EVEN |
|
141 @type {String} |
|
142 @default 'yui3-table-even' |
|
143 @since 3.5.0 |
|
144 **/ |
|
145 //CLASS_EVEN: null |
|
146 |
|
147 /** |
|
148 CSS class applied to odd rows. This is assigned at instantiation. |
|
149 |
|
150 When used by DataTable instances, this will be `yui3-datatable-odd`. |
|
151 |
|
152 @property CLASS_ODD |
|
153 @type {String} |
|
154 @default 'yui3-table-odd' |
|
155 @since 3.5.0 |
|
156 **/ |
|
157 //CLASS_ODD: null |
|
158 |
|
159 /** |
|
160 HTML template used to create table rows. |
|
161 |
|
162 @property ROW_TEMPLATE |
|
163 @type {HTML} |
|
164 @default '<tr id="{rowId}" data-yui3-record="{clientId}" class="{rowClass}">{content}</tr>' |
|
165 @since 3.5.0 |
|
166 **/ |
|
167 ROW_TEMPLATE : '<tr id="{rowId}" data-yui3-record="{clientId}" class="{rowClass}">{content}</tr>', |
|
168 |
|
169 /** |
|
170 The object that serves as the source of truth for column and row data. |
|
171 This property is assigned at instantiation from the `host` property of |
|
172 the configuration object passed to the constructor. |
|
173 |
|
174 @property host |
|
175 @type {Object} |
|
176 @default (initially unset) |
|
177 @since 3.5.0 |
|
178 **/ |
|
179 //TODO: should this be protected? |
|
180 //host: null, |
|
181 |
|
182 /** |
|
183 HTML templates used to create the `<tbody>` containing the table rows. |
|
184 |
|
185 @property TBODY_TEMPLATE |
|
186 @type {HTML} |
|
187 @default '<tbody class="{className}">{content}</tbody>' |
|
188 @since 3.6.0 |
|
189 **/ |
|
190 TBODY_TEMPLATE: '<tbody class="{className}"></tbody>', |
|
191 |
|
192 // -- Public methods ------------------------------------------------------ |
|
193 |
|
194 /** |
|
195 Returns the `<td>` Node from the given row and column index. Alternately, |
|
196 the `seed` can be a Node. If so, the nearest ancestor cell is returned. |
|
197 If the `seed` is a cell, it is returned. If there is no cell at the given |
|
198 coordinates, `null` is returned. |
|
199 |
|
200 Optionally, include an offset array or string to return a cell near the |
|
201 cell identified by the `seed`. The offset can be an array containing the |
|
202 number of rows to shift followed by the number of columns to shift, or one |
|
203 of "above", "below", "next", or "previous". |
|
204 |
|
205 <pre><code>// Previous cell in the previous row |
|
206 var cell = table.getCell(e.target, [-1, -1]); |
|
207 |
|
208 // Next cell |
|
209 var cell = table.getCell(e.target, 'next'); |
|
210 var cell = table.getCell(e.taregt, [0, 1];</pre></code> |
|
211 |
|
212 @method getCell |
|
213 @param {Number[]|Node} seed Array of row and column indexes, or a Node that |
|
214 is either the cell itself or a descendant of one. |
|
215 @param {Number[]|String} [shift] Offset by which to identify the returned |
|
216 cell Node |
|
217 @return {Node} |
|
218 @since 3.5.0 |
|
219 **/ |
|
220 getCell: function (seed, shift) { |
|
221 var tbody = this.tbodyNode, |
|
222 row, cell, index, rowIndexOffset; |
|
223 |
|
224 if (seed && tbody) { |
|
225 if (isArray(seed)) { |
|
226 row = tbody.get('children').item(seed[0]); |
|
227 cell = row && row.get('children').item(seed[1]); |
|
228 } else if (Y.instanceOf(seed, Y.Node)) { |
|
229 cell = seed.ancestor('.' + this.getClassName('cell'), true); |
|
230 } |
|
231 |
|
232 if (cell && shift) { |
|
233 rowIndexOffset = tbody.get('firstChild.rowIndex'); |
|
234 if (isString(shift)) { |
|
235 // TODO this should be a static object map |
|
236 switch (shift) { |
|
237 case 'above' : shift = [-1, 0]; break; |
|
238 case 'below' : shift = [1, 0]; break; |
|
239 case 'next' : shift = [0, 1]; break; |
|
240 case 'previous': shift = [0, -1]; break; |
|
241 } |
|
242 } |
|
243 |
|
244 if (isArray(shift)) { |
|
245 index = cell.get('parentNode.rowIndex') + |
|
246 shift[0] - rowIndexOffset; |
|
247 row = tbody.get('children').item(index); |
|
248 |
|
249 index = cell.get('cellIndex') + shift[1]; |
|
250 cell = row && row.get('children').item(index); |
|
251 } |
|
252 } |
|
253 } |
|
254 |
|
255 return cell || null; |
|
256 }, |
|
257 |
|
258 /** |
|
259 Returns the generated CSS classname based on the input. If the `host` |
|
260 attribute is configured, it will attempt to relay to its `getClassName` |
|
261 or use its static `NAME` property as a string base. |
|
262 |
|
263 If `host` is absent or has neither method nor `NAME`, a CSS classname |
|
264 will be generated using this class's `NAME`. |
|
265 |
|
266 @method getClassName |
|
267 @param {String} token* Any number of token strings to assemble the |
|
268 classname from. |
|
269 @return {String} |
|
270 @protected |
|
271 @since 3.5.0 |
|
272 **/ |
|
273 getClassName: function () { |
|
274 var host = this.host, |
|
275 args; |
|
276 |
|
277 if (host && host.getClassName) { |
|
278 return host.getClassName.apply(host, arguments); |
|
279 } else { |
|
280 args = toArray(arguments); |
|
281 args.unshift(this.constructor.NAME); |
|
282 return Y.ClassNameManager.getClassName |
|
283 .apply(Y.ClassNameManager, args); |
|
284 } |
|
285 }, |
|
286 |
|
287 /** |
|
288 Returns the Model associated to the row Node or id provided. Passing the |
|
289 Node or id for a descendant of the row also works. |
|
290 |
|
291 If no Model can be found, `null` is returned. |
|
292 |
|
293 @method getRecord |
|
294 @param {String|Node} seed Row Node or `id`, or one for a descendant of a row |
|
295 @return {Model} |
|
296 @since 3.5.0 |
|
297 **/ |
|
298 getRecord: function (seed) { |
|
299 var modelList = this.get('modelList'), |
|
300 tbody = this.tbodyNode, |
|
301 row = null, |
|
302 record; |
|
303 |
|
304 if (tbody) { |
|
305 if (isString(seed)) { |
|
306 seed = tbody.one('#' + seed); |
|
307 } |
|
308 |
|
309 if (Y.instanceOf(seed, Y.Node)) { |
|
310 row = seed.ancestor(function (node) { |
|
311 return node.get('parentNode').compareTo(tbody); |
|
312 }, true); |
|
313 |
|
314 record = row && |
|
315 modelList.getByClientId(row.getData('yui3-record')); |
|
316 } |
|
317 } |
|
318 |
|
319 return record || null; |
|
320 }, |
|
321 |
|
322 /** |
|
323 Returns the `<tr>` Node from the given row index, Model, or Model's |
|
324 `clientId`. If the rows haven't been rendered yet, or if the row can't be |
|
325 found by the input, `null` is returned. |
|
326 |
|
327 @method getRow |
|
328 @param {Number|String|Model} id Row index, Model instance, or clientId |
|
329 @return {Node} |
|
330 @since 3.5.0 |
|
331 **/ |
|
332 getRow: function (id) { |
|
333 var tbody = this.tbodyNode, |
|
334 row = null; |
|
335 |
|
336 if (tbody) { |
|
337 if (id) { |
|
338 id = this._idMap[id.get ? id.get('clientId') : id] || id; |
|
339 } |
|
340 |
|
341 row = isNumber(id) ? |
|
342 tbody.get('children').item(id) : |
|
343 tbody.one('#' + id); |
|
344 } |
|
345 |
|
346 return row; |
|
347 }, |
|
348 |
|
349 /** |
|
350 Creates the table's `<tbody>` content by assembling markup generated by |
|
351 populating the `ROW\_TEMPLATE`, and `CELL\_TEMPLATE` templates with content |
|
352 from the `columns` and `modelList` attributes. |
|
353 |
|
354 The rendering process happens in three stages: |
|
355 |
|
356 1. A row template is assembled from the `columns` attribute (see |
|
357 `_createRowTemplate`) |
|
358 |
|
359 2. An HTML string is built up by concatening the application of the data in |
|
360 each Model in the `modelList` to the row template. For cells with |
|
361 `formatter`s, the function is called to generate cell content. Cells |
|
362 with `nodeFormatter`s are ignored. For all other cells, the data value |
|
363 from the Model attribute for the given column key is used. The |
|
364 accumulated row markup is then inserted into the container. |
|
365 |
|
366 3. If any column is configured with a `nodeFormatter`, the `modelList` is |
|
367 iterated again to apply the `nodeFormatter`s. |
|
368 |
|
369 Supported properties of the column objects include: |
|
370 |
|
371 * `key` - Used to link a column to an attribute in a Model. |
|
372 * `name` - Used for columns that don't relate to an attribute in the Model |
|
373 (`formatter` or `nodeFormatter` only) if the implementer wants a |
|
374 predictable name to refer to in their CSS. |
|
375 * `cellTemplate` - Overrides the instance's `CELL_TEMPLATE` for cells in |
|
376 this column only. |
|
377 * `formatter` - Used to customize or override the content value from the |
|
378 Model. These do not have access to the cell or row Nodes and should |
|
379 return string (HTML) content. |
|
380 * `nodeFormatter` - Used to provide content for a cell as well as perform |
|
381 any custom modifications on the cell or row Node that could not be |
|
382 performed by `formatter`s. Should be used sparingly for better |
|
383 performance. |
|
384 * `emptyCellValue` - String (HTML) value to use if the Model data for a |
|
385 column, or the content generated by a `formatter`, is the empty string, |
|
386 `null`, or `undefined`. |
|
387 * `allowHTML` - Set to `true` if a column value, `formatter`, or |
|
388 `emptyCellValue` can contain HTML. This defaults to `false` to protect |
|
389 against XSS. |
|
390 * `className` - Space delimited CSS classes to add to all `<td>`s in a |
|
391 column. |
|
392 |
|
393 Column `formatter`s are passed an object (`o`) with the following |
|
394 properties: |
|
395 |
|
396 * `value` - The current value of the column's associated attribute, if |
|
397 any. |
|
398 * `data` - An object map of Model keys to their current values. |
|
399 * `record` - The Model instance. |
|
400 * `column` - The column configuration object for the current column. |
|
401 * `className` - Initially empty string to allow `formatter`s to add CSS |
|
402 classes to the cell's `<td>`. |
|
403 * `rowIndex` - The zero-based row number. |
|
404 * `rowClass` - Initially empty string to allow `formatter`s to add CSS |
|
405 classes to the cell's containing row `<tr>`. |
|
406 |
|
407 They may return a value or update `o.value` to assign specific HTML |
|
408 content. A returned value has higher precedence. |
|
409 |
|
410 Column `nodeFormatter`s are passed an object (`o`) with the following |
|
411 properties: |
|
412 |
|
413 * `value` - The current value of the column's associated attribute, if |
|
414 any. |
|
415 * `td` - The `<td>` Node instance. |
|
416 * `cell` - The `<div>` liner Node instance if present, otherwise, the |
|
417 `<td>`. When adding content to the cell, prefer appending into this |
|
418 property. |
|
419 * `data` - An object map of Model keys to their current values. |
|
420 * `record` - The Model instance. |
|
421 * `column` - The column configuration object for the current column. |
|
422 * `rowIndex` - The zero-based row number. |
|
423 |
|
424 They are expected to inject content into the cell's Node directly, including |
|
425 any "empty" cell content. Each `nodeFormatter` will have access through the |
|
426 Node API to all cells and rows in the `<tbody>`, but not to the `<table>`, |
|
427 as it will not be attached yet. |
|
428 |
|
429 If a `nodeFormatter` returns `false`, the `o.td` and `o.cell` Nodes will be |
|
430 `destroy()`ed to remove them from the Node cache and free up memory. The |
|
431 DOM elements will remain as will any content added to them. _It is highly |
|
432 advisable to always return `false` from your `nodeFormatter`s_. |
|
433 |
|
434 @method render |
|
435 @return {BodyView} The instance |
|
436 @chainable |
|
437 @since 3.5.0 |
|
438 **/ |
|
439 render: function () { |
|
440 var table = this.get('container'), |
|
441 data = this.get('modelList'), |
|
442 columns = this.get('columns'), |
|
443 tbody = this.tbodyNode || |
|
444 (this.tbodyNode = this._createTBodyNode()); |
|
445 |
|
446 // Needed for mutation |
|
447 this._createRowTemplate(columns); |
|
448 |
|
449 if (data) { |
|
450 tbody.setHTML(this._createDataHTML(columns)); |
|
451 |
|
452 this._applyNodeFormatters(tbody, columns); |
|
453 } |
|
454 |
|
455 if (tbody.get('parentNode') !== table) { |
|
456 table.appendChild(tbody); |
|
457 } |
|
458 |
|
459 this._afterRenderCleanup(); |
|
460 |
|
461 this.bindUI(); |
|
462 |
|
463 return this; |
|
464 }, |
|
465 |
|
466 // -- Protected and private methods --------------------------------------- |
|
467 /** |
|
468 Handles changes in the source's columns attribute. Redraws the table data. |
|
469 |
|
470 @method _afterColumnsChange |
|
471 @param {EventFacade} e The `columnsChange` event object |
|
472 @protected |
|
473 @since 3.5.0 |
|
474 **/ |
|
475 // TODO: Preserve existing DOM |
|
476 // This will involve parsing and comparing the old and new column configs |
|
477 // and reacting to four types of changes: |
|
478 // 1. formatter, nodeFormatter, emptyCellValue changes |
|
479 // 2. column deletions |
|
480 // 3. column additions |
|
481 // 4. column moves (preserve cells) |
|
482 _afterColumnsChange: function () { |
|
483 this.render(); |
|
484 }, |
|
485 |
|
486 /** |
|
487 Handles modelList changes, including additions, deletions, and updates. |
|
488 |
|
489 Modifies the existing table DOM accordingly. |
|
490 |
|
491 @method _afterDataChange |
|
492 @param {EventFacade} e The `change` event from the ModelList |
|
493 @protected |
|
494 @since 3.5.0 |
|
495 **/ |
|
496 _afterDataChange: function () { |
|
497 //var type = e.type.slice(e.type.lastIndexOf(':') + 1); |
|
498 |
|
499 // TODO: Isolate changes |
|
500 this.render(); |
|
501 }, |
|
502 |
|
503 /** |
|
504 Handles replacement of the modelList. |
|
505 |
|
506 Rerenders the `<tbody>` contents. |
|
507 |
|
508 @method _afterModelListChange |
|
509 @param {EventFacade} e The `modelListChange` event |
|
510 @protected |
|
511 @since 3.6.0 |
|
512 **/ |
|
513 _afterModelListChange: function () { |
|
514 var handles = this._eventHandles; |
|
515 |
|
516 if (handles.dataChange) { |
|
517 handles.dataChange.detach(); |
|
518 delete handles.dataChange; |
|
519 this.bindUI(); |
|
520 } |
|
521 |
|
522 if (this.tbodyNode) { |
|
523 this.render(); |
|
524 } |
|
525 }, |
|
526 |
|
527 /** |
|
528 Iterates the `modelList`, and calls any `nodeFormatter`s found in the |
|
529 `columns` param on the appropriate cell Nodes in the `tbody`. |
|
530 |
|
531 @method _applyNodeFormatters |
|
532 @param {Node} tbody The `<tbody>` Node whose columns to update |
|
533 @param {Object[]} columns The column configurations |
|
534 @protected |
|
535 @since 3.5.0 |
|
536 **/ |
|
537 _applyNodeFormatters: function (tbody, columns) { |
|
538 var host = this.host, |
|
539 data = this.get('modelList'), |
|
540 formatters = [], |
|
541 linerQuery = '.' + this.getClassName('liner'), |
|
542 rows, i, len; |
|
543 |
|
544 // Only iterate the ModelList again if there are nodeFormatters |
|
545 for (i = 0, len = columns.length; i < len; ++i) { |
|
546 if (columns[i].nodeFormatter) { |
|
547 formatters.push(i); |
|
548 } |
|
549 } |
|
550 |
|
551 if (data && formatters.length) { |
|
552 rows = tbody.get('childNodes'); |
|
553 |
|
554 data.each(function (record, index) { |
|
555 var formatterData = { |
|
556 data : record.toJSON(), |
|
557 record : record, |
|
558 rowIndex : index |
|
559 }, |
|
560 row = rows.item(index), |
|
561 i, len, col, key, cells, cell, keep; |
|
562 |
|
563 |
|
564 if (row) { |
|
565 cells = row.get('childNodes'); |
|
566 for (i = 0, len = formatters.length; i < len; ++i) { |
|
567 cell = cells.item(formatters[i]); |
|
568 |
|
569 if (cell) { |
|
570 col = formatterData.column = columns[formatters[i]]; |
|
571 key = col.key || col.id; |
|
572 |
|
573 formatterData.value = record.get(key); |
|
574 formatterData.td = cell; |
|
575 formatterData.cell = cell.one(linerQuery) || cell; |
|
576 |
|
577 keep = col.nodeFormatter.call(host,formatterData); |
|
578 |
|
579 if (keep === false) { |
|
580 // Remove from the Node cache to reduce |
|
581 // memory footprint. This also purges events, |
|
582 // which you shouldn't be scoping to a cell |
|
583 // anyway. You've been warned. Incidentally, |
|
584 // you should always return false. Just sayin. |
|
585 cell.destroy(true); |
|
586 } |
|
587 } |
|
588 } |
|
589 } |
|
590 }); |
|
591 } |
|
592 }, |
|
593 |
|
594 /** |
|
595 Binds event subscriptions from the UI and the host (if assigned). |
|
596 |
|
597 @method bindUI |
|
598 @protected |
|
599 @since 3.5.0 |
|
600 **/ |
|
601 bindUI: function () { |
|
602 var handles = this._eventHandles, |
|
603 modelList = this.get('modelList'), |
|
604 changeEvent = modelList.model.NAME + ':change'; |
|
605 |
|
606 if (!handles.columnsChange) { |
|
607 handles.columnsChange = this.after('columnsChange', |
|
608 bind('_afterColumnsChange', this)); |
|
609 } |
|
610 |
|
611 if (modelList && !handles.dataChange) { |
|
612 handles.dataChange = modelList.after( |
|
613 ['add', 'remove', 'reset', changeEvent], |
|
614 bind('_afterDataChange', this)); |
|
615 } |
|
616 }, |
|
617 |
|
618 /** |
|
619 Iterates the `modelList` and applies each Model to the `_rowTemplate`, |
|
620 allowing any column `formatter` or `emptyCellValue` to override cell |
|
621 content for the appropriate column. The aggregated HTML string is |
|
622 returned. |
|
623 |
|
624 @method _createDataHTML |
|
625 @param {Object[]} columns The column configurations to customize the |
|
626 generated cell content or class names |
|
627 @return {HTML} The markup for all Models in the `modelList`, each applied |
|
628 to the `_rowTemplate` |
|
629 @protected |
|
630 @since 3.5.0 |
|
631 **/ |
|
632 _createDataHTML: function (columns) { |
|
633 var data = this.get('modelList'), |
|
634 html = ''; |
|
635 |
|
636 if (data) { |
|
637 data.each(function (model, index) { |
|
638 html += this._createRowHTML(model, index, columns); |
|
639 }, this); |
|
640 } |
|
641 |
|
642 return html; |
|
643 }, |
|
644 |
|
645 /** |
|
646 Applies the data of a given Model, modified by any column formatters and |
|
647 supplemented by other template values to the instance's `_rowTemplate` (see |
|
648 `_createRowTemplate`). The generated string is then returned. |
|
649 |
|
650 The data from Model's attributes is fetched by `toJSON` and this data |
|
651 object is appended with other properties to supply values to {placeholders} |
|
652 in the template. For a template generated from a Model with 'foo' and 'bar' |
|
653 attributes, the data object would end up with the following properties |
|
654 before being used to populate the `_rowTemplate`: |
|
655 |
|
656 * `clientID` - From Model, used the assign the `<tr>`'s 'id' attribute. |
|
657 * `foo` - The value to populate the 'foo' column cell content. This |
|
658 value will be the value stored in the Model's `foo` attribute, or the |
|
659 result of the column's `formatter` if assigned. If the value is '', |
|
660 `null`, or `undefined`, and the column's `emptyCellValue` is assigned, |
|
661 that value will be used. |
|
662 * `bar` - Same for the 'bar' column cell content. |
|
663 * `foo-className` - String of CSS classes to apply to the `<td>`. |
|
664 * `bar-className` - Same. |
|
665 * `rowClass` - String of CSS classes to apply to the `<tr>`. This |
|
666 will be the odd/even class per the specified index plus any additional |
|
667 classes assigned by column formatters (via `o.rowClass`). |
|
668 |
|
669 Because this object is available to formatters, any additional properties |
|
670 can be added to fill in custom {placeholders} in the `_rowTemplate`. |
|
671 |
|
672 @method _createRowHTML |
|
673 @param {Model} model The Model instance to apply to the row template |
|
674 @param {Number} index The index the row will be appearing |
|
675 @param {Object[]} columns The column configurations |
|
676 @return {HTML} The markup for the provided Model, less any `nodeFormatter`s |
|
677 @protected |
|
678 @since 3.5.0 |
|
679 **/ |
|
680 _createRowHTML: function (model, index, columns) { |
|
681 var data = model.toJSON(), |
|
682 clientId = model.get('clientId'), |
|
683 values = { |
|
684 rowId : this._getRowId(clientId), |
|
685 clientId: clientId, |
|
686 rowClass: (index % 2) ? this.CLASS_ODD : this.CLASS_EVEN |
|
687 }, |
|
688 host = this.host || this, |
|
689 i, len, col, token, value, formatterData; |
|
690 |
|
691 for (i = 0, len = columns.length; i < len; ++i) { |
|
692 col = columns[i]; |
|
693 value = data[col.key]; |
|
694 token = col._id || col.key; |
|
695 |
|
696 values[token + '-className'] = ''; |
|
697 |
|
698 if (col._formatterFn) { |
|
699 formatterData = { |
|
700 value : value, |
|
701 data : data, |
|
702 column : col, |
|
703 record : model, |
|
704 className: '', |
|
705 rowClass : '', |
|
706 rowIndex : index |
|
707 }; |
|
708 |
|
709 // Formatters can either return a value |
|
710 value = col._formatterFn.call(host, formatterData); |
|
711 |
|
712 // or update the value property of the data obj passed |
|
713 if (value === undefined) { |
|
714 value = formatterData.value; |
|
715 } |
|
716 |
|
717 values[token + '-className'] = formatterData.className; |
|
718 values.rowClass += ' ' + formatterData.rowClass; |
|
719 } |
|
720 |
|
721 if (value === undefined || value === null || value === '') { |
|
722 value = col.emptyCellValue || ''; |
|
723 } |
|
724 |
|
725 values[token] = col.allowHTML ? value : htmlEscape(value); |
|
726 |
|
727 values.rowClass = values.rowClass.replace(/\s+/g, ' '); |
|
728 } |
|
729 |
|
730 return fromTemplate(this._rowTemplate, values); |
|
731 }, |
|
732 |
|
733 /** |
|
734 Creates a custom HTML template string for use in generating the markup for |
|
735 individual table rows with {placeholder}s to capture data from the Models |
|
736 in the `modelList` attribute or from column `formatter`s. |
|
737 |
|
738 Assigns the `_rowTemplate` property. |
|
739 |
|
740 @method _createRowTemplate |
|
741 @param {Object[]} columns Array of column configuration objects |
|
742 @protected |
|
743 @since 3.5.0 |
|
744 **/ |
|
745 _createRowTemplate: function (columns) { |
|
746 var html = '', |
|
747 cellTemplate = this.CELL_TEMPLATE, |
|
748 F = Y.DataTable.BodyView.Formatters, |
|
749 i, len, col, key, token, headers, tokenValues, formatter; |
|
750 |
|
751 for (i = 0, len = columns.length; i < len; ++i) { |
|
752 col = columns[i]; |
|
753 key = col.key; |
|
754 token = col._id || key; |
|
755 formatter = col.formatter; |
|
756 // Only include headers if there are more than one |
|
757 headers = (col._headers || []).length > 1 ? |
|
758 'headers="' + col._headers.join(' ') + '"' : ''; |
|
759 |
|
760 tokenValues = { |
|
761 content : '{' + token + '}', |
|
762 headers : headers, |
|
763 className: this.getClassName('col', token) + ' ' + |
|
764 (col.className || '') + ' ' + |
|
765 this.getClassName('cell') + |
|
766 ' {' + token + '-className}' |
|
767 }; |
|
768 if (formatter) { |
|
769 if (Lang.isFunction(formatter)) { |
|
770 col._formatterFn = formatter; |
|
771 } else if (formatter in F) { |
|
772 col._formatterFn = F[formatter].call(this.host || this, col); |
|
773 } else { |
|
774 tokenValues.content = formatter.replace(valueRegExp, tokenValues.content); |
|
775 } |
|
776 } |
|
777 |
|
778 if (col.nodeFormatter) { |
|
779 // Defer all node decoration to the formatter |
|
780 tokenValues.content = ''; |
|
781 } |
|
782 |
|
783 html += fromTemplate(col.cellTemplate || cellTemplate, tokenValues); |
|
784 } |
|
785 |
|
786 this._rowTemplate = fromTemplate(this.ROW_TEMPLATE, { |
|
787 content: html |
|
788 }); |
|
789 }, |
|
790 /** |
|
791 Cleans up temporary values created during rendering. |
|
792 @method _afterRenderCleanup |
|
793 @private |
|
794 */ |
|
795 _afterRenderCleanup: function () { |
|
796 var columns = this.get('columns'), |
|
797 i, len = columns.length; |
|
798 |
|
799 for (i = 0;i < len; i+=1) { |
|
800 delete columns[i]._formatterFn; |
|
801 } |
|
802 |
|
803 }, |
|
804 |
|
805 /** |
|
806 Creates the `<tbody>` node that will store the data rows. |
|
807 |
|
808 @method _createTBodyNode |
|
809 @return {Node} |
|
810 @protected |
|
811 @since 3.6.0 |
|
812 **/ |
|
813 _createTBodyNode: function () { |
|
814 return Y.Node.create(fromTemplate(this.TBODY_TEMPLATE, { |
|
815 className: this.getClassName('data') |
|
816 })); |
|
817 }, |
|
818 |
|
819 /** |
|
820 Destroys the instance. |
|
821 |
|
822 @method destructor |
|
823 @protected |
|
824 @since 3.5.0 |
|
825 **/ |
|
826 destructor: function () { |
|
827 (new Y.EventHandle(YObject.values(this._eventHandles))).detach(); |
|
828 }, |
|
829 |
|
830 /** |
|
831 Holds the event subscriptions needing to be detached when the instance is |
|
832 `destroy()`ed. |
|
833 |
|
834 @property _eventHandles |
|
835 @type {Object} |
|
836 @default undefined (initially unset) |
|
837 @protected |
|
838 @since 3.5.0 |
|
839 **/ |
|
840 //_eventHandles: null, |
|
841 |
|
842 /** |
|
843 Returns the row ID associated with a Model's clientId. |
|
844 |
|
845 @method _getRowId |
|
846 @param {String} clientId The Model clientId |
|
847 @return {String} |
|
848 @protected |
|
849 **/ |
|
850 _getRowId: function (clientId) { |
|
851 return this._idMap[clientId] || (this._idMap[clientId] = Y.guid()); |
|
852 }, |
|
853 |
|
854 /** |
|
855 Map of Model clientIds to row ids. |
|
856 |
|
857 @property _idMap |
|
858 @type {Object} |
|
859 @protected |
|
860 **/ |
|
861 //_idMap, |
|
862 |
|
863 /** |
|
864 Initializes the instance. Reads the following configuration properties in |
|
865 addition to the instance attributes: |
|
866 |
|
867 * `columns` - (REQUIRED) The initial column information |
|
868 * `host` - The object to serve as source of truth for column info and |
|
869 for generating class names |
|
870 |
|
871 @method initializer |
|
872 @param {Object} config Configuration data |
|
873 @protected |
|
874 @since 3.5.0 |
|
875 **/ |
|
876 initializer: function (config) { |
|
877 this.host = config.host; |
|
878 |
|
879 this._eventHandles = { |
|
880 modelListChange: this.after('modelListChange', |
|
881 bind('_afterModelListChange', this)) |
|
882 }; |
|
883 this._idMap = {}; |
|
884 |
|
885 this.CLASS_ODD = this.getClassName('odd'); |
|
886 this.CLASS_EVEN = this.getClassName('even'); |
|
887 |
|
888 } |
|
889 |
|
890 /** |
|
891 The HTML template used to create a full row of markup for a single Model in |
|
892 the `modelList` plus any customizations defined in the column |
|
893 configurations. |
|
894 |
|
895 @property _rowTemplate |
|
896 @type {HTML} |
|
897 @default (initially unset) |
|
898 @protected |
|
899 @since 3.5.0 |
|
900 **/ |
|
901 //_rowTemplate: null |
|
902 },{ |
|
903 /** |
|
904 Hash of formatting functions for cell contents. |
|
905 |
|
906 This property can be populated with a hash of formatting functions by the developer |
|
907 or a set of pre-defined functions can be loaded via the `datatable-formatters` module. |
|
908 |
|
909 See: [DataTable.BodyView.Formatters](./DataTable.BodyView.Formatters.html) |
|
910 @property Formatters |
|
911 @type Object |
|
912 @since 3.8.0 |
|
913 @static |
|
914 **/ |
|
915 Formatters: {} |
|
916 }); |
|
917 |
|
918 |
|
919 }, '3.10.3', {"requires": ["datatable-core", "view", "classnamemanager"]}); |