OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2017 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * Javascript for ExpandableList and ExpandableListItem, served from | |
7 * chrome://bluetooth-internals/. | |
8 */ | |
9 | |
10 cr.define('expandable_list', function() { | |
11 /** @const */ var List = cr.ui.List; | |
12 /** @const */ var ListItem = cr.ui.ListItem; | |
13 | |
14 /** | |
15 * A list item that has expandable content that toggles when the item is | |
16 * clicked. | |
17 * @constructor | |
18 */ | |
19 var ExpandableListItem = cr.ui.define('li'); | |
20 | |
21 ExpandableListItem.prototype = { | |
22 __proto__: ListItem.prototype, | |
23 | |
24 /** | |
25 * Decorates the element as an expandable list item and caches the created | |
26 * content holders for implementations. | |
27 * @override | |
28 */ | |
29 decorate: function() { | |
30 this.classList.add('expandable-list-item'); | |
31 this.briefContent_ = document.createElement('div'); | |
32 this.briefContent_.classList.add('brief-content'); | |
33 this.briefContent_.addEventListener( | |
34 'click', this.toggleExpand_.bind(this)); | |
35 this.appendChild(this.briefContent_); | |
36 | |
37 this.expandedContent_ = document.createElement('div'); | |
38 this.expandedContent_.classList.add('expanded-content'); | |
39 this.appendChild(this.expandedContent_); | |
40 }, | |
41 | |
42 /** | |
43 * Toggles the expanded class on the item. | |
44 * @private | |
45 */ | |
46 toggleExpand_: function() { | |
47 this.classList.toggle('expanded'); | |
48 }, | |
49 }; | |
50 | |
51 /** | |
52 * A list that contains expandable list items. | |
53 * @abstract | |
54 * @constructor | |
55 */ | |
56 var ExpandableList = cr.ui.define('list'); | |
57 | |
58 ExpandableList.prototype = { | |
59 __proto__: List.prototype, | |
60 | |
61 /** | |
62 * Decorates element as an expandable list and caches references to layout | |
63 * elements. | |
64 * @override | |
65 */ | |
66 decorate: function() { | |
67 List.prototype.decorate.call(this); | |
68 this.classList.add('expandable-list'); | |
69 | |
70 this.emptyMessage_ = document.createElement('h3'); | |
71 this.emptyMessage_.classList.add('empty-message'); | |
72 this.emptyMessage_.hidden = true; | |
73 this.insertBefore(this.emptyMessage_, this.firstChild); | |
74 | |
75 this.spinner_ = document.createElement('div'); | |
76 this.spinner_.classList.add('spinner'); | |
77 this.insertBefore(this.spinner_, this.firstChild); | |
78 | |
79 this.autoExpands = true; | |
80 this.boundUpdateMessage_ = this.updateMessageDisplay_.bind(this); | |
81 | |
82 }, | |
83 | |
84 /** | |
85 * Sets the data model of the list. | |
86 * @param {cr.ui.ArrayDataModel} data | |
87 */ | |
88 setData: function(data) { | |
89 if (this.dataModel) | |
90 this.dataModel.removeEventListener('splice', this.boundUpdateMessage_); | |
91 | |
92 this.dataModel = data; | |
93 this.dataModel.addEventListener('splice', this.boundUpdateMessage_); | |
94 this.updateMessageDisplay_(); | |
95 }, | |
96 | |
97 /** | |
98 * Sets the empty message text. | |
99 * @param {string} message | |
100 */ | |
101 setEmptyMessage: function(message) { | |
102 this.emptyMessage_.textContent = message; | |
103 }, | |
104 | |
105 /** | |
106 * Sets the loading state of the list. If |loading| is true, the loading | |
107 * spinner is dispayed. | |
108 * @param {boolean} loading | |
109 */ | |
110 setLoading: function(loading) { | |
111 this.spinner_.hidden = !loading; | |
dpapad
2017/01/14 00:32:57
FWIW, a hidden spinner still takes up precious CPU
mbrunson
2017/01/14 01:36:12
Does it? That seems to defeat the purpose of hidde
| |
112 }, | |
113 | |
114 /** | |
115 * Updates the display state of the empty message. If there are no items in | |
116 * the data model, the empty message is displayed. | |
117 */ | |
118 updateMessageDisplay_: function() { | |
119 this.emptyMessage_.hidden = this.dataModel.length > 0; | |
120 }, | |
121 }; | |
122 | |
123 return { | |
124 ExpandableListItem: ExpandableListItem, | |
125 ExpandableList: ExpandableList, | |
126 } | |
127 }); | |
OLD | NEW |