chrome/browser/resources/options/autofill_options.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 /**
   6  * @typedef {{
   7  *   creditCardNumber: string,
   8  *   expirationMonth: string,
   9  *   expirationYear: string,
  10  *   guid: string,
  11  *   nameOnCard: string
  12  * }}
  13  * @see chrome/browser/ui/webui/options/autofill_options_handler.cc
  14  */
  15 var CreditCardData;
  16
  17 cr.define('options', function() {
  18   var Page = cr.ui.pageManager.Page;
  19   var PageManager = cr.ui.pageManager.PageManager;
  20   var ArrayDataModel = cr.ui.ArrayDataModel;
  21
  22   /////////////////////////////////////////////////////////////////////////////
  23   // AutofillOptions class:
  24
  25   /**
  26    * Encapsulated handling of Autofill options page.
  27    * @constructor
  28    * @extends {cr.ui.pageManager.Page}
  29    */
  30   function AutofillOptions() {
  31     Page.call(this, 'autofill',
  32               loadTimeData.getString('autofillOptionsPageTabTitle'),
  33               'autofill-options');
  34   }
  35
  36   cr.addSingletonGetter(AutofillOptions);
  37
  38   AutofillOptions.prototype = {
  39     __proto__: Page.prototype,
  40
  41     /**
  42      * The address list.
  43      * @type {options.DeletableItemList}
  44      * @private
  45      */
  46     addressList_: null,
  47
  48     /**
  49      * The credit card list.
  50      * @type {options.DeletableItemList}
  51      * @private
  52      */
  53     creditCardList_: null,
  54
  55     /** @override */
  56     initializePage: function() {
  57       Page.prototype.initializePage.call(this);
  58
  59       this.createAddressList_();
  60       this.createCreditCardList_();
  61
  62       var self = this;
  63       $('autofill-add-address').onclick = function(event) {
  64         self.showAddAddressOverlay_();
  65       };
  66       $('autofill-add-creditcard').onclick = function(event) {
  67         self.showAddCreditCardOverlay_();
  68       };
  69       $('autofill-options-confirm').onclick = function(event) {
  70         PageManager.closeOverlay();
  71       };
  72
  73       $('autofill-help').onclick = function(event) {
  74         chrome.send('coreOptionsUserMetricsAction',
  75                     ['Options_AutofillShowAbout']);
  76         return true;  // Always follow the href
  77       };
  78
  79       this.walletIntegrationAvailableStateChanged_(
  80           loadTimeData.getBoolean('autofillWalletIntegrationAvailable'));
  81
  82       // TODO(jhawkins): What happens when Autofill is disabled whilst on the
  83       // Autofill options page?
  84     },
  85
  86     /**
  87      * Creates, decorates and initializes the address list.
  88      * @private
  89      */
  90     createAddressList_: function() {
  91       var addressList = $('address-list');
  92       options.autofillOptions.AutofillAddressList.decorate(addressList);
  93       this.addressList_ = assertInstanceof(addressList,
  94                                            options.DeletableItemList);
  95       this.addressList_.autoExpands = true;
  96     },
  97
  98     /**
  99      * Creates, decorates and initializes the credit card list.
 100      * @private
 101      */
 102     createCreditCardList_: function() {
 103       var creditCardList = $('creditcard-list');
 104       options.autofillOptions.AutofillCreditCardList.decorate(creditCardList);
 105       this.creditCardList_ = assertInstanceof(creditCardList,
 106                                               options.DeletableItemList);
 107       this.creditCardList_.autoExpands = true;
 108     },
 109
 110     /**
 111      * Shows the 'Add address' overlay, specifically by loading the
 112      * 'Edit address' overlay and modifying the overlay title.
 113      * @private
 114      */
 115     showAddAddressOverlay_: function() {
 116       var title = loadTimeData.getString('addAddressTitle');
 117       AutofillEditAddressOverlay.setTitle(title);
 118       PageManager.showPageByName('autofillEditAddress');
 119       AutofillEditAddressOverlay.prepForNewAddress();
 120     },
 121
 122     /**
 123      * Shows the 'Add credit card' overlay, specifically by loading the
 124      * 'Edit credit card' overlay and modifying the overlay title.
 125      * @private
 126      */
 127     showAddCreditCardOverlay_: function() {
 128       var title = loadTimeData.getString('addCreditCardTitle');
 129       AutofillEditCreditCardOverlay.setTitle(title);
 130       PageManager.showPageByName('autofillEditCreditCard');
 131       AutofillEditCreditCardOverlay.prepForNewCard();
 132     },
 133
 134     /**
 135      * Updates the data model for the address list with the values from
 136      * |entries|.
 137      * @param {!Array} entries The list of addresses.
 138      */
 139     setAddressList_: function(entries) {
 140       this.addressList_.dataModel = new ArrayDataModel(entries);
 141     },
 142
 143     /**
 144      * Updates the data model for the credit card list with the values from
 145      * |entries|.
 146      * @param {!Array} entries The list of credit cards.
 147      */
 148     setCreditCardList_: function(entries) {
 149       this.creditCardList_.dataModel = new ArrayDataModel(entries);
 150     },
 151
 152     /**
 153      * Removes the Autofill address or credit card represented by |guid|.
 154      * @param {string} guid The GUID of the address to remove.
 155      * @param {string=} metricsAction The name of the action to log for metrics.
 156      * @private
 157      */
 158     removeData_: function(guid, metricsAction) {
 159       chrome.send('removeData', [guid]);
 160       if (metricsAction)
 161         chrome.send('coreOptionsUserMetricsAction', [metricsAction]);
 162     },
 163
 164     /**
 165      * Shows the 'Edit address' overlay, using the data in |address| to fill the
 166      * input fields. |address| is a list with one item, an associative array
 167      * that contains the address data.
 168      * @private
 169      */
 170     showEditAddressOverlay_: function(address) {
 171       var title = loadTimeData.getString('editAddressTitle');
 172       AutofillEditAddressOverlay.setTitle(title);
 173       AutofillEditAddressOverlay.loadAddress(address);
 174       PageManager.showPageByName('autofillEditAddress');
 175     },
 176
 177     /**
 178      * Shows the 'Edit credit card' overlay, using the data in |credit_card| to
 179      * fill the input fields. |creditCard| is a list with one item, an
 180      * associative array that contains the credit card data.
 181      * @param {CreditCardData} creditCard
 182      * @private
 183      */
 184     showEditCreditCardOverlay_: function(creditCard) {
 185       var title = loadTimeData.getString('editCreditCardTitle');
 186       AutofillEditCreditCardOverlay.setTitle(title);
 187       AutofillEditCreditCardOverlay.loadCreditCard(creditCard);
 188       PageManager.showPageByName('autofillEditCreditCard');
 189     },
 190
 191     /**
 192      * Toggles the visibility of the Wallet integration checkbox.
 193      * @param {boolean} available Whether the user has the option of using
 194      *     Wallet data.
 195      * @private
 196      */
 197     walletIntegrationAvailableStateChanged_: function(available) {
 198       $('autofill-wallet-setting-area').hidden = !available;
 199     },
 200   };
 201
 202   AutofillOptions.setAddressList = function(entries) {
 203     AutofillOptions.getInstance().setAddressList_(entries);
 204   };
 205
 206   AutofillOptions.setCreditCardList = function(entries) {
 207     AutofillOptions.getInstance().setCreditCardList_(entries);
 208   };
 209
 210   AutofillOptions.removeData = function(guid, metricsAction) {
 211     AutofillOptions.getInstance().removeData_(guid, metricsAction);
 212   };
 213
 214   AutofillOptions.editAddress = function(address) {
 215     AutofillOptions.getInstance().showEditAddressOverlay_(address);
 216   };
 217
 218   AutofillOptions.walletIntegrationAvailableStateChanged = function(available) {
 219     AutofillOptions.getInstance().
 220         walletIntegrationAvailableStateChanged_(available);
 221   };
 222
 223   /**
 224    * @param {CreditCardData} creditCard
 225    */
 226   AutofillOptions.editCreditCard = function(creditCard) {
 227     AutofillOptions.getInstance().showEditCreditCardOverlay_(creditCard);
 228   };
 229
 230   // Export
 231   return {
 232     AutofillOptions: AutofillOptions
 233   };
 234
 235 });
 236