src/chrome/browser/resources/options/autofill_edit_address_overlay.js

   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           $('phone-list').doneValidating().then(function() {
  50             self.saveAddress_();
  51             self.dismissOverlay_();
  52           });
  53         }, 0);
  54       };
  55
  56       // Prevent 'blur' events on the OK and cancel buttons, which can trigger
  57       // insertion of new placeholder elements.  The addition of placeholders
  58       // affects layout, which interferes with being able to click on the
  59       // buttons.
  60       $('autofill-edit-address-apply-button').onmousedown = function(event) {
  61         event.preventDefault();
  62       };
  63       $('autofill-edit-address-cancel-button').onmousedown = function(event) {
  64         event.preventDefault();
  65       };
  66
  67       self.guid = '';
  68       self.populateCountryList_();
  69       self.clearInputFields_();
  70       self.connectInputEvents_();
  71     },
  72
  73     /**
  74     * Specifically catch the situations in which the overlay is cancelled
  75     * externally (e.g. by pressing <Esc>), so that the input fields and
  76     * GUID can be properly cleared.
  77     * @override
  78     */
  79     handleCancel: function() {
  80       this.dismissOverlay_();
  81     },
  82
  83     /**
  84      * Creates, decorates and initializes the multi-value lists for full name,
  85      * phone, and email.
  86      * @private
  87      */
  88     createMultiValueLists_: function() {
  89       var list = $('full-name-list');
  90       options.autofillOptions.AutofillNameValuesList.decorate(list);
  91       list.autoExpands = true;
  92
  93       list = $('phone-list');
  94       options.autofillOptions.AutofillPhoneValuesList.decorate(list);
  95       list.autoExpands = true;
  96
  97       list = $('email-list');
  98       options.autofillOptions.AutofillValuesList.decorate(list);
  99       list.autoExpands = true;
 100     },
 101
 102     /**
 103      * Updates the data model for the list named |listName| with the values from
 104      * |entries|.
 105      * @param {string} listName The id of the list.
 106      * @param {Array} entries The list of items to be added to the list.
 107      */
 108     setMultiValueList_: function(listName, entries) {
 109       // Add data entries.
 110       var list = $(listName);
 111
 112       // Add special entry for adding new values.
 113       var augmentedList = entries.slice();
 114       augmentedList.push(null);
 115       list.dataModel = new ArrayDataModel(augmentedList);
 116
 117       // Update the status of the 'OK' button.
 118       this.inputFieldChanged_();
 119
 120       list.dataModel.addEventListener('splice',
 121                                       this.inputFieldChanged_.bind(this));
 122       list.dataModel.addEventListener('change',
 123                                       this.inputFieldChanged_.bind(this));
 124     },
 125
 126     /**
 127      * Clears any uncommitted input, resets the stored GUID and dismisses the
 128      * overlay.
 129      * @private
 130      */
 131     dismissOverlay_: function() {
 132       this.clearInputFields_();
 133       this.guid = '';
 134       OptionsPage.closeOverlay();
 135     },
 136
 137     /**
 138      * Aggregates the values in the input fields into an array and sends the
 139      * array to the Autofill handler.
 140      * @private
 141      */
 142     saveAddress_: function() {
 143       var address = new Array();
 144       address[0] = this.guid;
 145       var list = $('full-name-list');
 146       address[1] = list.dataModel.slice(0, list.dataModel.length - 1);
 147       address[2] = $('company-name').value;
 148       address[3] = $('addr-line-1').value;
 149       address[4] = $('addr-line-2').value;
 150       address[5] = $('city').value;
 151       address[6] = $('state').value;
 152       address[7] = $('postal-code').value;
 153       address[8] = $('country').value;
 154       list = $('phone-list');
 155       address[9] = list.dataModel.slice(0, list.dataModel.length - 1);
 156       list = $('email-list');
 157       address[10] = list.dataModel.slice(0, list.dataModel.length - 1);
 158
 159       chrome.send('setAddress', address);
 160     },
 161
 162     /**
 163      * Connects each input field to the inputFieldChanged_() method that enables
 164      * or disables the 'Ok' button based on whether all the fields are empty or
 165      * not.
 166      * @private
 167      */
 168     connectInputEvents_: function() {
 169       var self = this;
 170       $('company-name').oninput = $('addr-line-1').oninput =
 171           $('addr-line-2').oninput = $('city').oninput = $('state').oninput =
 172           $('postal-code').oninput = function(event) {
 173         self.inputFieldChanged_();
 174       };
 175
 176       $('country').onchange = function(event) {
 177         self.countryChanged_();
 178       };
 179     },
 180
 181     /**
 182      * Checks the values of each of the input fields and disables the 'Ok'
 183      * button if all of the fields are empty.
 184      * @private
 185      */
 186     inputFieldChanged_: function() {
 187       // Length of lists are tested for <= 1 due to the "add" placeholder item
 188       // in the list.
 189       var disabled =
 190           $('full-name-list').items.length <= 1 &&
 191           !$('company-name').value &&
 192           !$('addr-line-1').value && !$('addr-line-2').value &&
 193           !$('city').value && !$('state').value && !$('postal-code').value &&
 194           !$('country').value && $('phone-list').items.length <= 1 &&
 195           $('email-list').items.length <= 1;
 196       $('autofill-edit-address-apply-button').disabled = disabled;
 197     },
 198
 199     /**
 200      * Updates the postal code and state field labels appropriately for the
 201      * selected country.
 202      * @private
 203      */
 204     countryChanged_: function() {
 205       var countryCode = $('country').value ||
 206           loadTimeData.getString('defaultCountryCode');
 207
 208       var details = loadTimeData.getValue('autofillCountryData')[countryCode];
 209       var postal = $('postal-code-label');
 210       postal.textContent = details.postalCodeLabel;
 211       $('state-label').textContent = details.stateLabel;
 212
 213       // Also update the 'Ok' button as needed.
 214       this.inputFieldChanged_();
 215     },
 216
 217     /**
 218      * Populates the country <select> list.
 219      * @private
 220      */
 221     populateCountryList_: function() {
 222       var countryList = loadTimeData.getValue('autofillCountrySelectList');
 223
 224       // Add the countries to the country <select> list.
 225       var countrySelect = $('country');
 226       // Add an empty option.
 227       countrySelect.appendChild(new Option('', ''));
 228       for (var i = 0; i < countryList.length; i++) {
 229         var option = new Option(countryList[i].name,
 230                                 countryList[i].value);
 231         option.disabled = countryList[i].value == 'separator';
 232         countrySelect.appendChild(option);
 233       }
 234     },
 235
 236     /**
 237      * Clears the value of each input field.
 238      * @private
 239      */
 240     clearInputFields_: function() {
 241       this.setMultiValueList_('full-name-list', []);
 242       $('company-name').value = '';
 243       $('addr-line-1').value = '';
 244       $('addr-line-2').value = '';
 245       $('city').value = '';
 246       $('state').value = '';
 247       $('postal-code').value = '';
 248       $('country').value = '';
 249       this.setMultiValueList_('phone-list', []);
 250       this.setMultiValueList_('email-list', []);
 251
 252       this.countryChanged_();
 253     },
 254
 255     /**
 256      * Loads the address data from |address|, sets the input fields based on
 257      * this data and stores the GUID of the address.
 258      * @private
 259      */
 260     loadAddress_: function(address) {
 261       this.setInputFields_(address);
 262       this.inputFieldChanged_();
 263       this.guid = address.guid;
 264     },
 265
 266     /**
 267      * Sets the value of each input field according to |address|
 268      * @private
 269      */
 270     setInputFields_: function(address) {
 271       this.setMultiValueList_('full-name-list', address.fullName);
 272       $('company-name').value = address.companyName;
 273       $('addr-line-1').value = address.addrLine1;
 274       $('addr-line-2').value = address.addrLine2;
 275       $('city').value = address.city;
 276       $('state').value = address.state;
 277       $('postal-code').value = address.postalCode;
 278       $('country').value = address.country;
 279       this.setMultiValueList_('phone-list', address.phone);
 280       this.setMultiValueList_('email-list', address.email);
 281
 282       this.countryChanged_();
 283     },
 284   };
 285
 286   AutofillEditAddressOverlay.loadAddress = function(address) {
 287     AutofillEditAddressOverlay.getInstance().loadAddress_(address);
 288   };
 289
 290   AutofillEditAddressOverlay.setTitle = function(title) {
 291     $('autofill-address-title').textContent = title;
 292   };
 293
 294   AutofillEditAddressOverlay.setValidatedPhoneNumbers = function(numbers) {
 295     AutofillEditAddressOverlay.getInstance().setMultiValueList_('phone-list',
 296                                                                 numbers);
 297     $('phone-list').didReceiveValidationResult();
 298   };
 299
 300   // Export
 301   return {
 302     AutofillEditAddressOverlay: AutofillEditAddressOverlay
 303   };
 304 });