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