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 ObjectFieldSet, a UI element for displaying the properties | |
7 * of a given Javascript object. These properties are displayed in a fieldset | |
8 * as a series of rows for each key-value pair. | |
9 * Served from chrome://bluetooth-internals/. | |
10 */ | |
11 | |
12 cr.define('object_fieldset', function() { | |
13 | |
14 /** | |
15 * A fieldset that lists the properties of a given object. These properties | |
16 * are displayed as a series of rows for each key-value pair. | |
17 * Only the object's own properties are displayed. Boolean values are | |
18 * displayed using images: a green check for 'true', and a red cancel 'x' for | |
19 * 'false'. All other types are converted to their string representation for | |
20 * display. | |
21 * @constructor | |
22 * @extends {HTMLFieldSetElement} | |
23 */ | |
24 var ObjectFieldSet = cr.ui.define('fieldset'); | |
25 | |
26 ObjectFieldSet.prototype = { | |
27 __proto__: HTMLFieldSetElement.prototype, | |
28 | |
29 /** | |
30 * Decorates the element as an ObjectFieldset. | |
31 */ | |
32 decorate: function() { | |
33 this.classList.add('object-fieldset'); | |
34 }, | |
35 | |
36 /** | |
37 * Sets the object data to be displayed in the fieldset. | |
38 * @param {!Object} value | |
39 */ | |
40 setObject: function(value) { | |
41 this.value = value; | |
42 this.redraw(); | |
43 }, | |
44 | |
45 /** | |
46 * Sets the object used to map property names to display names. If a display | |
47 * name is not provided, the default property name will be used. | |
48 * @param {!Object<string, string>} nameMap | |
49 */ | |
50 setPropertyDisplayNames: function(nameMap) { | |
51 this.nameMap_ = nameMap; | |
dpapad
2017/01/10 17:21:33
Doesn't |this.value| and |this.nameMap_| need to b
mbrunson
2017/01/10 20:01:21
Done.
| |
52 }, | |
53 | |
54 /** | |
55 * Deletes and recreates the table structure with current object data. | |
56 */ | |
57 redraw: function() { | |
58 this.innerHTML = ''; | |
59 | |
60 for (var propName in this.value) { | |
dpapad
2017/01/10 17:21:33
Can you use Object.keys(this.value).forEach() inst
mbrunson
2017/01/10 20:01:21
Done.
| |
61 if (!this.value.hasOwnProperty(propName)) continue; | |
62 | |
63 var name = this.nameMap_[propName] || propName; | |
64 var value = this.value[propName]; | |
65 var newField = document.createElement('div'); | |
66 newField.classList.add('status'); | |
67 | |
68 var nameDiv = document.createElement('div'); | |
69 nameDiv.textContent = name + ':'; | |
70 newField.appendChild(nameDiv); | |
71 | |
72 var valueDiv = document.createElement('div'); | |
73 valueDiv.dataset.field = propName; | |
74 | |
75 if (typeof(value) === 'boolean') { | |
76 valueDiv.classList.add('toggle-status'); | |
77 valueDiv.classList.toggle('checked', value); | |
78 } else { | |
79 valueDiv.textContent = String(value); | |
80 } | |
81 | |
82 newField.appendChild(valueDiv); | |
83 this.appendChild(newField); | |
84 } | |
85 }, | |
86 }; | |
87 | |
88 return { | |
89 ObjectFieldSet: ObjectFieldSet, | |
90 }; | |
91 }); | |
OLD | NEW |