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

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

Issue 7003007: Apply content-security-policy to the HTML options page. This is a (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: '' Created 9 years, 7 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, 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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698