OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2016 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 DeviceTable UI, served from | |
7 * chrome://bluetooth-internals/. | |
Dan Beam
2016/11/09 18:00:32
nit: can we unwrap this? fits on one line
mbrunson
2016/11/10 01:02:14
Done.
| |
8 */ | |
9 | |
10 cr.define('device_table', function() { | |
11 var REMOVED_CSS = 'removed'; | |
Dan Beam
2016/11/09 18:00:32
can we name this REMOVED_CLASS_NAME or REMOVED_CLA
mbrunson
2016/11/10 01:02:13
Done.
| |
12 | |
13 /** | |
14 * A table that lists the devices and responds to changes in the given | |
15 * DeviceCollection. | |
16 * @constructor | |
17 * @extends {HTMLTableElement} | |
18 */ | |
19 var DeviceTable = cr.ui.define(function() { | |
20 // @type {Array<device_collection.Device>} | |
Dan Beam
2016/11/09 18:00:32
?Array
mbrunson
2016/11/10 01:02:14
Done.
| |
21 this.devices_ = null; | |
22 | |
23 return document.importNode($('table-template').content.children[0], | |
24 true /* deep */); | |
25 }); | |
26 | |
27 DeviceTable.prototype = { | |
28 __proto__: HTMLTableElement.prototype, | |
29 | |
30 /** | |
31 * Decorates an element as a UI element class. Caches references to the | |
32 * table body and headers. | |
33 */ | |
34 decorate: function() { | |
35 this.body_ = this.tBodies[0]; | |
36 this.headers_ = this.tHead.rows[0].cells; | |
Dan Beam
2016/11/09 18:00:32
can you mark these as @private?
mbrunson
2016/11/10 01:02:14
Done.
| |
37 }, | |
38 | |
39 /** | |
40 * Sets the tables device collection. | |
41 * @param {!device_collection.DeviceCollection} deviceCollection | |
42 */ | |
43 setDevices: function(deviceCollection) { | |
44 assert(!this.devices_, 'Devices can only be set once.'); | |
45 | |
Dan Beam
2016/11/09 18:00:32
can you mark devices_ as @private?
mbrunson
2016/11/10 01:02:13
Done.
| |
46 this.devices_ = deviceCollection; | |
47 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); | |
48 this.devices_.addEventListener('change', this.handleChange_.bind(this)); | |
49 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); | |
50 | |
51 this.redraw_(); | |
52 }, | |
53 | |
54 /** | |
55 * Updates table row on change event of the device collection. | |
56 * @private | |
57 * @param {!CustomEvent} event | |
58 */ | |
59 handleChange_: function(event) { | |
60 this.updateRow_(this.devices_.item(event.index), event.index); | |
61 }, | |
62 | |
63 /** | |
64 * Updates table row on splice event of the device collection. | |
65 * @private | |
66 * @param {!CustomEvent} event | |
67 */ | |
68 handleSplice_: function(event) { | |
69 event.removed.forEach(function() { | |
70 this.body_.deleteRow(event.index); | |
71 }, this); | |
72 | |
73 event.added.forEach(function(device, index) { | |
74 this.insertRow_(device, event.index + index); | |
75 }, this); | |
76 }, | |
77 | |
78 /** | |
79 * Inserts a new row at |index| and updates it with info from |device|. | |
80 * @private | |
81 * @param {!device_collection.Device} device | |
82 * @param {?number} index | |
83 */ | |
84 insertRow_: function(device, index) { | |
85 var row = this.body_.insertRow(index); | |
86 row.id = device.info.address; | |
87 | |
88 for (var i = 0; i < this.headers_.length; i++) { | |
89 row.insertCell(); | |
90 } | |
91 | |
92 this.updateRow_(device, row.sectionRowIndex); | |
93 }, | |
94 | |
95 /** | |
96 * Deletes and recreates the table using the cached |devices_|. | |
97 * @private | |
98 */ | |
99 redraw_: function() { | |
100 this.removeChild(this.body_); | |
101 this.appendChild(document.createElement('tbody')); | |
102 this.body_ = this.tBodies[0]; | |
103 this.body_.classList.add('table-body'); | |
104 | |
105 for (var i = 0; i < this.devices_.length; i++) { | |
106 this.insertRow_(this.devices_.item(i)); | |
107 } | |
108 }, | |
109 | |
110 /** | |
111 * Updates the row at |index| with the info from |device|. | |
112 * @private | |
113 * @param {!device_collection.Device} device | |
114 * @param {number} index | |
115 */ | |
116 updateRow_: function(device, index) { | |
117 assert(this.body_.rows[index], 'Row ' + index + ' is not in the table.'); | |
118 var row = this.body_.rows[index]; | |
119 | |
120 if (device.removed) { | |
121 row.classList.add(REMOVED_CSS); | |
122 } else { | |
123 row.classList.remove(REMOVED_CSS); | |
Dan Beam
2016/11/09 18:00:32
row.classList.toggle(REMOVED_CSS, device.removed);
mbrunson
2016/11/10 01:02:14
Done.
| |
124 } | |
Dan Beam
2016/11/09 18:00:32
nit: no curlies
mbrunson
2016/11/10 01:02:13
Done.
| |
125 | |
126 // Update the properties based on the header field path. | |
127 for (var i = 0; i < this.headers_.length; i++) { | |
128 var header = this.headers_[i]; | |
129 var propName = header.dataset.field; | |
130 | |
131 var parts = propName.split('.'); | |
132 var obj = device.info; | |
133 while (obj != null && parts.length > 0) { | |
134 var part = parts.shift(); | |
135 obj = obj[part]; | |
Dan Beam
2016/11/09 18:00:32
can you use cr.exportPath() here?
mbrunson
2016/11/10 01:02:13
cr.exportPath doesn't quite do what I want. I don'
Dan Beam
2016/11/10 03:22:54
Acknowledged.
| |
136 } | |
137 | |
138 var cell = row.cells[i]; | |
139 cell.textContent = obj || 'Unknown'; | |
140 cell.dataset.label = header.textContent; | |
141 } | |
142 }, | |
143 }; | |
144 | |
145 return { | |
146 DeviceTable: DeviceTable, | |
147 }; | |
148 }); | |
OLD | NEW |