OLD | NEW |
| (Empty) |
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 // 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 loadTimeData.getString('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').value; | |
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 // Reset the enabled status of the 'Ok' button. | |
147 this.inputFieldChanged_(); | |
148 }, | |
149 | |
150 /** | |
151 * Sets the value of each input field according to |creditCard| | |
152 * @private | |
153 */ | |
154 setInputFields_: function(creditCard) { | |
155 $('name-on-card').value = creditCard['nameOnCard']; | |
156 $('credit-card-number').value = creditCard['creditCardNumber']; | |
157 | |
158 // The options for the year select control may be out-dated at this point, | |
159 // e.g. the user opened the options page before midnight on New Year's Eve | |
160 // and then loaded a credit card profile to edit in the new year, so | |
161 // reload the select options just to be safe. | |
162 this.setDefaultSelectOptions_(); | |
163 | |
164 var idx = parseInt(creditCard['expirationMonth'], 10); | |
165 $('expiration-month').selectedIndex = idx - 1; | |
166 | |
167 expYear = creditCard['expirationYear']; | |
168 var date = new Date(); | |
169 var year = parseInt(date.getFullYear()); | |
170 for (var i = 0; i < 10; ++i) { | |
171 var text = year + i; | |
172 if (expYear == String(text)) | |
173 $('expiration-year').selectedIndex = i; | |
174 } | |
175 }, | |
176 | |
177 /** | |
178 * Loads the credit card data from |creditCard|, sets the input fields based | |
179 * on this data and stores the GUID of the credit card. | |
180 * @private | |
181 */ | |
182 loadCreditCard_: function(creditCard) { | |
183 this.setInputFields_(creditCard); | |
184 this.inputFieldChanged_(); | |
185 this.guid_ = creditCard['guid']; | |
186 }, | |
187 }; | |
188 | |
189 AutofillEditCreditCardOverlay.clearInputFields = function(title) { | |
190 AutofillEditCreditCardOverlay.getInstance().clearInputFields_(); | |
191 }; | |
192 | |
193 AutofillEditCreditCardOverlay.loadCreditCard = function(creditCard) { | |
194 AutofillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard); | |
195 }; | |
196 | |
197 AutofillEditCreditCardOverlay.setTitle = function(title) { | |
198 $('autofill-credit-card-title').textContent = title; | |
199 }; | |
200 | |
201 // Export | |
202 return { | |
203 AutofillEditCreditCardOverlay: AutofillEditCreditCardOverlay | |
204 }; | |
205 }); | |
OLD | NEW |