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