// Copyright (c) 2012 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 */ var OptionsPage = options.OptionsPage; /** * AutofillEditCreditCardOverlay class * Encapsulated handling of the 'Add Page' overlay page. * @class */ function AutofillEditCreditCardOverlay() { OptionsPage.call(this, 'autofillEditCreditCard', loadTimeData.getString('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.clearInputFields_(); self.connectInputEvents_(); self.setDefaultSelectOptions_(); }, /** * Specifically catch the situations in which the overlay is cancelled * externally (e.g. by pressing ), so that the input fields and * GUID can be properly cleared. * @override */ handleCancel: function() { this.dismissOverlay_(); }, /** * Clears any uncommitted input, and dismisses the overlay. * @private */ dismissOverlay_: function() { this.clearInputFields_(); this.guid_ = ''; 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.loadCreditCard = function(creditCard) { AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard); }; AutofillEditCreditCardOverlay.setTitle = function(title) { $('autofill-credit-card-title').textContent = title; }; // Export return { AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay }; });