| OLD | NEW |
|---|
| (Empty) |
| 1 // Copyright (c) 2012 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 */ var OptionsPage = options.OptionsPage; | |
| 7 /** @const */ var 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 loadTimeData.getString('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 | |
| 41 // TODO(jhawkins): Investigate other possible solutions. | |
| 42 $('autofill-edit-address-apply-button').onclick = function(event) { | |
| 43 // Blur active element to ensure that pending changes are committed. | |
| 44 if (document.activeElement) | |
| 45 document.activeElement.blur(); | |
| 46 // Blurring is delayed for list elements. Queue save and close to | |
| 47 // ensure that pending changes have been applied. | |
| 48 setTimeout(function() { | |
| 49 self.saveAddress_(); | |
| 50 self.dismissOverlay_(); | |
| 51 }, 0); | |
| 52 }; | |
| 53 | |
| 54 // Prevent 'blur' events on the OK and cancel buttons, which can trigger | |
| 55 // insertion of new placeholder elements. The addition of placeholders | |
| 56 // affects layout, which interferes with being able to click on the | |
| 57 // buttons. | |
| 58 $('autofill-edit-address-apply-button').onmousedown = function(event) { | |
| 59 event.preventDefault(); | |
| 60 }; | |
| 61 $('autofill-edit-address-cancel-button').onmousedown = function(event) { | |
| 62 event.preventDefault(); | |
| 63 }; | |
| 64 | |
| 65 self.guid = ''; | |
| 66 self.populateCountryList_(); | |
| 67 self.clearInputFields_(); | |
| 68 self.connectInputEvents_(); | |
| 69 }, | |
| 70 | |
| 71 /** | |
| 72 * Creates, decorates and initializes the multi-value lists for full name, | |
| 73 * phone, and email. | |
| 74 * @private | |
| 75 */ | |
| 76 createMultiValueLists_: function() { | |
| 77 var list = $('full-name-list'); | |
| 78 options.autofillOptions.AutofillNameValuesList.decorate(list); | |
| 79 list.autoExpands = true; | |
| 80 | |
| 81 list = $('phone-list'); | |
| 82 options.autofillOptions.AutofillPhoneValuesList.decorate(list); | |
| 83 list.autoExpands = true; | |
| 84 | |
| 85 list = $('email-list'); | |
| 86 options.autofillOptions.AutofillValuesList.decorate(list); | |
| 87 list.autoExpands = true; | |
| 88 }, | |
| 89 | |
| 90 /** | |
| 91 * Updates the data model for the list named |listName| with the values from | |
| 92 * |entries|. | |
| 93 * @param {String} listName The id of the list. | |
| 94 * @param {Array} entries The list of items to be added to the list. | |
| 95 */ | |
| 96 setMultiValueList_: function(listName, entries) { | |
| 97 // Add data entries. | |
| 98 var list = $(listName); | |
| 99 | |
| 100 // Add special entry for adding new values. | |
| 101 var augmentedList = entries.slice(); | |
| 102 augmentedList.push(null); | |
| 103 list.dataModel = new ArrayDataModel(augmentedList); | |
| 104 | |
| 105 // Update the status of the 'OK' button. | |
| 106 this.inputFieldChanged_(); | |
| 107 | |
| 108 list.dataModel.addEventListener('splice', | |
| 109 this.inputFieldChanged_.bind(this)); | |
| 110 list.dataModel.addEventListener('change', | |
| 111 this.inputFieldChanged_.bind(this)); | |
| 112 }, | |
| 113 | |
| 114 /** | |
| 115 * Clears any uncommitted input, resets the stored GUID and dismisses the | |
| 116 * overlay. | |
| 117 * @private | |
| 118 */ | |
| 119 dismissOverlay_: function() { | |
| 120 this.clearInputFields_(); | |
| 121 this.guid = ''; | |
| 122 OptionsPage.closeOverlay(); | |
| 123 }, | |
| 124 | |
| 125 /** | |
| 126 * Aggregates the values in the input fields into an array and sends the | |
| 127 * array to the Autofill handler. | |
| 128 * @private | |
| 129 */ | |
| 130 saveAddress_: function() { | |
| 131 var address = new Array(); | |
| 132 address[0] = this.guid; | |
| 133 var list = $('full-name-list'); | |
| 134 address[1] = list.dataModel.slice(0, list.dataModel.length - 1); | |
| 135 address[2] = $('company-name').value; | |
| 136 address[3] = $('addr-line-1').value; | |
| 137 address[4] = $('addr-line-2').value; | |
| 138 address[5] = $('city').value; | |
| 139 address[6] = $('state').value; | |
| 140 address[7] = $('postal-code').value; | |
| 141 address[8] = $('country').value; | |
| 142 list = $('phone-list'); | |
| 143 address[9] = list.dataModel.slice(0, list.dataModel.length - 1); | |
| 144 list = $('email-list'); | |
| 145 address[10] = list.dataModel.slice(0, list.dataModel.length - 1); | |
| 146 | |
| 147 chrome.send('setAddress', address); | |
| 148 }, | |
| 149 | |
| 150 /** | |
| 151 * Connects each input field to the inputFieldChanged_() method that enables | |
| 152 * or disables the 'Ok' button based on whether all the fields are empty or | |
| 153 * not. | |
| 154 * @private | |
| 155 */ | |
| 156 connectInputEvents_: function() { | |
| 157 var self = this; | |
| 158 $('company-name').oninput = $('addr-line-1').oninput = | |
| 159 $('addr-line-2').oninput = $('city').oninput = $('state').oninput = | |
| 160 $('postal-code').oninput = function(event) { | |
| 161 self.inputFieldChanged_(); | |
| 162 }; | |
| 163 | |
| 164 $('country').onchange = function(event) { | |
| 165 self.countryChanged_(); | |
| 166 }; | |
| 167 }, | |
| 168 | |
| 169 /** | |
| 170 * Checks the values of each of the input fields and disables the 'Ok' | |
| 171 * button if all of the fields are empty. | |
| 172 * @private | |
| 173 */ | |
| 174 inputFieldChanged_: function() { | |
| 175 // Length of lists are tested for <= 1 due to the "add" placeholder item | |
| 176 // in the list. | |
| 177 var disabled = | |
| 178 $('full-name-list').items.length <= 1 && | |
| 179 !$('company-name').value && | |
| 180 !$('addr-line-1').value && !$('addr-line-2').value && | |
| 181 !$('city').value && !$('state').value && !$('postal-code').value && | |
| 182 !$('country').value && $('phone-list').items.length <= 1 && | |
| 183 $('email-list').items.length <= 1; | |
| 184 $('autofill-edit-address-apply-button').disabled = disabled; | |
| 185 }, | |
| 186 | |
| 187 /** | |
| 188 * Updates the postal code and state field labels appropriately for the | |
| 189 * selected country. | |
| 190 * @private | |
| 191 */ | |
| 192 countryChanged_: function() { | |
| 193 var countryCode = $('country').value || | |
| 194 loadTimeData.getString('defaultCountryCode'); | |
| 195 | |
| 196 var details = loadTimeData.getValue('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 = loadTimeData.getValue('autofillCountryData'); | |
| 211 var defaultCountryCode = loadTimeData.getString('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.setMultiValueList_('full-name-list', []); | |
| 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.setMultiValueList_('full-name-list', 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 }); | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10809005:
Options: Rename chrome/browser/resources/options2 -> chrome/browser/resources/options. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src