Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(86)

Side by Side Diff: chrome/browser/resources/settings/internet_page/network_summary_item.js

Issue 2300783002: MD Settings: Internet: Cleanup JS (Closed)
Patch Set: Non property selectedApn -> accessPointName Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 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 /** 5 /**
6 * @fileoverview Polymer element for displaying the network state for a specific 6 * @fileoverview Polymer element for displaying the network state for a specific
7 * type and a list of networks for that type. 7 * type and a list of networks for that type.
8 */ 8 */
9 9
10 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */ 10 /** @typedef {chrome.networkingPrivate.DeviceStateProperties} */
11 var DeviceStateProperties; 11 var DeviceStateProperties;
12 12
13 Polymer({ 13 Polymer({
14 is: 'network-summary-item', 14 is: 'network-summary-item',
15 15
16 properties: { 16 properties: {
17 /** The expanded state of the list of networks. */
18 expanded: {
19 type: Boolean,
20 value: false,
21 observer: 'expandedChanged_',
22 },
23
24 /**
25 * Whether the list has been expanded. This is used to ensure the
26 * iron-collapse section animates correctly.
27 */
28 wasExpanded: {
29 type: Boolean,
30 value: false,
31 },
32
33 /**
34 * The maximum height in pixels for the list of networks.
35 */
36 maxHeight: {
37 type: Number,
38 value: 200,
39 },
40
41 /** 17 /**
42 * Device state for the network type. 18 * Device state for the network type.
43 * @type {DeviceStateProperties|undefined} 19 * @type {DeviceStateProperties|undefined}
44 */ 20 */
45 deviceState: { 21 deviceState: {
46 type: Object, 22 type: Object,
47 observer: 'deviceStateChanged_', 23 observer: 'deviceStateChanged_',
48 }, 24 },
49 25
50 /** 26 /**
51 * Network state for the active network. 27 * Network state for the active network.
52 * @type {!CrOnc.NetworkStateProperties|undefined} 28 * @type {!CrOnc.NetworkStateProperties|undefined}
53 */ 29 */
54 activeNetworkState: { 30 activeNetworkState: {
55 type: Object, 31 type: Object,
56 observer: 'activeNetworkStateChanged_', 32 observer: 'activeNetworkStateChanged_',
57 }, 33 },
58 34
59 /** 35 /**
60 * List of all network state data for the network type. 36 * List of all network state data for the network type.
61 * @type {!Array<!CrOnc.NetworkStateProperties>} 37 * @type {!Array<!CrOnc.NetworkStateProperties>}
62 */ 38 */
63 networkStateList: { 39 networkStateList: {
64 type: Array, 40 type: Array,
65 value: function() { return []; }, 41 value: function() {
42 return [];
43 },
66 observer: 'networkStateListChanged_', 44 observer: 'networkStateListChanged_',
67 } 45 },
46
47 /** The maximum height in pixels for the list of networks. */
48 maxHeight: {
49 type: Number,
50 value: 200,
51 },
52
53 /**
54 * The expanded state of the list of networks.
55 * @private
56 */
57 expanded_: {
58 type: Boolean,
59 value: false,
60 observer: 'expandedChanged_',
61 },
62
63 /**
64 * Whether the list has been expanded. This is used to ensure the
65 * iron-collapse section animates correctly.
66 * @private
67 */
68 wasExpanded_: {
69 type: Boolean,
70 value: false,
71 },
68 }, 72 },
69 73
70 /** @private */ 74 /** @private */
71 expandedChanged_: function() { 75 expandedChanged_: function() {
72 var type = this.deviceState ? this.deviceState.Type : ''; 76 var type = this.deviceState ? this.deviceState.Type : '';
73 this.fire('expanded', {expanded: this.expanded, type: type}); 77 this.fire('expanded', {expanded: this.expanded_, type: type});
74 }, 78 },
75 79
76 /** @private */ 80 /** @private */
77 deviceStateChanged_: function() { 81 deviceStateChanged_: function() {
78 this.updateSelectable_(); 82 this.updateSelectable_();
79 if (this.expanded && !this.deviceIsEnabled_(this.deviceState)) 83 if (this.expanded_ && !this.deviceIsEnabled_())
80 this.expanded = false; 84 this.expanded_ = false;
81 }, 85 },
82 86
83 /** @private */ 87 /** @private */
84 activeNetworkStateChanged_: function() { 88 activeNetworkStateChanged_: function() {
85 this.updateSelectable_(); 89 this.updateSelectable_();
86 }, 90 },
87 91
88 /** @private */ 92 /** @private */
89 networkStateListChanged_: function() { this.updateSelectable_(); }, 93 networkStateListChanged_: function() {
94 this.updateSelectable_();
95 },
90 96
91 /** 97 /**
92 * @param {DeviceStateProperties} deviceState
93 * @param {boolean} expanded The expanded state.
94 * @return {boolean} Whether or not the scanning spinner should be shown. 98 * @return {boolean} Whether or not the scanning spinner should be shown.
95 * @private 99 * @private
96 */ 100 */
97 showScanning_: function(deviceState, expanded) { 101 showScanning_: function() {
98 return !!expanded && !!deviceState.Scanning; 102 return !!this.expanded_ && !!this.deviceState.Scanning;
99 }, 103 },
100 104
101 /** 105 /**
102 * @param {DeviceStateProperties|undefined} deviceState
103 * @return {boolean} Whether or not the device state is enabled. 106 * @return {boolean} Whether or not the device state is enabled.
104 * @private 107 * @private
105 */ 108 */
106 deviceIsEnabled_: function(deviceState) { 109 deviceIsEnabled_: function() {
107 return !!deviceState && deviceState.State == 'Enabled'; 110 return !!this.deviceState &&
111 this.deviceState.State ==
112 chrome.networkingPrivate.DeviceStateType.ENABLED;
108 }, 113 },
109 114
110 /** 115 /**
111 * @return {boolean} Whether the dom-if for the network list should be true. 116 * @return {boolean} Whether the dom-if for the network list should be true.
112 * The logic here is designed to allow the enclosed content to be stamped 117 * The logic here is designed to allow the enclosed content to be stamped
113 * before it is expanded. 118 * before it is expanded.
114 * @private 119 * @private
115 */ 120 */
116 networksDomIfIsTrue_() { 121 networksDomIfIsTrue_() {
117 if (this.expanded == this.wasExpanded) 122 if (this.expanded_ == this.wasExpanded_)
118 return this.expanded; 123 return this.expanded_;
119 if (this.expanded) { 124 if (this.expanded_) {
120 Polymer.RenderStatus.afterNextRender(this, function() { 125 Polymer.RenderStatus.afterNextRender(this, function() {
121 this.wasExpanded = true; 126 this.wasExpanded_ = true;
122 }.bind(this)); 127 }.bind(this));
123 return true; 128 return true;
124 } 129 }
125 return this.wasExpanded; 130 return this.wasExpanded_;
126 }, 131 },
127 132
128 /** 133 /**
129 * @return {boolean} Whether the iron-collapse for the network list should 134 * @return {boolean} Whether the iron-collapse for the network list should
130 * be opened. 135 * be opened.
131 * @private 136 * @private
132 */ 137 */
133 networksIronCollapseIsOpened_() { 138 networksIronCollapseIsOpened_() {
134 return this.expanded && this.wasExpanded; 139 return this.expanded_ && this.wasExpanded_;
135 }, 140 },
136 141
137 /** 142 /**
138 * @param {DeviceStateProperties} deviceState
139 * @return {boolean} 143 * @return {boolean}
140 * @private 144 * @private
141 */ 145 */
142 enableIsVisible_: function(deviceState) { 146 enableIsVisible_: function() {
143 return !!deviceState && deviceState.Type != CrOnc.Type.ETHERNET && 147 return !!this.deviceState && this.deviceState.Type != CrOnc.Type.ETHERNET &&
144 deviceState.Type != CrOnc.Type.VPN; 148 this.deviceState.Type != CrOnc.Type.VPN;
145 }, 149 },
146 150
147 /** 151 /**
148 * @param {DeviceStateProperties|undefined} deviceState
149 * @param {!Array<!CrOnc.NetworkStateProperties>} networkStateList
150 * @return {boolean} Whether or not to show the UI to expand the list. 152 * @return {boolean} Whether or not to show the UI to expand the list.
151 * @private 153 * @private
152 */ 154 */
153 expandIsVisible_: function(deviceState, networkStateList) { 155 expandIsVisible_: function() {
154 if (!this.deviceIsEnabled_(deviceState)) 156 if (!this.deviceIsEnabled_())
155 return false; 157 return false;
156 var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2; 158 var minLength = (this.deviceState.Type == CrOnc.Type.WI_FI) ? 1 : 2;
157 return networkStateList.length >= minLength; 159 return this.networkStateList.length >= minLength;
158 }, 160 },
159 161
160 /** 162 /**
161 * @param {!CrOnc.NetworkStateProperties} state
162 * @return {boolean} True if the known networks button should be shown. 163 * @return {boolean} True if the known networks button should be shown.
163 * @private 164 * @private
164 */ 165 */
165 knownNetworksIsVisible_: function(state) { 166 knownNetworksIsVisible_: function() {
dschuyler 2016/09/01 21:15:57 optional: var networkState = this.activeNetworkSt
166 return !!state && state.Type == CrOnc.Type.WI_FI; 167 return !!this.activeNetworkState &&
168 this.activeNetworkState.Type == CrOnc.Type.WI_FI;
167 }, 169 },
168 170
169 /** 171 /**
170 * Event triggered when the details div is tapped. 172 * Event triggered when the details div is tapped.
171 * @param {Event} event The enable button event. 173 * @param {Event} event The enable button event.
172 * @private 174 * @private
173 */ 175 */
174 onDetailsTap_: function(event) { 176 onDetailsTap_: function(event) {
175 if ((event.target.id == 'expandListButton') || 177 if ((event.target.id == 'expandListButton') ||
176 (this.deviceState && !this.deviceIsEnabled_(this.deviceState))) { 178 (this.deviceState && !this.deviceIsEnabled_())) {
177 // Already handled or disabled, do nothing. 179 // Already handled or disabled, do nothing.
178 return; 180 return;
179 } 181 }
180 if (this.expandIsVisible_(this.deviceState, this.networkStateList)) { 182 if (this.expandIsVisible_()) {
181 // Expandable, toggle expand. 183 // Expandable, toggle expand.
182 this.expanded = !this.expanded; 184 this.expanded_ = !this.expanded_;
183 return; 185 return;
184 } 186 }
185 // Not expandable, fire 'selected' with |activeNetworkState|. 187 // Not expandable, fire 'selected' with |activeNetworkState|.
186 this.fire('selected', this.activeNetworkState); 188 this.fire('selected', this.activeNetworkState);
187 }, 189 },
188 190
189 /** 191 /**
190 * Event triggered when the known networks button is tapped. 192 * Event triggered when the known networks button is tapped.
191 * @private 193 * @private
192 */ 194 */
193 onKnownNetworksTap_: function() { 195 onKnownNetworksTap_: function() {
194 this.fire('show-known-networks', {type: CrOnc.Type.WI_FI}); 196 this.fire('show-known-networks', {type: CrOnc.Type.WI_FI});
195 }, 197 },
196 198
197 /** 199 /**
198 * Event triggered when the enable button is toggled. 200 * Event triggered when the enable button is toggled.
199 * @param {!Event} event 201 * @param {!Event} event
200 * @private 202 * @private
201 */ 203 */
202 onDeviceEnabledTap_: function(event) { 204 onDeviceEnabledTap_: function(event) {
203 var deviceIsEnabled = this.deviceIsEnabled_(this.deviceState); 205 var deviceIsEnabled = this.deviceIsEnabled_();
204 var type = this.deviceState ? this.deviceState.Type : ''; 206 var type = this.deviceState ? this.deviceState.Type : '';
205 this.fire( 207 this.fire(
206 'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type}); 208 'device-enabled-toggled', {enabled: !deviceIsEnabled, type: type});
207 // Make sure this does not propagate to onDetailsTap_. 209 // Make sure this does not propagate to onDetailsTap_.
208 event.stopPropagation(); 210 event.stopPropagation();
209 }, 211 },
210 212
211 /** 213 /**
212 * Called whenever the 'selectable' state might change. 214 * Called whenever the 'selectable' state might change.
213 * @private 215 * @private
214 */ 216 */
215 updateSelectable_: function() { 217 updateSelectable_: function() {
216 var selectable = this.deviceIsEnabled_(this.deviceState); 218 var selectable = this.deviceIsEnabled_();
217 this.$.details.classList.toggle('selectable', selectable); 219 this.$.details.classList.toggle('selectable', selectable);
218 }, 220 },
219 }); 221 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698