OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 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 cr.define('mobile', function() { | 5 cr.define('mobile', function() { |
6 | 6 |
7 // TODO(tbarzic): Share code with mobile_setup.js. | 7 // TODO(tbarzic): Share code with mobile_setup.js. |
8 var EXTENSION_BASE_URL = | 8 var EXTENSION_BASE_URL = |
9 'chrome-extension://iadeocfgjdjdmpenejdbfeaocpbikmab/'; | 9 'chrome-extension://iadeocfgjdjdmpenejdbfeaocpbikmab/'; |
10 var REDIRECT_POST_PAGE_URL = EXTENSION_BASE_URL + 'redirect.html?autoPost=1'; | 10 var REDIRECT_POST_PAGE_URL = EXTENSION_BASE_URL + 'redirect.html?autoPost=1'; |
11 var PORTAL_OFFLINE_PAGE_URL = EXTENSION_BASE_URL + 'portal_offline.html'; | 11 var PORTAL_OFFLINE_PAGE_URL = EXTENSION_BASE_URL + 'portal_offline.html'; |
12 var INVALID_DEVICE_INFO_PAGE_URL = | 12 var INVALID_DEVICE_INFO_PAGE_URL = |
13 EXTENSION_BASE_URL + 'invalid_device_info.html'; | 13 EXTENSION_BASE_URL + 'invalid_device_info.html'; |
14 | 14 |
15 var NetworkState = { | 15 var NetworkState = {UNKNOWN: 0, PORTAL_REACHABLE: 1, PORTAL_UNREACHABLE: 2}; |
16 UNKNOWN: 0, | |
17 PORTAL_REACHABLE: 1, | |
18 PORTAL_UNREACHABLE: 2 | |
19 }; | |
20 | 16 |
21 var CarrierPageType = { | 17 var CarrierPageType = {NOT_SET: 0, PORTAL_OFFLINE: 1, INVALID_DEVICE_INFO: 2}; |
22 NOT_SET: 0, | |
23 PORTAL_OFFLINE: 1, | |
24 INVALID_DEVICE_INFO: 2 | |
25 }; | |
26 | 18 |
27 function PortalImpl() { | 19 function PortalImpl() { |
28 // Mobile device information. | 20 // Mobile device information. |
29 this.deviceInfo_ = null; | 21 this.deviceInfo_ = null; |
30 this.spinnerInt_ = -1; | 22 this.spinnerInt_ = -1; |
31 this.networkState_ = NetworkState.UNKNOWN; | 23 this.networkState_ = NetworkState.UNKNOWN; |
32 this.portalFrameSet_ = false; | 24 this.portalFrameSet_ = false; |
33 this.carrierPageType_ = CarrierPageType.NOT_SET; | 25 this.carrierPageType_ = CarrierPageType.NOT_SET; |
34 } | 26 } |
35 | 27 |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 // status displaying 'invalid device info' page. | 61 // status displaying 'invalid device info' page. |
70 this.setCarrierPage_(CarrierPageType.INVALID_DEVICE_INFO); | 62 this.setCarrierPage_(CarrierPageType.INVALID_DEVICE_INFO); |
71 $('portalFrame').hidden = true; | 63 $('portalFrame').hidden = true; |
72 $('systemStatus').hidden = false; | 64 $('systemStatus').hidden = false; |
73 } else if (this.networkState_ != NetworkState.PORTAL_REACHABLE) { | 65 } else if (this.networkState_ != NetworkState.PORTAL_REACHABLE) { |
74 // If the portal is not reachable, hide portalFrame and show system | 66 // If the portal is not reachable, hide portalFrame and show system |
75 // status displaying 'offline portal' page. | 67 // status displaying 'offline portal' page. |
76 this.setCarrierPage_(CarrierPageType.PORTAL_OFFLINE); | 68 this.setCarrierPage_(CarrierPageType.PORTAL_OFFLINE); |
77 $('portalFrame').hidden = true; | 69 $('portalFrame').hidden = true; |
78 $('systemStatus').hidden = false; | 70 $('systemStatus').hidden = false; |
79 } else { | 71 } else { |
80 // If the portal is reachable and device info is valid, set and show | 72 // If the portal is reachable and device info is valid, set and show |
81 // portalFrame; and hide system status displaying 'offline portal' page. | 73 // portalFrame; and hide system status displaying 'offline portal' page. |
82 this.setPortalFrameIfNeeded_(this.deviceInfo_); | 74 this.setPortalFrameIfNeeded_(this.deviceInfo_); |
83 $('portalFrame').hidden = false; | 75 $('portalFrame').hidden = false; |
84 $('systemStatus').hidden = true; | 76 $('systemStatus').hidden = true; |
85 this.stopSpinner_(); | 77 this.stopSpinner_(); |
86 } | 78 } |
87 }, | 79 }, |
88 | 80 |
89 setCarrierPage_: function(type) { | 81 setCarrierPage_: function(type) { |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
151 } | 143 } |
152 // Clear the spinner canvas. | 144 // Clear the spinner canvas. |
153 var ctx = canvas.getContext('2d'); | 145 var ctx = canvas.getContext('2d'); |
154 ctx.clearRect(0, 0, canvas.width, canvas.height); | 146 ctx.clearRect(0, 0, canvas.width, canvas.height); |
155 }, | 147 }, |
156 | 148 |
157 drawProgress_: function() { | 149 drawProgress_: function() { |
158 var ctx = canvas.getContext('2d'); | 150 var ctx = canvas.getContext('2d'); |
159 ctx.clearRect(0, 0, canvas.width, canvas.height); | 151 ctx.clearRect(0, 0, canvas.width, canvas.height); |
160 | 152 |
161 var segmentCount = Math.min(12, canvas.width / 1.6); // Number of segments | 153 var segmentCount = |
162 var rotation = 0.75; // Counterclockwise rotation | 154 Math.min(12, canvas.width / 1.6); // Number of segments |
| 155 var rotation = 0.75; // Counterclockwise rotation |
163 | 156 |
164 // Rotate canvas over time | 157 // Rotate canvas over time |
165 ctx.translate(canvas.width / 2, canvas.height / 2); | 158 ctx.translate(canvas.width / 2, canvas.height / 2); |
166 ctx.rotate(Math.PI * 2 / (segmentCount + rotation)); | 159 ctx.rotate(Math.PI * 2 / (segmentCount + rotation)); |
167 ctx.translate(-canvas.width / 2, -canvas.height / 2); | 160 ctx.translate(-canvas.width / 2, -canvas.height / 2); |
168 | 161 |
169 var gap = canvas.width / 24; // Gap between segments | 162 var gap = canvas.width / 24; // Gap between segments |
170 var oRadius = canvas.width / 2; // Outer radius | 163 var oRadius = canvas.width / 2; // Outer radius |
171 var iRadius = oRadius * 0.618; // Inner radius | 164 var iRadius = oRadius * 0.618; // Inner radius |
172 var oCircumference = Math.PI * 2 * oRadius; // Outer circumference | 165 var oCircumference = Math.PI * 2 * oRadius; // Outer circumference |
173 var iCircumference = Math.PI * 2 * iRadius; // Inner circumference | 166 var iCircumference = Math.PI * 2 * iRadius; // Inner circumference |
174 var oGap = gap / oCircumference; // Gap size as fraction of outer ring | 167 var oGap = gap / oCircumference; // Gap size as fraction of outer ring |
175 var iGap = gap / iCircumference; // Gap size as fraction of inner ring | 168 var iGap = gap / iCircumference; // Gap size as fraction of inner ring |
176 var oArc = Math.PI * 2 * (1 / segmentCount - oGap); // Angle of outer arcs | 169 var oArc = |
177 var iArc = Math.PI * 2 * (1 / segmentCount - iGap); // Angle of inner arcs | 170 Math.PI * 2 * (1 / segmentCount - oGap); // Angle of outer arcs |
| 171 var iArc = |
| 172 Math.PI * 2 * (1 / segmentCount - iGap); // Angle of inner arcs |
178 | 173 |
179 for (i = 0; i < segmentCount; i++) { // Draw each segment | 174 for (i = 0; i < segmentCount; i++) { // Draw each segment |
180 var opacity = Math.pow(1.0 - i / segmentCount, 3.0); | 175 var opacity = Math.pow(1.0 - i / segmentCount, 3.0); |
181 opacity = (0.15 + opacity * 0.8); // Vary from 0.15 to 0.95 | 176 opacity = (0.15 + opacity * 0.8); // Vary from 0.15 to 0.95 |
182 var angle = - Math.PI * 2 * i / segmentCount; | 177 var angle = -Math.PI * 2 * i / segmentCount; |
183 | 178 |
184 ctx.beginPath(); | 179 ctx.beginPath(); |
185 ctx.arc(canvas.width / 2, canvas.height / 2, oRadius, | 180 ctx.arc( |
186 angle - oArc / 2, angle + oArc / 2, false); | 181 canvas.width / 2, canvas.height / 2, oRadius, angle - oArc / 2, |
187 ctx.arc(canvas.width / 2, canvas.height / 2, iRadius, | 182 angle + oArc / 2, false); |
188 angle + iArc / 2, angle - iArc / 2, true); | 183 ctx.arc( |
| 184 canvas.width / 2, canvas.height / 2, iRadius, angle + iArc / 2, |
| 185 angle - iArc / 2, true); |
189 ctx.closePath(); | 186 ctx.closePath(); |
190 ctx.fillStyle = 'rgba(240, 30, 29, ' + opacity + ')'; | 187 ctx.fillStyle = 'rgba(240, 30, 29, ' + opacity + ')'; |
191 ctx.fill(); | 188 ctx.fill(); |
192 } | 189 } |
193 } | 190 } |
194 }; | 191 }; |
195 | 192 |
196 function MobileSetupPortal() {} | 193 function MobileSetupPortal() {} |
197 | 194 |
198 MobileSetupPortal.loadPage = function() { | 195 MobileSetupPortal.loadPage = function() { |
199 PortalImpl.getInstance().initialize(); | 196 PortalImpl.getInstance().initialize(); |
200 }; | 197 }; |
201 | 198 |
202 MobileSetupPortal.onGotDeviceInfo = function(deviceInfo) { | 199 MobileSetupPortal.onGotDeviceInfo = function(deviceInfo) { |
203 PortalImpl.getInstance().updateDeviceInfo(deviceInfo); | 200 PortalImpl.getInstance().updateDeviceInfo(deviceInfo); |
204 }; | 201 }; |
205 | 202 |
206 MobileSetupPortal.onConnectivityChanged = function(portalReachable) { | 203 MobileSetupPortal.onConnectivityChanged = function(portalReachable) { |
207 PortalImpl.getInstance().updateNetworkState( | 204 PortalImpl.getInstance().updateNetworkState( |
208 portalReachable ? NetworkState.PORTAL_REACHABLE : | 205 portalReachable ? NetworkState.PORTAL_REACHABLE : |
209 NetworkState.PORTAL_UNREACHABLE); | 206 NetworkState.PORTAL_UNREACHABLE); |
210 }; | 207 }; |
211 | 208 |
212 // Export | 209 // Export |
213 return { | 210 return {MobileSetupPortal: MobileSetupPortal}; |
214 MobileSetupPortal: MobileSetupPortal | |
215 }; | |
216 }); | 211 }); |
217 | 212 |
218 document.addEventListener('DOMContentLoaded', | 213 document.addEventListener( |
219 mobile.MobileSetupPortal.loadPage); | 214 'DOMContentLoaded', mobile.MobileSetupPortal.loadPage); |
OLD | NEW |