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

Side by Side Diff: chrome/browser/resources/options/autofill_edit_address_overlay.js

Issue 9814030: get rid of old options pages (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: more fixes Created 8 years, 9 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 | Annotate | Revision Log
OLDNEW
(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, and email.
54 * @private
55 */
56 createMultiValueLists_: function() {
57 var list = $('full-name-list');
58 options.autofillOptions.AutofillNameValuesList.decorate(list);
59 list.autoExpands = true;
60
61 list = $('phone-list');
62 options.autofillOptions.AutofillPhoneValuesList.decorate(list);
63 list.autoExpands = true;
64
65 list = $('email-list');
66 options.autofillOptions.AutofillValuesList.decorate(list);
67 list.autoExpands = true;
68 },
69
70 /**
71 * Updates the data model for the list named |listName| with the values from
72 * |entries|.
73 * @param {String} listName The id of the list.
74 * @param {Array} entries The list of items to be added to the list.
75 */
76 setMultiValueList_: function(listName, entries) {
77 // Add data entries.
78 var list = $(listName);
79 list.dataModel = new ArrayDataModel(entries);
80
81 // Add special entry for adding new values.
82 list.dataModel.splice(list.dataModel.length, 0, null);
83
84 // Update the status of the 'OK' button.
85 this.inputFieldChanged_();
86
87 var self = this;
88 list.dataModel.addEventListener(
89 'splice', function(event) { self.inputFieldChanged_(); });
90 list.dataModel.addEventListener(
91 'change', function(event) { self.inputFieldChanged_(); });
92 },
93
94 /**
95 * Updates the data model for the name list with the values from |entries|.
96 * @param {Array} names The list of names to be added to the list.
97 */
98 setNameList_: function(names) {
99 // Add the given |names| as backing data for the list.
100 var list = $('full-name-list');
101 list.dataModel = new ArrayDataModel(names);
102
103 // Add special entry for adding new values.
104 list.dataModel.splice(list.dataModel.length, 0, null);
105
106 var self = this;
107 list.dataModel.addEventListener(
108 'splice', function(event) { self.inputFieldChanged_(); });
109 list.dataModel.addEventListener(
110 'change', function(event) { self.inputFieldChanged_(); });
111 },
112
113 /**
114 * Clears any uncommitted input, resets the stored GUID and dismisses the
115 * overlay.
116 * @private
117 */
118 dismissOverlay_: function() {
119 this.clearInputFields_();
120 this.guid = '';
121 OptionsPage.closeOverlay();
122 },
123
124 /**
125 * Aggregates the values in the input fields into an array and sends the
126 * array to the Autofill handler.
127 * @private
128 */
129 saveAddress_: function() {
130 var address = new Array();
131 address[0] = this.guid;
132 var list = $('full-name-list');
133 address[1] = list.dataModel.slice(0, list.dataModel.length - 1);
134 address[2] = $('company-name').value;
135 address[3] = $('addr-line-1').value;
136 address[4] = $('addr-line-2').value;
137 address[5] = $('city').value;
138 address[6] = $('state').value;
139 address[7] = $('postal-code').value;
140 address[8] = $('country').value;
141 list = $('phone-list');
142 address[9] = list.dataModel.slice(0, list.dataModel.length - 1);
143 list = $('email-list');
144 address[10] = list.dataModel.slice(0, list.dataModel.length - 1);
145
146 chrome.send('setAddress', address);
147 },
148
149 /**
150 * Connects each input field to the inputFieldChanged_() method that enables
151 * or disables the 'Ok' button based on whether all the fields are empty or
152 * not.
153 * @private
154 */
155 connectInputEvents_: function() {
156 var self = this;
157 $('company-name').oninput = $('addr-line-1').oninput =
158 $('addr-line-2').oninput = $('city').oninput = $('state').oninput =
159 $('postal-code').oninput = function(event) {
160 self.inputFieldChanged_();
161 }
162
163 $('country').onchange = function(event) {
164 self.countryChanged_();
165 }
166 },
167
168 /**
169 * Checks the values of each of the input fields and disables the 'Ok'
170 * button if all of the fields are empty.
171 * @private
172 */
173 inputFieldChanged_: function() {
174 // Length of lists are tested for <= 1 due to the "add" placeholder item
175 // in the list.
176 var disabled =
177 $('full-name-list').items.length <= 1 &&
178 !$('company-name').value &&
179 !$('addr-line-1').value && !$('addr-line-2').value &&
180 !$('city').value && !$('state').value && !$('postal-code').value &&
181 !$('country').value && $('phone-list').items.length <= 1 &&
182 $('email-list').items.length <= 1;
183 $('autofill-edit-address-apply-button').disabled = disabled;
184 },
185
186 /**
187 * Updates the postal code and state field labels appropriately for the
188 * selected country.
189 * @private
190 */
191 countryChanged_: function() {
192 var countryCode = $('country').value;
193 if (!countryCode)
194 countryCode = templateData.defaultCountryCode;
195
196 var details = templateData.autofillCountryData[countryCode];
197 var postal = $('postal-code-label');
198 postal.textContent = details['postalCodeLabel'];
199 $('state-label').textContent = details['stateLabel'];
200
201 // Also update the 'Ok' button as needed.
202 this.inputFieldChanged_();
203 },
204
205 /**
206 * Populates the country <select> list.
207 * @private
208 */
209 populateCountryList_: function() {
210 var countryData = templateData.autofillCountryData;
211 var defaultCountryCode = templateData.defaultCountryCode;
212
213 // Build an array of the country names and their corresponding country
214 // codes, so that we can sort and insert them in order.
215 var countries = [];
216 for (var countryCode in countryData) {
217 var country = {
218 countryCode: countryCode,
219 name: countryData[countryCode]['name']
220 };
221 countries.push(country);
222 }
223
224 // Sort the countries in alphabetical order by name.
225 countries = countries.sort(function(a, b) {
226 return a.name < b.name ? -1 : 1;
227 });
228
229 // Insert the empty and default countries at the beginning of the array.
230 var emptyCountry = {
231 countryCode: '',
232 name: ''
233 };
234 var defaultCountry = {
235 countryCode: defaultCountryCode,
236 name: countryData[defaultCountryCode]['name']
237 };
238 var separator = {
239 countryCode: '',
240 name: '---',
241 disabled: true
242 }
243 countries.unshift(emptyCountry, defaultCountry, separator);
244
245 // Add the countries to the country <select> list.
246 var countryList = $('country');
247 for (var i = 0; i < countries.length; i++) {
248 var country = new Option(countries[i].name, countries[i].countryCode);
249 country.disabled = countries[i].disabled;
250 countryList.appendChild(country)
251 }
252 },
253
254 /**
255 * Clears the value of each input field.
256 * @private
257 */
258 clearInputFields_: function() {
259 this.setNameList_([]);
260 $('company-name').value = '';
261 $('addr-line-1').value = '';
262 $('addr-line-2').value = '';
263 $('city').value = '';
264 $('state').value = '';
265 $('postal-code').value = '';
266 $('country').value = '';
267 this.setMultiValueList_('phone-list', []);
268 this.setMultiValueList_('email-list', []);
269
270 this.countryChanged_();
271 },
272
273 /**
274 * Loads the address data from |address|, sets the input fields based on
275 * this data and stores the GUID of the address.
276 * @private
277 */
278 loadAddress_: function(address) {
279 this.setInputFields_(address);
280 this.inputFieldChanged_();
281 this.guid = address['guid'];
282 },
283
284 /**
285 * Sets the value of each input field according to |address|
286 * @private
287 */
288 setInputFields_: function(address) {
289 this.setNameList_(address['fullName']);
290 $('company-name').value = address['companyName'];
291 $('addr-line-1').value = address['addrLine1'];
292 $('addr-line-2').value = address['addrLine2'];
293 $('city').value = address['city'];
294 $('state').value = address['state'];
295 $('postal-code').value = address['postalCode'];
296 $('country').value = address['country'];
297 this.setMultiValueList_('phone-list', address['phone']);
298 this.setMultiValueList_('email-list', address['email']);
299
300 this.countryChanged_();
301 },
302 };
303
304 AutofillEditAddressOverlay.clearInputFields = function() {
305 AutofillEditAddressOverlay.getInstance().clearInputFields_();
306 };
307
308 AutofillEditAddressOverlay.loadAddress = function(address) {
309 AutofillEditAddressOverlay.getInstance().loadAddress_(address);
310 };
311
312 AutofillEditAddressOverlay.setTitle = function(title) {
313 $('autofill-address-title').textContent = title;
314 };
315
316 AutofillEditAddressOverlay.setValidatedPhoneNumbers = function(numbers) {
317 AutofillEditAddressOverlay.getInstance().setMultiValueList_('phone-list',
318 numbers);
319 };
320
321 // Export
322 return {
323 AutofillEditAddressOverlay: AutofillEditAddressOverlay
324 };
325 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698