OLD | NEW |
1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 cr.define('options', function() { | 5 cr.define('options', function() { |
6 const OptionsPage = options.OptionsPage; | 6 const OptionsPage = options.OptionsPage; |
7 | 7 |
8 // The GUID of the loaded credit card. | 8 // The GUID of the loaded credit card. |
9 var guid_; | 9 var guid_; |
10 | 10 |
(...skipping 28 matching lines...) Expand all Loading... |
39 OptionsPage.prototype.initializePage.call(this); | 39 OptionsPage.prototype.initializePage.call(this); |
40 | 40 |
41 var self = this; | 41 var self = this; |
42 $('autoFillEditCreditCardCancelButton').onclick = function(event) { | 42 $('autoFillEditCreditCardCancelButton').onclick = function(event) { |
43 self.dismissOverlay_(); | 43 self.dismissOverlay_(); |
44 } | 44 } |
45 $('autoFillEditCreditCardApplyButton').onclick = function(event) { | 45 $('autoFillEditCreditCardApplyButton').onclick = function(event) { |
46 self.saveCreditCard_(); | 46 self.saveCreditCard_(); |
47 self.dismissOverlay_(); | 47 self.dismissOverlay_(); |
48 } | 48 } |
49 $('creditCardNumber').onkeydown = this.onTextInput_.bind(this); | |
50 $('creditCardNumber').addEventListener('textInput', | |
51 this.onTextInput_.bind(this)); | |
52 | 49 |
53 self.guid_ = ''; | 50 self.guid_ = ''; |
54 self.storedCCNumber_ = ''; | 51 self.storedCCNumber_ = ''; |
55 self.hasEditedNumber_ = false; | 52 self.hasEditedNumber_ = false; |
56 self.clearInputFields_(); | 53 self.clearInputFields_(); |
57 self.connectInputEvents_(); | 54 self.connectInputEvents_(); |
58 self.setDefaultSelectOptions_(); | 55 self.setDefaultSelectOptions_(); |
59 }, | 56 }, |
60 | 57 |
61 /** | 58 /** |
62 * Handles the textInput and keydown events. | |
63 * @private | |
64 */ | |
65 onTextInput_: function(event) { | |
66 // For some reason, the textInput event doesn't consider | |
67 // backspace/deletion an input event, so we have to handle those here. | |
68 // 8 - backspace | |
69 // 46 - delete | |
70 if (event.type == 'keydown' && event.keyCode != '8' && | |
71 event.keyCode != '46') | |
72 return; | |
73 | |
74 // If the user hasn't edited the text yet, delete it all on edit. | |
75 if (!this.hasEditedNumber_ && | |
76 $('creditCardNumber').value != this.storedCCNumber_) { | |
77 this.hasEditedNumber_ = true; | |
78 $('creditCardNumber').value = ''; | |
79 } | |
80 }, | |
81 | |
82 /** | |
83 * Clears any uncommitted input, and dismisses the overlay. | 59 * Clears any uncommitted input, and dismisses the overlay. |
84 * @private | 60 * @private |
85 */ | 61 */ |
86 dismissOverlay_: function() { | 62 dismissOverlay_: function() { |
87 this.clearInputFields_(); | 63 this.clearInputFields_(); |
88 this.guid_ = ''; | 64 this.guid_ = ''; |
89 this.storedCCNumber_ = ''; | 65 this.storedCCNumber_ = ''; |
90 this.hasEditedNumber_ = false; | 66 this.hasEditedNumber_ = false; |
91 OptionsPage.clearOverlays(); | 67 OptionsPage.clearOverlays(); |
92 }, | 68 }, |
(...skipping 18 matching lines...) Expand all Loading... |
111 chrome.send('setCreditCard', creditCard); | 87 chrome.send('setCreditCard', creditCard); |
112 }, | 88 }, |
113 | 89 |
114 /** | 90 /** |
115 * Connects each input field to the inputFieldChanged_() method that enables | 91 * Connects each input field to the inputFieldChanged_() method that enables |
116 * or disables the 'Ok' button based on whether all the fields are empty or | 92 * or disables the 'Ok' button based on whether all the fields are empty or |
117 * not. | 93 * not. |
118 * @private | 94 * @private |
119 */ | 95 */ |
120 connectInputEvents_: function() { | 96 connectInputEvents_: function() { |
121 var self = this; | |
122 $('nameOnCard').oninput = $('creditCardNumber').oninput = | 97 $('nameOnCard').oninput = $('creditCardNumber').oninput = |
123 $('expirationMonth').onchange = $('expirationYear').onchange = | 98 $('expirationMonth').onchange = $('expirationYear').onchange = |
124 function(event) { | 99 this.inputFieldChanged_.bind(this); |
125 self.inputFieldChanged_(); | |
126 } | |
127 }, | 100 }, |
128 | 101 |
129 /** | 102 /** |
130 * Checks the values of each of the input fields and disables the 'Ok' | 103 * Checks the values of each of the input fields and disables the 'Ok' |
131 * button if all of the fields are empty. | 104 * button if all of the fields are empty. |
| 105 * @param {Event} opt_event Optional data for the 'input' event. |
132 * @private | 106 * @private |
133 */ | 107 */ |
134 inputFieldChanged_: function() { | 108 inputFieldChanged_: function(opt_event) { |
135 var disabled = !$('nameOnCard').value && !$('creditCardNumber').value; | 109 var ccNumber = $('creditCardNumber'); |
| 110 var disabled = !$('nameOnCard').value && !ccNumber.value; |
136 $('autoFillEditCreditCardApplyButton').disabled = disabled; | 111 $('autoFillEditCreditCardApplyButton').disabled = disabled; |
| 112 |
| 113 if (opt_event && opt_event.target == ccNumber) { |
| 114 // If the user hasn't edited the text yet, delete it all on edit. |
| 115 if (!this.hasEditedNumber_ && this.storedCCNumber_.length && |
| 116 ccNumber.value != this.storedCCNumber_) { |
| 117 ccNumber.value = ''; |
| 118 } |
| 119 |
| 120 this.hasEditedNumber_ = true; |
| 121 } |
137 }, | 122 }, |
138 | 123 |
139 /** | 124 /** |
140 * Sets the default values of the options in the 'Expiration date' select | 125 * Sets the default values of the options in the 'Expiration date' select |
141 * controls. | 126 * controls. |
142 * @private | 127 * @private |
143 */ | 128 */ |
144 setDefaultSelectOptions_: function() { | 129 setDefaultSelectOptions_: function() { |
145 // Set the 'Expiration month' default options. | 130 // Set the 'Expiration month' default options. |
146 var expirationMonth = $('expirationMonth'); | 131 var expirationMonth = $('expirationMonth'); |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
235 AutoFillEditCreditCardOverlay.setTitle = function(title) { | 220 AutoFillEditCreditCardOverlay.setTitle = function(title) { |
236 $('autoFillCreditCardTitle').textContent = title; | 221 $('autoFillCreditCardTitle').textContent = title; |
237 }; | 222 }; |
238 | 223 |
239 // Export | 224 // Export |
240 return { | 225 return { |
241 AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay | 226 AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay |
242 }; | 227 }; |
243 | 228 |
244 }); | 229 }); |
OLD | NEW |