chrome/browser/resources/options/autofill_options_list.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  *   guid: string,
   8  *   label: string,
   9  *   sublabel: string,
  10  *   isLocal: boolean,
  11  *   isCached: boolean
  12  * }}
  13  * @see chrome/browser/ui/webui/options/autofill_options_handler.cc
  14  */
  15 var AutofillEntityMetadata;
  16
  17 cr.define('options.autofillOptions', function() {
  18   /** @const */ var DeletableItem = options.DeletableItem;
  19   /** @const */ var DeletableItemList = options.DeletableItemList;
  20   /** @const */ var InlineEditableItem = options.InlineEditableItem;
  21   /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
  22
  23   /**
  24    * @return {!HTMLButtonElement}
  25    */
  26   function AutofillEditProfileButton(edit) {
  27     var editButtonEl = /** @type {HTMLButtonElement} */(
  28         document.createElement('button'));
  29     editButtonEl.className =
  30         'list-inline-button hide-until-hover custom-appearance';
  31     editButtonEl.textContent =
  32         loadTimeData.getString('autofillEditProfileButton');
  33     editButtonEl.onclick = edit;
  34
  35     editButtonEl.onmousedown = function(e) {
  36       // Don't select the row when clicking the button.
  37       e.stopPropagation();
  38       // Don't focus on the button when clicking it.
  39       e.preventDefault();
  40     };
  41
  42     return editButtonEl;
  43   }
  44
  45   /** @return {!Element} */
  46   function CreateGoogleAccountLabel() {
  47     var label = document.createElement('div');
  48     label.className = 'deemphasized hides-on-hover';
  49     label.textContent = loadTimeData.getString('autofillFromGoogleAccount');
  50     return label;
  51   }
  52
  53   /**
  54    * Creates a new address list item.
  55    * @constructor
  56    * @param {AutofillEntityMetadata} metadata Details about an address profile.
  57    * @extends {options.DeletableItem}
  58    * @see chrome/browser/ui/webui/options/autofill_options_handler.cc
  59    */
  60   function AddressListItem(metadata) {
  61     var el = cr.doc.createElement('div');
  62     el.__proto__ = AddressListItem.prototype;
  63     /** @private */
  64     el.metadata_ = metadata;
  65     el.decorate();
  66
  67     return el;
  68   }
  69
  70   AddressListItem.prototype = {
  71     __proto__: DeletableItem.prototype,
  72
  73     /** @override */
  74     decorate: function() {
  75       DeletableItem.prototype.decorate.call(this);
  76
  77       var label = this.ownerDocument.createElement('div');
  78       label.className = 'autofill-list-item';
  79       label.textContent = this.metadata_.label;
  80       this.contentElement.appendChild(label);
  81
  82       var sublabel = this.ownerDocument.createElement('div');
  83       sublabel.className = 'deemphasized';
  84       sublabel.textContent = this.metadata_.sublabel;
  85       this.contentElement.appendChild(sublabel);
  86
  87       if (!this.metadata_.isLocal) {
  88         this.deletable = false;
  89         this.contentElement.appendChild(CreateGoogleAccountLabel());
  90       }
  91
  92       // The 'Edit' button.
  93       var metadata = this.metadata_;
  94       var editButtonEl = AutofillEditProfileButton(
  95           AddressListItem.prototype.loadAddressEditor.bind(this));
  96       this.contentElement.appendChild(editButtonEl);
  97     },
  98
  99     /**
 100      * For local Autofill data, this function causes the AutofillOptionsHandler
 101      * to call showEditAddressOverlay(). For Wallet data, the user is
 102      * redirected to the Wallet web interface.
 103      */
 104     loadAddressEditor: function() {
 105       if (this.metadata_.isLocal)
 106         chrome.send('loadAddressEditor', [this.metadata_.guid]);
 107       else
 108         window.open(loadTimeData.getString('manageWalletAddressesUrl'));
 109     },
 110   };
 111
 112   /**
 113    * Creates a new credit card list item.
 114    * @param {AutofillEntityMetadata} metadata Details about a credit card.
 115    * @constructor
 116    * @extends {options.DeletableItem}
 117    */
 118   function CreditCardListItem(metadata) {
 119     var el = cr.doc.createElement('div');
 120     el.__proto__ = CreditCardListItem.prototype;
 121     /** @private */
 122     el.metadata_ = metadata;
 123     el.decorate();
 124
 125     return el;
 126   }
 127
 128   CreditCardListItem.prototype = {
 129     __proto__: DeletableItem.prototype,
 130
 131     /** @override */
 132     decorate: function() {
 133       DeletableItem.prototype.decorate.call(this);
 134
 135       var label = this.ownerDocument.createElement('div');
 136       label.className = 'autofill-list-item';
 137       label.textContent = this.metadata_.label;
 138       this.contentElement.appendChild(label);
 139
 140       var sublabel = this.ownerDocument.createElement('div');
 141       sublabel.className = 'deemphasized';
 142       sublabel.textContent = this.metadata_.sublabel;
 143       this.contentElement.appendChild(sublabel);
 144
 145       if (!this.metadata_.isLocal) {
 146         this.deletable = false;
 147         this.contentElement.appendChild(CreateGoogleAccountLabel());
 148       }
 149
 150       var guid = this.metadata_.guid;
 151       if (this.metadata_.isCached) {
 152         var localCopyText = this.ownerDocument.createElement('span');
 153         localCopyText.className = 'hide-until-hover deemphasized';
 154         localCopyText.textContent =
 155             loadTimeData.getString('autofillDescribeLocalCopy');
 156         this.contentElement.appendChild(localCopyText);
 157
 158         var clearLocalCopyButton = AutofillEditProfileButton(
 159             function() { chrome.send('clearLocalCardCopy', [guid]); });
 160         clearLocalCopyButton.textContent =
 161             loadTimeData.getString('autofillClearLocalCopyButton');
 162         this.contentElement.appendChild(clearLocalCopyButton);
 163       }
 164
 165       // The 'Edit' button.
 166       var metadata = this.metadata_;
 167       var editButtonEl = AutofillEditProfileButton(
 168           CreditCardListItem.prototype.loadCreditCardEditor.bind(this));
 169       this.contentElement.appendChild(editButtonEl);
 170     },
 171
 172     /**
 173      * For local Autofill data, this function causes the AutofillOptionsHandler
 174      * to call showEditCreditCardOverlay(). For Wallet data, the user is
 175      * redirected to the Wallet web interface.
 176      */
 177     loadCreditCardEditor: function() {
 178       if (this.metadata_.isLocal)
 179         chrome.send('loadCreditCardEditor', [this.metadata_.guid]);
 180       else
 181         window.open(loadTimeData.getString('manageWalletPaymentMethodsUrl'));
 182     },
 183   };
 184
 185   /**
 186    * Base class for shared implementation between address and credit card lists.
 187    * @constructor
 188    * @extends {options.DeletableItemList}
 189    */
 190   var AutofillProfileList = cr.ui.define('list');
 191
 192   AutofillProfileList.prototype = {
 193     __proto__: DeletableItemList.prototype,
 194
 195     decorate: function() {
 196       DeletableItemList.prototype.decorate.call(this);
 197
 198       this.addEventListener('blur', this.onBlur_);
 199     },
 200
 201     /**
 202      * When the list loses focus, unselect all items in the list.
 203      * @private
 204      */
 205     onBlur_: function() {
 206       this.selectionModel.unselectAll();
 207     },
 208   };
 209
 210   /**
 211    * Create a new address list.
 212    * @constructor
 213    * @extends {options.autofillOptions.AutofillProfileList}
 214    */
 215   var AutofillAddressList = cr.ui.define('list');
 216
 217   AutofillAddressList.prototype = {
 218     __proto__: AutofillProfileList.prototype,
 219
 220     decorate: function() {
 221       AutofillProfileList.prototype.decorate.call(this);
 222     },
 223
 224     /** @override */
 225     activateItemAtIndex: function(index) {
 226       this.getListItemByIndex(index).loadAddressEditor();
 227     },
 228
 229     /**
 230      * @override
 231      * @param {AutofillEntityMetadata} metadata
 232      */
 233     createItem: function(metadata) {
 234       return new AddressListItem(metadata);
 235     },
 236
 237     /** @override */
 238     deleteItemAtIndex: function(index) {
 239       AutofillOptions.removeData(this.dataModel.item(index).guid,
 240                                  'Options_AutofillAddressDeleted');
 241     },
 242   };
 243
 244   /**
 245    * Create a new credit card list.
 246    * @constructor
 247    * @extends {options.DeletableItemList}
 248    */
 249   var AutofillCreditCardList = cr.ui.define('list');
 250
 251   AutofillCreditCardList.prototype = {
 252     __proto__: AutofillProfileList.prototype,
 253
 254     decorate: function() {
 255       AutofillProfileList.prototype.decorate.call(this);
 256     },
 257
 258     /** @override */
 259     activateItemAtIndex: function(index) {
 260       this.getListItemByIndex(index).loadCreditCardEditor();
 261     },
 262
 263     /**
 264      * @override
 265      * @param {AutofillEntityMetadata} metadata
 266      */
 267     createItem: function(metadata) {
 268       return new CreditCardListItem(metadata);
 269     },
 270
 271     /** @override */
 272     deleteItemAtIndex: function(index) {
 273       AutofillOptions.removeData(this.dataModel.item(index).guid,
 274                                  'Options_AutofillCreditCardDeleted');
 275     },
 276   };
 277
 278   return {
 279     AutofillProfileList: AutofillProfileList,
 280     AddressListItem: AddressListItem,
 281     CreditCardListItem: CreditCardListItem,
 282     AutofillAddressList: AutofillAddressList,
 283     AutofillCreditCardList: AutofillCreditCardList,
 284   };
 285 });