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