| 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 |