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 /** @type {?Object} */ | |
36 this.value = null; | |
37 /** @private {?Object<string, string>} */ | |
dpapad
2017/01/10 21:28:50
Any reason you can't use a regular Map?
mbrunson
2017/01/10 22:14:10
I could use a regular Map. Since the classes that
| |
38 this.nameMap_ = null; | |
39 }, | |
40 | |
41 /** | |
42 * Sets the object data to be displayed in the fieldset. | |
43 * @param {!Object} value | |
44 */ | |
45 setObject: function(value) { | |
46 this.value = value; | |
47 this.redraw(); | |
48 }, | |
49 | |
50 /** | |
51 * Sets the object used to map property names to display names. If a display | |
52 * name is not provided, the default property name will be used. | |
53 * @param {!Object<string, string>} nameMap | |
54 */ | |
55 setPropertyDisplayNames: function(nameMap) { | |
56 this.nameMap_ = nameMap; | |
57 }, | |
58 | |
59 /** | |
60 * Deletes and recreates the table structure with current object data. | |
61 */ | |
62 redraw: function() { | |
63 this.innerHTML = ''; | |
64 | |
65 Object.keys(this.value).forEach(function(propName) { | |
66 var name = this.nameMap_[propName] || propName; | |
dpapad
2017/01/10 22:51:43
Regarding Map vs Object, I almost always prefer a
mbrunson
2017/01/11 01:07:48
Oh ok. Thanks for the explanation. I'll keep this
| |
67 var value = this.value[propName]; | |
68 var newField = document.createElement('div'); | |
69 newField.classList.add('status'); | |
70 | |
71 var nameDiv = document.createElement('div'); | |
72 nameDiv.textContent = name + ':'; | |
73 newField.appendChild(nameDiv); | |
74 | |
75 var valueDiv = document.createElement('div'); | |
76 valueDiv.dataset.field = propName; | |
77 | |
78 if (typeof(value) === 'boolean') { | |
79 valueDiv.classList.add('toggle-status'); | |
80 valueDiv.classList.toggle('checked', value); | |
81 } else { | |
82 valueDiv.textContent = String(value); | |
83 } | |
84 | |
85 newField.appendChild(valueDiv); | |
86 this.appendChild(newField); | |
87 }, this); | |
88 }, | |
89 }; | |
90 | |
91 return { | |
92 ObjectFieldSet: ObjectFieldSet, | |
93 }; | |
94 }); | |
OLD | NEW |