OLD | NEW |
| (Empty) |
1 // Copyright (c) 2011 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('options', function() { | |
6 const OptionsPage = options.OptionsPage; | |
7 const ArrayDataModel = cr.ui.ArrayDataModel; | |
8 | |
9 // The GUID of the loaded address. | |
10 var guid; | |
11 | |
12 /** | |
13 * AutofillEditAddressOverlay class | |
14 * Encapsulated handling of the 'Add Page' overlay page. | |
15 * @class | |
16 */ | |
17 function AutofillEditAddressOverlay() { | |
18 OptionsPage.call(this, 'autofillEditAddress', | |
19 templateData.autofillEditAddressTitle, | |
20 'autofill-edit-address-overlay'); | |
21 } | |
22 | |
23 cr.addSingletonGetter(AutofillEditAddressOverlay); | |
24 | |
25 AutofillEditAddressOverlay.prototype = { | |
26 __proto__: OptionsPage.prototype, | |
27 | |
28 /** | |
29 * Initializes the page. | |
30 */ | |
31 initializePage: function() { | |
32 OptionsPage.prototype.initializePage.call(this); | |
33 | |
34 this.createMultiValueLists_(); | |
35 | |
36 var self = this; | |
37 $('autofill-edit-address-cancel-button').onclick = function(event) { | |
38 self.dismissOverlay_(); | |
39 } | |
40 $('autofill-edit-address-apply-button').onclick = function(event) { | |
41 self.saveAddress_(); | |
42 self.dismissOverlay_(); | |
43 } | |
44 | |
45 self.guid = ''; | |
46 self.populateCountryList_(); | |
47 self.clearInputFields_(); | |
48 self.connectInputEvents_(); | |
49 }, | |
50 | |
51 /** | |
52 * Creates, decorates and initializes the multi-value lists for full name, | |
53 * phone, fax, and email. | |
54 * @private | |
55 */ | |
56 createMultiValueLists_: function() { | |
57 var list = $('full-name-list'); | |
58 options.autofillOptions.AutofillValuesList.decorate(list); | |
59 list.autoExpands = true; | |
60 | |
61 list = $('phone-list'); | |
62 options.autofillOptions.AutofillPhoneValuesList.decorate(list); | |
63 list.autoExpands = true; | |
64 | |
65 list = $('fax-list'); | |
66 options.autofillOptions.AutofillFaxValuesList.decorate(list); | |
67 list.autoExpands = true; | |
68 | |
69 list = $('email-list'); | |
70 options.autofillOptions.AutofillValuesList.decorate(list); | |
71 list.autoExpands = true; | |
72 }, | |
73 | |
74 /** | |
75 * Updates the data model for the list named |listName| with the values from | |
76 * |entries|. | |
77 * @param {String} listName The id of the list. | |
78 * @param {Array} entries The list of items to be added to the list. | |
79 */ | |
80 setMultiValueList_: function(listName, entries) { | |
81 // Add data entries, filtering null or empty strings. | |
82 var list = $(listName); | |
83 list.dataModel = new ArrayDataModel( | |
84 entries.filter(function(i) {return i})); | |
85 | |
86 // Add special entry for adding new values. | |
87 list.dataModel.splice(list.dataModel.length, 0, null); | |
88 | |
89 var self = this; | |
90 list.dataModel.addEventListener( | |
91 'splice', function(event) { self.inputFieldChanged_(); }); | |
92 list.dataModel.addEventListener( | |
93 'change', function(event) { self.inputFieldChanged_(); }); | |
94 }, | |
95 | |
96 /** | |
97 * Clears any uncommitted input, resets the stored GUID and dismisses the | |
98 * overlay. | |
99 * @private | |
100 */ | |
101 dismissOverlay_: function() { | |
102 this.clearInputFields_(); | |
103 this.guid = ''; | |
104 OptionsPage.closeOverlay(); | |
105 }, | |
106 | |
107 /** | |
108 * Aggregates the values in the input fields into an array and sends the | |
109 * array to the Autofill handler. | |
110 * @private | |
111 */ | |
112 saveAddress_: function() { | |
113 var address = new Array(); | |
114 address[0] = this.guid; | |
115 var list = $('full-name-list'); | |
116 address[1] = list.dataModel.slice(0, list.dataModel.length - 1); | |
117 address[2] = $('company-name').value; | |
118 address[3] = $('addr-line-1').value; | |
119 address[4] = $('addr-line-2').value; | |
120 address[5] = $('city').value; | |
121 address[6] = $('state').value; | |
122 address[7] = $('postal-code').value; | |
123 address[8] = $('country').value; | |
124 list = $('phone-list'); | |
125 address[9] = list.dataModel.slice(0, list.dataModel.length - 1); | |
126 list = $('fax-list'); | |
127 address[10] = list.dataModel.slice(0, list.dataModel.length - 1); | |
128 list = $('email-list'); | |
129 address[11] = list.dataModel.slice(0, list.dataModel.length - 1); | |
130 | |
131 chrome.send('setAddress', address); | |
132 }, | |
133 | |
134 /** | |
135 * Connects each input field to the inputFieldChanged_() method that enables | |
136 * or disables the 'Ok' button based on whether all the fields are empty or | |
137 * not. | |
138 * @private | |
139 */ | |
140 connectInputEvents_: function() { | |
141 var self = this; | |
142 $('company-name').oninput = $('addr-line-1').oninput = | |
143 $('addr-line-2').oninput = $('city').oninput = $('state').oninput = | |
144 $('postal-code').oninput = function(event) { | |
145 self.inputFieldChanged_(); | |
146 } | |
147 | |
148 $('country').onchange = function(event) { | |
149 self.countryChanged_(); | |
150 } | |
151 }, | |
152 | |
153 /** | |
154 * Checks the values of each of the input fields and disables the 'Ok' | |
155 * button if all of the fields are empty. | |
156 * @private | |
157 */ | |
158 inputFieldChanged_: function() { | |
159 // Length of lists are tested for <= 1 due to the "add" placeholder item | |
160 // in the list. | |
161 var disabled = | |
162 $('full-name-list').items.length <= 1 && | |
163 !$('company-name').value && | |
164 !$('addr-line-1').value && !$('addr-line-2').value && | |
165 !$('city').value && !$('state').value && !$('postal-code').value && | |
166 !$('country').value && $('phone-list').items.length <= 1 && | |
167 $('fax-list').items.length <= 1 && $('email-list').items.length <= 1; | |
168 $('autofill-edit-address-apply-button').disabled = disabled; | |
169 }, | |
170 | |
171 /** | |
172 * Updates the postal code and state field labels appropriately for the | |
173 * selected country. | |
174 * @private | |
175 */ | |
176 countryChanged_: function() { | |
177 var countryCode = $('country').value; | |
178 if (!countryCode) | |
179 countryCode = templateData.defaultCountryCode; | |
180 | |
181 var details = templateData.autofillCountryData[countryCode]; | |
182 var postal = $('postal-code-label'); | |
183 postal.textContent = details['postalCodeLabel']; | |
184 $('state-label').textContent = details['stateLabel']; | |
185 | |
186 // Also update the 'Ok' button as needed. | |
187 this.inputFieldChanged_(); | |
188 }, | |
189 | |
190 /** | |
191 * Populates the country <select> list. | |
192 * @private | |
193 */ | |
194 populateCountryList_: function() { | |
195 var countryData = templateData.autofillCountryData; | |
196 var defaultCountryCode = templateData.defaultCountryCode; | |
197 | |
198 // Build an array of the country names and their corresponding country | |
199 // codes, so that we can sort and insert them in order. | |
200 var countries = []; | |
201 for (var countryCode in countryData) { | |
202 // We always want the default country to be at the top of the list, so | |
203 // we handle it separately. | |
204 if (countryCode == defaultCountryCode) | |
205 continue; | |
206 | |
207 var country = { | |
208 countryCode: countryCode, | |
209 name: countryData[countryCode]['name'] | |
210 }; | |
211 countries.push(country); | |
212 } | |
213 | |
214 // Sort the countries in alphabetical order by name. | |
215 countries = countries.sort(function(a, b) { | |
216 return a.name < b.name ? -1 : 1; | |
217 }); | |
218 | |
219 // Insert the empty and default countries at the beginning of the array. | |
220 var emptyCountry = { | |
221 countryCode: '', | |
222 name: '' | |
223 }; | |
224 var defaultCountry = { | |
225 countryCode: defaultCountryCode, | |
226 name: countryData[defaultCountryCode]['name'] | |
227 }; | |
228 countries.unshift(emptyCountry, defaultCountry); | |
229 | |
230 // Add the countries to the country <select> list. | |
231 var countryList = $('country'); | |
232 for (var i = 0; i < countries.length; i++) { | |
233 var country = new Option(countries[i].name, countries[i].countryCode); | |
234 countryList.appendChild(country) | |
235 } | |
236 }, | |
237 | |
238 /** | |
239 * Clears the value of each input field. | |
240 * @private | |
241 */ | |
242 clearInputFields_: function() { | |
243 this.setMultiValueList_('full-name-list', []); | |
244 $('company-name').value = ''; | |
245 $('addr-line-1').value = ''; | |
246 $('addr-line-2').value = ''; | |
247 $('city').value = ''; | |
248 $('state').value = ''; | |
249 $('postal-code').value = ''; | |
250 $('country').value = ''; | |
251 this.setMultiValueList_('phone-list', []); | |
252 this.setMultiValueList_('fax-list', []); | |
253 this.setMultiValueList_('email-list', []); | |
254 | |
255 this.countryChanged_(); | |
256 }, | |
257 | |
258 /** | |
259 * Loads the address data from |address|, sets the input fields based on | |
260 * this data and stores the GUID of the address. | |
261 * @private | |
262 */ | |
263 loadAddress_: function(address) { | |
264 this.setInputFields_(address); | |
265 this.inputFieldChanged_(); | |
266 this.guid = address['guid']; | |
267 }, | |
268 | |
269 /** | |
270 * Sets the value of each input field according to |address| | |
271 * @private | |
272 */ | |
273 setInputFields_: function(address) { | |
274 this.setMultiValueList_('full-name-list', address['fullName']); | |
275 $('company-name').value = address['companyName']; | |
276 $('addr-line-1').value = address['addrLine1']; | |
277 $('addr-line-2').value = address['addrLine2']; | |
278 $('city').value = address['city']; | |
279 $('state').value = address['state']; | |
280 $('postal-code').value = address['postalCode']; | |
281 $('country').value = address['country']; | |
282 this.setMultiValueList_('phone-list', address['phone']); | |
283 this.setMultiValueList_('fax-list', address['fax']); | |
284 this.setMultiValueList_('email-list', address['email']); | |
285 | |
286 this.countryChanged_(); | |
287 }, | |
288 }; | |
289 | |
290 AutofillEditAddressOverlay.clearInputFields = function() { | |
291 AutofillEditAddressOverlay.getInstance().clearInputFields_(); | |
292 }; | |
293 | |
294 AutofillEditAddressOverlay.loadAddress = function(address) { | |
295 AutofillEditAddressOverlay.getInstance().loadAddress_(address); | |
296 }; | |
297 | |
298 AutofillEditAddressOverlay.setTitle = function(title) { | |
299 $('autofill-address-title').textContent = title; | |
300 }; | |
301 | |
302 AutofillEditAddressOverlay.setValidatedPhoneNumbers = function(numbers) { | |
303 AutofillEditAddressOverlay.getInstance().setMultiValueList_('phone-list', | |
304 numbers); | |
305 }; | |
306 | |
307 AutofillEditAddressOverlay.setValidatedFaxNumbers = function(numbers) { | |
308 AutofillEditAddressOverlay.getInstance().setMultiValueList_('fax-list', | |
309 numbers); | |
310 }; | |
311 | |
312 // Export | |
313 return { | |
314 AutofillEditAddressOverlay: AutofillEditAddressOverlay | |
315 }; | |
316 }); | |
OLD | NEW |