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 5cr.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}); 207