Options2: Pull the trigger.

chrome/browser/resources/options2/autofill_edit_creditcard_overlay.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('options', function() {
+  const OptionsPage = options.OptionsPage;
+
+  // The GUID of the loaded credit card.
+  var guid_;
+
+  /**
+   * AutofillEditCreditCardOverlay class
+   * Encapsulated handling of the 'Add Page' overlay page.
+   * @class
+   */
+  function AutofillEditCreditCardOverlay() {
+    OptionsPage.call(this, 'autofillEditCreditCard',
+                     templateData.autofillEditCreditCardTitle,
+                     'autofill-edit-credit-card-overlay');
+  }
+
+  cr.addSingletonGetter(AutofillEditCreditCardOverlay);
+
+  AutofillEditCreditCardOverlay.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initializes the page.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      var self = this;
+      $('autofill-edit-credit-card-cancel-button').onclick = function(event) {
+        self.dismissOverlay_();
+      }
+      $('autofill-edit-credit-card-apply-button').onclick = function(event) {
+        self.saveCreditCard_();
+        self.dismissOverlay_();
+      }
+
+      self.guid_ = '';
+      self.hasEditedNumber_ = false;
+      self.clearInputFields_();
+      self.connectInputEvents_();
+      self.setDefaultSelectOptions_();
+    },
+
+    /**
+     * Clears any uncommitted input, and dismisses the overlay.
+     * @private
+     */
+    dismissOverlay_: function() {
+      this.clearInputFields_();
+      this.guid_ = '';
+      this.hasEditedNumber_ = false;
+      OptionsPage.closeOverlay();
+    },
+
+    /**
+     * Aggregates the values in the input fields into an array and sends the
+     * array to the Autofill handler.
+     * @private
+     */
+    saveCreditCard_: function() {
+      var creditCard = new Array(5);
+      creditCard[0] = this.guid_;
+      creditCard[1] = $('name-on-card').value;
+      creditCard[2] = $('credit-card-number').value;
+      creditCard[3] = $('expiration-month').value;
+      creditCard[4] = $('expiration-year').value;
+      chrome.send('setCreditCard', creditCard);
+    },
+
+    /**
+     * Connects each input field to the inputFieldChanged_() method that enables
+     * or disables the 'Ok' button based on whether all the fields are empty or
+     * not.
+     * @private
+     */
+    connectInputEvents_: function() {
+      var ccNumber = $('credit-card-number');
+      $('name-on-card').oninput = ccNumber.oninput =
+          $('expiration-month').onchange = $('expiration-year').onchange =
+              this.inputFieldChanged_.bind(this);
+    },
+
+    /**
+     * Checks the values of each of the input fields and disables the 'Ok'
+     * button if all of the fields are empty.
+     * @param {Event} opt_event Optional data for the 'input' event.
+     * @private
+     */
+    inputFieldChanged_: function(opt_event) {
+      var disabled = !$('name-on-card').value && !$('credit-card-number').value;
+      $('autofill-edit-credit-card-apply-button').disabled = disabled;
+    },
+
+    /**
+     * Sets the default values of the options in the 'Expiration date' select
+     * controls.
+     * @private
+     */
+    setDefaultSelectOptions_: function() {
+      // Set the 'Expiration month' default options.
+      var expirationMonth = $('expiration-month');
+      expirationMonth.options.length = 0;
+      for (var i = 1; i <= 12; ++i) {
+        var text;
+        if (i < 10)
+          text = '0' + i;
+        else
+          text = i;
+
+        var option = document.createElement('option');
+        option.text = text;
+        option.value = text;
+        expirationMonth.add(option, null);
+      }
+
+      // Set the 'Expiration year' default options.
+      var expirationYear = $('expiration-year');
+      expirationYear.options.length = 0;
+
+      var date = new Date();
+      var year = parseInt(date.getFullYear());
+      for (var i = 0; i < 10; ++i) {
+        var text = year + i;
+        var option = document.createElement('option');
+        option.text = text;
+        option.value = text;
+        expirationYear.add(option, null);
+      }
+    },
+
+    /**
+     * Clears the value of each input field.
+     * @private
+     */
+    clearInputFields_: function() {
+      $('name-on-card').value = '';
+      $('credit-card-number').value = '';
+      $('expiration-month').selectedIndex = 0;
+      $('expiration-year').selectedIndex = 0;
+
+      // Reset the enabled status of the 'Ok' button.
+      this.inputFieldChanged_();
+    },
+
+    /**
+     * Sets the value of each input field according to |creditCard|
+     * @private
+     */
+    setInputFields_: function(creditCard) {
+      $('name-on-card').value = creditCard['nameOnCard'];
+      $('credit-card-number').value = creditCard['creditCardNumber'];
+
+      // The options for the year select control may be out-dated at this point,
+      // e.g. the user opened the options page before midnight on New Year's Eve
+      // and then loaded a credit card profile to edit in the new year, so
+      // reload the select options just to be safe.
+      this.setDefaultSelectOptions_();
+
+      var idx = parseInt(creditCard['expirationMonth'], 10);
+      $('expiration-month').selectedIndex = idx - 1;
+
+      expYear = creditCard['expirationYear'];
+      var date = new Date();
+      var year = parseInt(date.getFullYear());
+      for (var i = 0; i < 10; ++i) {
+        var text = year + i;
+        if (expYear == String(text))
+          $('expiration-year').selectedIndex = i;
+      }
+    },
+
+    /**
+     * Loads the credit card data from |creditCard|, sets the input fields based
+     * on this data and stores the GUID of the credit card.
+     * @private
+     */
+    loadCreditCard_: function(creditCard) {
+      this.setInputFields_(creditCard);
+      this.inputFieldChanged_();
+      this.guid_ = creditCard['guid'];
+    },
+  };
+
+  AutofillEditCreditCardOverlay.clearInputFields = function(title) {
+    AutofillEditCreditCardOverlay.getInstance().clearInputFields_();
+  };
+
+  AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
+    AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
+  };
+
+  AutofillEditCreditCardOverlay.setTitle = function(title) {
+    $('autofill-credit-card-title').textContent = title;
+  };
+
+  // Export
+  return {
+    AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay
+  };
+});