OLD | NEW |
---|---|
(Empty) | |
1 // Copyright (c) 2013 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 cr.define('chargerReplacement', function() { | |
6 | |
7 /** | |
8 * Enumeration of charger selection. | |
9 * @enum {int} | |
10 */ | |
11 var CHARGER_SELECTION = { | |
12 NONE: 0, | |
13 GOOD_CHARGER: 1, | |
14 ORIGINAL_CHARGER: 2 | |
15 }; | |
16 | |
17 /** | |
18 * Enumeration of html pages. | |
19 * @enum {int} | |
20 */ | |
21 var PAGES = { | |
22 CHECK_CHARGER: 0, | |
23 CONFIRM_SAFE_CHARGER: 1, | |
24 CHARGER_UPDATE: 2, | |
25 ORDER_CHARGER_ONLINE: 3, | |
26 CONFIRM_ONLINE_ORDER: 4, | |
27 FINISH_NOT_ORDER_CHARGER: 5, | |
28 ORDER_CHARGER_OFFLINE: 6, | |
29 CHARGER_STILL_BAD: 7, | |
30 }; | |
31 | |
32 /** | |
33 * Enumeration of the user's choice for order new charger or not. | |
34 */ | |
35 var USER_CHOICE_FOR_CHARGER_UPDATE = { | |
36 ORDER_NEW_CHARGER: 0, | |
37 NOT_ORDER_NEW_CHARGER: 1, | |
38 }; | |
39 | |
40 /** | |
41 * Enumeration of messages sent from iFrame order form. | |
42 */ | |
43 var ORDER_CHARGER_IFRAME_MESSAGE = { | |
44 FORM_OPEN: 'FORM_OPEN', | |
45 SUBMIT: 'SUBMIT', | |
46 SUCCESS: 'SUCCESS', | |
47 FAILURE: 'FAILURE', | |
48 LINK: 'LINK', | |
49 }; | |
50 | |
51 /** | |
52 * Enumeration of countries where user might purchase the device. | |
53 */ | |
54 var COUNTRY = { | |
55 AU: 'au', | |
56 IRE: 'ire', | |
57 UK: 'uk', | |
58 US: 'us', | |
59 }; | |
60 | |
61 /** | |
62 * Charger picture borader colors to indicate the selection of the charger. | |
63 */ | |
64 var CHARGER_BOX_SELECTED_COLOR = '#4281f4'; | |
65 var CHARGER_BOX_DESELECT_COLOR = '#999'; | |
xiyuan
2013/12/06 00:24:37
nit: move colors in css,
e.g.
.selected-charger
jennyz
2013/12/06 03:54:24
Done.
| |
66 | |
67 /** | |
68 * Dialog argument passed from chrome to indicate whether user has ordered | |
69 * new charger. | |
70 */ | |
71 var NEW_CHARGER_ORDERED = '1'; | |
72 | |
73 /** | |
74 * Charger order form iFrame url. | |
75 */ | |
76 var ORDER_CHARGER_IFRAME_URL = 'https://chromesafetycheck-test.appspot.com'; | |
77 | |
78 /** | |
79 * maximum delay in milliseconds for loading the online charger order form | |
80 * into iFrame. | |
81 */ | |
82 var ONLINE_ORDER_FORM_LOADING_DELAY = 30000; | |
83 | |
84 /** | |
85 * maximum delay in milliseconds for server to respond after user submits | |
86 * the order form. | |
87 */ | |
88 var ONLINE_ORDER_SUBMISSION_DELAY = 60000; | |
89 | |
90 /** | |
91 * urls of href links on UI. | |
92 */ | |
93 var CHARGER_FAQ_LINK = 'http://chromebook.com/hp11charger/'; | |
94 var PRIVACY_POLICY_LINK = 'http://www.google.com/policies/privacy'; | |
95 | |
96 var onlineOrderSubmitTimer; | |
97 | |
98 /** | |
99 * flag for whether the online charger order form is loaded. | |
100 */ | |
101 var isOrderFormLoaded = false; | |
102 | |
103 /** | |
104 * flag for whether user's online charger order form submission has been | |
105 * recevied by Google. True if the server responds with SUCCESSS or | |
106 * FAILURE. FAILURE indicate user has some input error in form and should | |
107 * submit again. | |
108 */ | |
109 var isOrderSubmissionReceived = false; | |
110 | |
111 /** | |
112 * charger selection by user. | |
113 */ | |
114 var chargerSelection = CHARGER_SELECTION.NONE; | |
115 | |
116 /** | |
117 * Set window the specified size and center it to screen. | |
118 */ | |
119 function setWindowSizeAndCenter(width, height) { | |
120 window.resizeTo(width, height); | |
121 window.moveTo(window.screen.width / 2 - width / 2, | |
122 window.screen.height / 2 - height / 2); | |
123 } | |
124 | |
125 /** | |
126 * Show a particular page. | |
127 */ | |
128 function showPage(page) { | |
129 switch (page) { | |
130 case PAGES.CHECK_CHARGER: | |
131 setWindowSizeAndCenter(500, 590); | |
132 break; | |
133 case PAGES.CONFIRM_SAFE_CHARGER: | |
134 setWindowSizeAndCenter(400, 325); | |
135 break; | |
136 case PAGES.CHARGER_UPDATE: | |
137 setWindowSizeAndCenter(510, 505); | |
138 $('not-order-charger-checkbox-strip').style.visibility = 'hidden'; | |
139 break; | |
140 case PAGES.ORDER_CHARGER_ONLINE: | |
141 $('charger-order-form').src = ORDER_CHARGER_IFRAME_URL; | |
142 setWindowSizeAndCenter(1150, 550); | |
143 setTimeout(checkOnlineOrderFormLoaded, ONLINE_ORDER_FORM_LOADING_DELAY); | |
144 break; | |
145 case PAGES.CONFIRM_ONLINE_ORDER: | |
146 setWindowSizeAndCenter(420, 380); | |
147 break; | |
148 case PAGES.FINISH_NOT_ORDER_CHARGER: | |
149 setWindowSizeAndCenter(430, 350); | |
150 break; | |
151 case PAGES.ORDER_CHARGER_OFFLINE: | |
152 setWindowSizeAndCenter(750, 550); | |
153 break; | |
154 case PAGES.CHARGER_STILL_BAD: | |
155 setWindowSizeAndCenter(430, 380); | |
156 break; | |
157 } | |
158 document.body.setAttribute('page', page); | |
159 } | |
160 | |
161 function selectCountry() { | |
162 var country = $('select-device-country').value; | |
163 if (country == COUNTRY.US) { | |
164 $('new-charger').src = $('new-charger-us').src; | |
165 $('original-charger').src = $('original-charger-us').src; | |
166 } else if (country == COUNTRY.AU) { | |
167 $('new-charger').src = $('new-charger-au').src; | |
168 $('original-charger').src = $('original-charger-au').src; | |
169 } else { | |
170 $('new-charger').src = $('new-charger-uk').src; | |
171 $('original-charger').src = $('original-charger-uk').src; | |
172 } | |
173 $('charger-selection-strip').style.visibility = 'visible'; | |
174 } | |
175 | |
176 /** | |
177 * Select a charger, either original or good charger with green sticker. | |
178 */ | |
179 function selectCharger(selection) { | |
180 if (selection == CHARGER_SELECTION.NONE) | |
181 return; | |
182 | |
183 chargerSelection = selection; | |
184 $('check-charger-next-step').disabled = false; | |
185 if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) { | |
186 $('new-charger-box').style.borderColor = CHARGER_BOX_SELECTED_COLOR; | |
187 $('original-charger-box').style.borderColor = CHARGER_BOX_DESELECT_COLOR; | |
188 } else { | |
189 $('new-charger-box').style.borderColor = CHARGER_BOX_DESELECT_COLOR; | |
190 $('original-charger-box').style.borderColor = CHARGER_BOX_SELECTED_COLOR; | |
191 } | |
192 } | |
193 | |
194 /** | |
195 * Process the flow after user select a charger. | |
196 */ | |
197 function afterSelectCharger(dialogArg) { | |
198 if (chargerSelection == CHARGER_SELECTION.NONE) | |
199 return; | |
200 | |
201 if (chargerSelection == CHARGER_SELECTION.GOOD_CHARGER) { | |
202 showPage(PAGES.CONFIRM_SAFE_CHARGER); | |
203 } else { | |
204 if (dialogArg == NEW_CHARGER_ORDERED) | |
205 showPage(PAGES.CHARGER_STILL_BAD); | |
206 else | |
207 showPage(PAGES.CHARGER_UPDATE); | |
208 } | |
209 } | |
210 | |
211 /** | |
212 * Proceed to next step after user make the choice for charger update. | |
213 */ | |
214 function nextStepForChargerUpdate() { | |
215 var radios = document.getElementsByName('order-new-charger'); | |
216 if (radios[USER_CHOICE_FOR_CHARGER_UPDATE.ORDER_NEW_CHARGER].checked) { | |
217 if (navigator.onLine) | |
218 showPage(PAGES.ORDER_CHARGER_ONLINE); | |
219 else | |
220 showPage(PAGES.ORDER_CHARGER_OFFLINE); | |
221 } else { | |
222 showPage(PAGES.FINISH_NOT_ORDER_CHARGER); | |
223 } | |
224 } | |
225 | |
226 /** | |
227 * Update the UI after user confirms the choice for charger update. | |
228 */ | |
229 function afterUserConfirmationForChargerUpdate() { | |
230 if ($('order-new-charger').checked) { | |
231 $('not-order-charger-checkbox-strip').style.visibility = 'hidden'; | |
232 $('next-to-charger-update').disabled = false; | |
233 } else { | |
234 $('not-order-charger-checkbox-strip').style.visibility = 'visible'; | |
235 $('next-to-charger-update').disabled = | |
236 !$('confirm-not-order-charger').checked; | |
237 } | |
238 } | |
239 | |
240 /** | |
241 * Check if the online order form has been loaded in iFrame. | |
242 */ | |
243 function checkOnlineOrderFormLoaded() { | |
244 if (!isOrderFormLoaded) | |
245 showPage(PAGES.ORDER_CHARGER_OFFLINE); | |
246 } | |
247 | |
248 /** | |
249 * Check if the online charger order has been successful or not. | |
250 */ | |
251 function checkOnlineOrderSubmissionResponse() { | |
252 if (!isOrderSubmissionReceived) | |
253 showPage(PAGES.ORDER_CHARGER_OFFLINE); | |
254 } | |
255 | |
256 /** | |
257 * Handle the messages posted by the iFrame for online order form. | |
258 */ | |
259 function handleWindowMessage(e) { | |
260 if (e.origin != ORDER_CHARGER_IFRAME_URL) | |
261 return; | |
262 | |
263 var type = e.data['type']; | |
264 if (type == ORDER_CHARGER_IFRAME_MESSAGE.FORM_OPEN) { | |
265 isOrderFormLoaded = true; | |
266 } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUBMIT) { | |
267 if (onlineOrderSubmitTimer) | |
268 clearTimeout(onlineOrderSubmitTimer); | |
269 onlineOrderSubmitTimer = setTimeout(checkOnlineOrderSubmissionResponse, | |
270 ONLINE_ORDER_SUBMISSION_DELAY); | |
271 } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.SUCCESS) { | |
272 isOrderSubmissionReceived = true; | |
273 showPage(PAGES.CONFIRM_ONLINE_ORDER); | |
274 } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.FAILURE) { | |
275 isOrderSubmissionReceived = true; | |
276 } else if (type == ORDER_CHARGER_IFRAME_MESSAGE.LINK) { | |
277 chrome.send('showLink', [e.data['link']]); | |
278 } | |
279 } | |
280 | |
281 /** | |
282 * Page loaded. | |
283 */ | |
284 function load() { | |
285 var dialogArg = chrome.getVariableValue('dialogArguments'); | |
286 showPage(PAGES.CHECK_CHARGER); | |
287 $('check-charger-next-step').disabled = true; | |
288 $('charger-selection-strip').style.visibility = 'hidden'; | |
289 $('order-new-charger').checked = true; | |
290 $('finish-offline-order').disabled = true; | |
291 $('check-charger-next-step').onclick = function() { | |
292 afterSelectCharger(dialogArg); | |
293 }; | |
294 $('select-device-country').onchange = function() { | |
295 selectCountry(); | |
296 }; | |
297 $('new-charger').onclick = function() { | |
298 selectCharger(CHARGER_SELECTION.GOOD_CHARGER); | |
299 }; | |
300 $('original-charger').onclick = function() { | |
301 selectCharger(CHARGER_SELECTION.ORIGINAL_CHARGER); | |
302 }; | |
303 $('back-to-check-charger').onclick = function() { | |
304 showPage(PAGES.CHECK_CHARGER); | |
305 }; | |
306 $('finish-safe-charger').onclick = function() { | |
307 chrome.send('confirmSafeCharger'); | |
308 chrome.send('DialogClose'); | |
309 }; | |
310 $('back-to-check-charger-from-charger-update').onclick = function() { | |
311 showPage(PAGES.CHECK_CHARGER); | |
312 }; | |
313 $('next-to-charger-update').onclick = function() { | |
314 nextStepForChargerUpdate(); | |
315 }; | |
316 $('order-new-charger').onclick = function() { | |
317 afterUserConfirmationForChargerUpdate(); | |
318 }; | |
319 $('not-order-new-charger').onclick = function() { | |
320 afterUserConfirmationForChargerUpdate(); | |
321 }; | |
322 $('confirm-not-order-charger').onclick = function() { | |
323 afterUserConfirmationForChargerUpdate(); | |
324 }; | |
325 $('finish-not-order-new-charger').onclick = function() { | |
326 chrome.send('confirmNotOrderNewCharger'); | |
327 chrome.send('DialogClose'); | |
328 }; | |
329 $('finish-online-order').onclick = function() { | |
330 chrome.send('confirmChargerOrderedOnline'); | |
331 chrome.send('DialogClose'); | |
332 }; | |
333 $('offline-order-confirm').onclick = function() { | |
334 $('finish-offline-order').disabled = !$('offline-order-confirm').checked; | |
335 }; | |
336 $('finish-offline-order').onclick = function() { | |
337 chrome.send('confirmChargerOrderByPhone'); | |
338 chrome.send('DialogClose'); | |
339 }; | |
340 $('finish-still-bad-charger').onclick = function() { | |
341 chrome.send('confirmStillUseBadCharger'); | |
342 chrome.send('DialogClose'); | |
343 }; | |
344 | |
345 var links = document.getElementsByClassName('link'); | |
346 for (var i = 0; i < links.length; ++i) { | |
347 if (links[i].id == 'privacy-link') { | |
348 links[i].onclick = function() { | |
349 chrome.send('showLink', [PRIVACY_POLICY_LINK]); | |
350 }; | |
351 } else { | |
352 links[i].onclick = function() { | |
353 chrome.send('showLink', [CHARGER_FAQ_LINK]); | |
354 }; | |
355 } | |
356 } | |
357 | |
358 window.addEventListener('message', handleWindowMessage); | |
359 } | |
360 | |
361 return { | |
362 load: load | |
363 }; | |
364 | |
xiyuan
2013/12/06 00:24:37
nit: nuke the empty line.
jennyz
2013/12/06 03:54:24
Done.
| |
365 }); | |
366 | |
367 document.addEventListener('DOMContentLoaded', chargerReplacement.load); | |
368 | |
OLD | NEW |