chrome/browser/resources/options/autofill_edit_creditcard_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
   8   /**
   9    * AutofillEditCreditCardOverlay class
  10    * Encapsulated handling of the 'Add Page' overlay page.
  11    * @class
  12    */
  13   function AutofillEditCreditCardOverlay() {
  14     OptionsPage.call(this, 'autofillEditCreditCard',
  15                      loadTimeData.getString('autofillEditCreditCardTitle'),
  16                      'autofill-edit-credit-card-overlay');
  17   }
  18
  19   cr.addSingletonGetter(AutofillEditCreditCardOverlay);
  20
  21   AutofillEditCreditCardOverlay.prototype = {
  22     __proto__: OptionsPage.prototype,
  23
  24     /**
  25      * Initializes the page.
  26      */
  27     initializePage: function() {
  28       OptionsPage.prototype.initializePage.call(this);
  29
  30       var self = this;
  31       $('autofill-edit-credit-card-cancel-button').onclick = function(event) {
  32         self.dismissOverlay_();
  33       };
  34       $('autofill-edit-credit-card-apply-button').onclick = function(event) {
  35         self.saveCreditCard_();
  36         self.dismissOverlay_();
  37       };
  38
  39       self.guid_ = '';
  40       self.clearInputFields_();
  41       self.connectInputEvents_();
  42       self.setDefaultSelectOptions_();
  43     },
  44
  45     /**
  46     * Specifically catch the situations in which the overlay is cancelled
  47     * externally (e.g. by pressing <Esc>), so that the input fields and
  48     * GUID can be properly cleared.
  49     * @override
  50     */
  51     handleCancel: function() {
  52       this.dismissOverlay_();
  53     },
  54
  55     /**
  56      * Clears any uncommitted input, and dismisses the overlay.
  57      * @private
  58      */
  59     dismissOverlay_: function() {
  60       this.clearInputFields_();
  61       this.guid_ = '';
  62       OptionsPage.closeOverlay();
  63     },
  64
  65     /**
  66      * Aggregates the values in the input fields into an array and sends the
  67      * array to the Autofill handler.
  68      * @private
  69      */
  70     saveCreditCard_: function() {
  71       var creditCard = new Array(5);
  72       creditCard[0] = this.guid_;
  73       creditCard[1] = $('name-on-card').value;
  74       creditCard[2] = $('credit-card-number').value;
  75       creditCard[3] = $('expiration-month').value;
  76       creditCard[4] = $('expiration-year').value;
  77       chrome.send('setCreditCard', creditCard);
  78     },
  79
  80     /**
  81      * Connects each input field to the inputFieldChanged_() method that enables
  82      * or disables the 'Ok' button based on whether all the fields are empty or
  83      * not.
  84      * @private
  85      */
  86     connectInputEvents_: function() {
  87       var ccNumber = $('credit-card-number');
  88       $('name-on-card').oninput = ccNumber.oninput =
  89           $('expiration-month').onchange = $('expiration-year').onchange =
  90               this.inputFieldChanged_.bind(this);
  91     },
  92
  93     /**
  94      * Checks the values of each of the input fields and disables the 'Ok'
  95      * button if all of the fields are empty.
  96      * @param {Event} opt_event Optional data for the 'input' event.
  97      * @private
  98      */
  99     inputFieldChanged_: function(opt_event) {
 100       var disabled = !$('name-on-card').value && !$('credit-card-number').value;
 101       $('autofill-edit-credit-card-apply-button').disabled = disabled;
 102     },
 103
 104     /**
 105      * Sets the default values of the options in the 'Expiration date' select
 106      * controls.
 107      * @private
 108      */
 109     setDefaultSelectOptions_: function() {
 110       // Set the 'Expiration month' default options.
 111       var expirationMonth = $('expiration-month');
 112       expirationMonth.options.length = 0;
 113       for (var i = 1; i <= 12; ++i) {
 114         var text;
 115         if (i < 10)
 116           text = '0' + i;
 117         else
 118           text = i;
 119
 120         var option = document.createElement('option');
 121         option.text = text;
 122         option.value = text;
 123         expirationMonth.add(option, null);
 124       }
 125
 126       // Set the 'Expiration year' default options.
 127       var expirationYear = $('expiration-year');
 128       expirationYear.options.length = 0;
 129
 130       var date = new Date();
 131       var year = parseInt(date.getFullYear());
 132       for (var i = 0; i < 10; ++i) {
 133         var text = year + i;
 134         var option = document.createElement('option');
 135         option.text = text;
 136         option.value = text;
 137         expirationYear.add(option, null);
 138       }
 139     },
 140
 141     /**
 142      * Clears the value of each input field.
 143      * @private
 144      */
 145     clearInputFields_: function() {
 146       $('name-on-card').value = '';
 147       $('credit-card-number').value = '';
 148       $('expiration-month').selectedIndex = 0;
 149       $('expiration-year').selectedIndex = 0;
 150
 151       // Reset the enabled status of the 'Ok' button.
 152       this.inputFieldChanged_();
 153     },
 154
 155     /**
 156      * Sets the value of each input field according to |creditCard|
 157      * @private
 158      */
 159     setInputFields_: function(creditCard) {
 160       $('name-on-card').value = creditCard.nameOnCard;
 161       $('credit-card-number').value = creditCard.creditCardNumber;
 162
 163       // The options for the year select control may be out-dated at this point,
 164       // e.g. the user opened the options page before midnight on New Year's Eve
 165       // and then loaded a credit card profile to edit in the new year, so
 166       // reload the select options just to be safe.
 167       this.setDefaultSelectOptions_();
 168
 169       var idx = parseInt(creditCard.expirationMonth, 10);
 170       $('expiration-month').selectedIndex = idx - 1;
 171
 172       expYear = creditCard.expirationYear;
 173       var date = new Date();
 174       var year = parseInt(date.getFullYear());
 175       for (var i = 0; i < 10; ++i) {
 176         var text = year + i;
 177         if (expYear == String(text))
 178           $('expiration-year').selectedIndex = i;
 179       }
 180     },
 181
 182     /**
 183      * Loads the credit card data from |creditCard|, sets the input fields based
 184      * on this data and stores the GUID of the credit card.
 185      * @private
 186      */
 187     loadCreditCard_: function(creditCard) {
 188       this.setInputFields_(creditCard);
 189       this.inputFieldChanged_();
 190       this.guid_ = creditCard.guid;
 191     },
 192   };
 193
 194   AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
 195     AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
 196   };
 197
 198   AutofillEditCreditCardOverlay.setTitle = function(title) {
 199     $('autofill-credit-card-title').textContent = title;
 200   };
 201
 202   // Export
 203   return {
 204     AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay
 205   };
 206 });