| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('cr.ui', function() { | 5 cr.define('cr.ui', function() { |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * Creates a new list item element. | 8 * Creates a new list item element. |
| 9 * @constructor | 9 * @constructor |
| 10 * @extends {HTMLLIElement} | 10 * @extends {HTMLLIElement} |
| 11 */ | 11 */ |
| 12 var ListItem = cr.ui.define('li'); | 12 var ListItem = cr.ui.define('li'); |
| 13 | 13 |
| 14 /** | 14 /** |
| 15 * The next id suffix to use when giving each item an unique id. | 15 * The next id suffix to use when giving each item an unique id. |
| 16 * @type {number} | 16 * @type {number} |
| 17 * @private | 17 * @private |
| 18 */ | 18 */ |
| 19 ListItem.nextUniqueIdSuffix_ = 0; | 19 ListItem.nextUniqueIdSuffix_ = 0; |
| 20 | 20 |
| 21 ListItem.prototype = { | 21 ListItem.prototype = { |
| 22 __proto__: HTMLLIElement.prototype, | 22 __proto__: HTMLLIElement.prototype, |
| 23 | 23 |
| 24 /** | 24 /** |
| 25 * Plain text label. | 25 * Plain text label. |
| 26 * @type {string} | 26 * @type {string} |
| 27 */ | 27 */ |
| 28 get label() { | 28 get label() { return this.textContent; }, |
| 29 return this.textContent; | 29 set label(label) { this.textContent = label; }, |
| 30 }, | |
| 31 set label(label) { | |
| 32 this.textContent = label; | |
| 33 }, | |
| 34 | 30 |
| 35 /** | 31 /** |
| 36 * This item's index in the containing list. | 32 * This item's index in the containing list. |
| 37 * @type {number} | 33 * @type {number} |
| 38 */ | 34 */ |
| 39 listIndex_: -1, | 35 listIndex_: -1, |
| 40 | 36 |
| 41 /** | 37 /** |
| 42 * Called when an element is decorated as a list item. | 38 * Called when an element is decorated as a list item. |
| 43 */ | 39 */ |
| 44 decorate: function() { | 40 decorate: function() { |
| 45 this.setAttribute('role', 'listitem'); | 41 this.setAttribute('role', 'listitem'); |
| 46 if (!this.id) | 42 if (!this.id) |
| 47 this.id = 'listitem-' + ListItem.nextUniqueIdSuffix_++; | 43 this.id = 'listitem-' + ListItem.nextUniqueIdSuffix_++; |
| 48 }, | 44 }, |
| 49 | 45 |
| 50 /** | 46 /** |
| 51 * Called when the selection state of this element changes. | 47 * Called when the selection state of this element changes. |
| 52 */ | 48 */ |
| 53 selectionChanged: function() { | 49 selectionChanged: function() {}, |
| 54 }, | |
| 55 }; | 50 }; |
| 56 | 51 |
| 57 /** | 52 /** |
| 58 * Whether the item is selected. Setting this does not update the underlying | 53 * Whether the item is selected. Setting this does not update the underlying |
| 59 * selection model. This is only used for display purpose. | 54 * selection model. This is only used for display purpose. |
| 60 */ | 55 */ |
| 61 cr.defineProperty(ListItem, 'selected', cr.PropertyKind.BOOL_ATTR, | 56 cr.defineProperty( |
| 62 function() { | 57 ListItem, 'selected', cr.PropertyKind.BOOL_ATTR, |
| 63 this.selectionChanged(); | 58 function() { this.selectionChanged(); }); |
| 64 }); | |
| 65 | 59 |
| 66 /** | 60 /** |
| 67 * Whether the item is the lead in a selection. Setting this does not update | 61 * Whether the item is the lead in a selection. Setting this does not update |
| 68 * the underlying selection model. This is only used for display purpose. | 62 * the underlying selection model. This is only used for display purpose. |
| 69 */ | 63 */ |
| 70 cr.defineProperty(ListItem, 'lead', cr.PropertyKind.BOOL_ATTR); | 64 cr.defineProperty(ListItem, 'lead', cr.PropertyKind.BOOL_ATTR); |
| 71 | 65 |
| 72 /** | 66 /** |
| 73 * This item's index in the containing list. | 67 * This item's index in the containing list. |
| 74 * type {number} | 68 * type {number} |
| 75 */ | 69 */ |
| 76 cr.defineProperty(ListItem, 'listIndex'); | 70 cr.defineProperty(ListItem, 'listIndex'); |
| 77 | 71 |
| 78 return { | 72 return {ListItem: ListItem}; |
| 79 ListItem: ListItem | |
| 80 }; | |
| 81 }); | 73 }); |
| OLD | NEW |