Home | History | Annotate | Download | only in options 
      1 // Copyright (c) 2011 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 OptionsPage = options.OptionsPage;
      7 
      8   // The GUID of the loaded credit card.
      9   var guid_;
     10 
     11   /**
     12    * AutofillEditCreditCardOverlay class
     13    * Encapsulated handling of the 'Add Page' overlay page.
     14    * @class
     15    */
     16   function AutofillEditCreditCardOverlay() {
     17     OptionsPage.call(this, 'autofillEditCreditCard',
     18                      templateData.autofillEditCreditCardTitle,
     19                      'autofill-edit-credit-card-overlay');
     20   }
     21 
     22   cr.addSingletonGetter(AutofillEditCreditCardOverlay);
     23 
     24   AutofillEditCreditCardOverlay.prototype = {
     25     __proto__: OptionsPage.prototype,
     26 
     27     /**
     28      * Initializes the page.
     29      */
     30     initializePage: function() {
     31       OptionsPage.prototype.initializePage.call(this);
     32 
     33       var self = this;
     34       $('autofill-edit-credit-card-cancel-button').onclick = function(event) {
     35         self.dismissOverlay_();
     36       }
     37       $('autofill-edit-credit-card-apply-button').onclick = function(event) {
     38         self.saveCreditCard_();
     39         self.dismissOverlay_();
     40       }
     41 
     42       self.guid_ = '';
     43       self.hasEditedNumber_ = false;
     44       self.clearInputFields_();
     45       self.connectInputEvents_();
     46       self.setDefaultSelectOptions_();
     47     },
     48 
     49     /**
     50      * Clears any uncommitted input, and dismisses the overlay.
     51      * @private
     52      */
     53     dismissOverlay_: function() {
     54       this.clearInputFields_();
     55       this.guid_ = '';
     56       this.hasEditedNumber_ = false;
     57       OptionsPage.closeOverlay();
     58     },
     59 
     60     /**
     61      * Aggregates the values in the input fields into an array and sends the
     62      * array to the Autofill handler.
     63      * @private
     64      */
     65     saveCreditCard_: function() {
     66       var creditCard = new Array(5);
     67       creditCard[0] = this.guid_;
     68       creditCard[1] = $('name-on-card').value;
     69       creditCard[2] = $('credit-card-number').value;
     70       creditCard[3] = $('expiration-month').value;
     71       creditCard[4] = $('expiration-year').value;
     72       chrome.send('setCreditCard', creditCard);
     73     },
     74 
     75     /**
     76      * Connects each input field to the inputFieldChanged_() method that enables
     77      * or disables the 'Ok' button based on whether all the fields are empty or
     78      * not.
     79      * @private
     80      */
     81     connectInputEvents_: function() {
     82       var ccNumber = $('credit-card-number');
     83       $('name-on-card').oninput = ccNumber.oninput =
     84           $('expiration-month').onchange = $('expiration-year').onchange =
     85               this.inputFieldChanged_.bind(this);
     86     },
     87 
     88     /**
     89      * Checks the values of each of the input fields and disables the 'Ok'
     90      * button if all of the fields are empty.
     91      * @param {Event} opt_event Optional data for the 'input' event.
     92      * @private
     93      */
     94     inputFieldChanged_: function(opt_event) {
     95       var disabled = !$('name-on-card').value && !$('credit-card-number');
     96       $('autofill-edit-credit-card-apply-button').disabled = disabled;
     97     },
     98 
     99     /**
    100      * Sets the default values of the options in the 'Expiration date' select
    101      * controls.
    102      * @private
    103      */
    104     setDefaultSelectOptions_: function() {
    105       // Set the 'Expiration month' default options.
    106       var expirationMonth = $('expiration-month');
    107       expirationMonth.options.length = 0;
    108       for (var i = 1; i <= 12; ++i) {
    109         var text;
    110         if (i < 10)
    111           text = '0' + i;
    112         else
    113           text = i;
    114 
    115         var option = document.createElement('option');
    116         option.text = text;
    117         option.value = text;
    118         expirationMonth.add(option, null);
    119       }
    120 
    121       // Set the 'Expiration year' default options.
    122       var expirationYear = $('expiration-year');
    123       expirationYear.options.length = 0;
    124 
    125       var date = new Date();
    126       var year = parseInt(date.getFullYear());
    127       for (var i = 0; i < 10; ++i) {
    128         var text = year + i;
    129         var option = document.createElement('option');
    130         option.text = text;
    131         option.value = text;
    132         expirationYear.add(option, null);
    133       }
    134     },
    135 
    136     /**
    137      * Clears the value of each input field.
    138      * @private
    139      */
    140     clearInputFields_: function() {
    141       $('name-on-card').value = '';
    142       $('credit-card-number').value = '';
    143       $('expiration-month').selectedIndex = 0;
    144       $('expiration-year').selectedIndex = 0;
    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 });
    203