| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 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.autofillOptions', function() { | 5 cr.define('options.autofillOptions', function() { |
| 6 /** @const */ var DeletableItem = options.DeletableItem; | 6 /** @const */ var DeletableItem = options.DeletableItem; |
| 7 /** @const */ var DeletableItemList = options.DeletableItemList; | 7 /** @const */ var DeletableItemList = options.DeletableItemList; |
| 8 /** @const */ var InlineEditableItem = options.InlineEditableItem; | 8 /** @const */ var InlineEditableItem = options.InlineEditableItem; |
| 9 /** @const */ var InlineEditableItemList = options.InlineEditableItemList; | 9 /** @const */ var InlineEditableItemList = options.InlineEditableItemList; |
| 10 | 10 |
| 11 /** | 11 /** |
| 12 * @return {!HTMLButtonElement} | 12 * @return {!HTMLButtonElement} |
| 13 */ | 13 */ |
| 14 function AutofillEditProfileButton(guid, edit) { | 14 function AutofillEditProfileButton(guid, edit) { |
| 15 var editButtonEl = document.createElement('button'); | 15 var editButtonEl = /** @type {HTMLButtonElement} */( |
| 16 document.createElement('button')); |
| 16 editButtonEl.className = 'list-inline-button custom-appearance'; | 17 editButtonEl.className = 'list-inline-button custom-appearance'; |
| 17 editButtonEl.textContent = | 18 editButtonEl.textContent = |
| 18 loadTimeData.getString('autofillEditProfileButton'); | 19 loadTimeData.getString('autofillEditProfileButton'); |
| 19 editButtonEl.onclick = function(e) { edit(guid); }; | 20 editButtonEl.onclick = function(e) { edit(guid); }; |
| 20 | 21 |
| 21 editButtonEl.onmousedown = function(e) { | 22 editButtonEl.onmousedown = function(e) { |
| 22 // Don't select the row when clicking the button. | 23 // Don't select the row when clicking the button. |
| 23 e.stopPropagation(); | 24 e.stopPropagation(); |
| 24 // Don't focus on the button when clicking it. | 25 // Don't focus on the button when clicking it. |
| 25 e.preventDefault(); | 26 e.preventDefault(); |
| (...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 105 // The 'Edit' button. | 106 // The 'Edit' button. |
| 106 var editButtonEl = AutofillEditProfileButton( | 107 var editButtonEl = AutofillEditProfileButton( |
| 107 this.guid, | 108 this.guid, |
| 108 AutofillOptions.loadCreditCardEditor); | 109 AutofillOptions.loadCreditCardEditor); |
| 109 this.contentElement.appendChild(editButtonEl); | 110 this.contentElement.appendChild(editButtonEl); |
| 110 }, | 111 }, |
| 111 }; | 112 }; |
| 112 | 113 |
| 113 /** | 114 /** |
| 114 * Creates a new value list item. | 115 * Creates a new value list item. |
| 115 * @param {AutofillValuesList} list The parent list of this item. | 116 * @param {options.autofillOptions.AutofillValuesList} list The parent list of |
| 117 * this item. |
| 116 * @param {string} entry A string value. | 118 * @param {string} entry A string value. |
| 117 * @constructor | 119 * @constructor |
| 118 * @extends {options.InlineEditableItem} | 120 * @extends {options.InlineEditableItem} |
| 119 */ | 121 */ |
| 120 function ValuesListItem(list, entry) { | 122 function ValuesListItem(list, entry) { |
| 121 var el = cr.doc.createElement('div'); | 123 var el = cr.doc.createElement('div'); |
| 122 el.list = list; | 124 el.list = list; |
| 123 el.value = entry ? entry : ''; | 125 el.value = entry ? entry : ''; |
| 124 el.__proto__ = ValuesListItem.prototype; | 126 el.__proto__ = ValuesListItem.prototype; |
| 125 el.decorate(); | 127 el.decorate(); |
| 126 | 128 |
| 127 return el; | 129 return el; |
| 128 } | 130 } |
| 129 | 131 |
| 130 ValuesListItem.prototype = { | 132 ValuesListItem.prototype = { |
| 131 __proto__: InlineEditableItem.prototype, | 133 __proto__: InlineEditableItem.prototype, |
| 132 | 134 |
| 133 /** @override */ | 135 /** @override */ |
| 134 decorate: function() { | 136 decorate: function() { |
| 135 InlineEditableItem.prototype.decorate.call(this); | 137 InlineEditableItem.prototype.decorate.call(this); |
| 136 | 138 |
| 137 // Note: This must be set prior to calling |createEditableTextCell|. | 139 // Note: This must be set prior to calling |createEditableTextCell|. |
| 138 this.isPlaceholder = !this.value; | 140 this.isPlaceholder = !this.value; |
| 139 | 141 |
| 140 // The stored value. | 142 // The stored value. |
| 141 var cell = this.createEditableTextCell(this.value); | 143 var cell = this.createEditableTextCell(String(this.value)); |
| 142 this.contentElement.appendChild(cell); | 144 this.contentElement.appendChild(cell); |
| 143 this.input = cell.querySelector('input'); | 145 this.input = cell.querySelector('input'); |
| 144 | 146 |
| 145 if (this.isPlaceholder) { | 147 if (this.isPlaceholder) { |
| 146 this.input.placeholder = this.list.getAttribute('placeholder'); | 148 this.input.placeholder = this.list.getAttribute('placeholder'); |
| 147 this.deletable = false; | 149 this.deletable = false; |
| 148 } | 150 } |
| 149 | 151 |
| 150 this.addEventListener('commitedit', this.onEditCommitted_); | 152 this.addEventListener('commitedit', this.onEditCommitted_); |
| 151 }, | 153 }, |
| 152 | 154 |
| 153 /** | 155 /** |
| 154 * @return {string} This item's value. | 156 * @return {Array} This item's value. |
| 155 * @protected | 157 * @protected |
| 156 */ | 158 */ |
| 157 value_: function() { | 159 value_: function() { |
| 158 return this.input.value; | 160 return this.input.value; |
| 159 }, | 161 }, |
| 160 | 162 |
| 161 /** | 163 /** |
| 162 * @param {Object} value The value to test. | 164 * @param {*} value The value to test. |
| 163 * @return {boolean} True if the given value is non-empty. | 165 * @return {boolean} True if the given value is non-empty. |
| 164 * @protected | 166 * @protected |
| 165 */ | 167 */ |
| 166 valueIsNonEmpty_: function(value) { | 168 valueIsNonEmpty_: function(value) { |
| 167 return !!value; | 169 return !!value; |
| 168 }, | 170 }, |
| 169 | 171 |
| 170 /** | 172 /** |
| 171 * @return {boolean} True if value1 is logically equal to value2. | 173 * @return {boolean} True if value1 is logically equal to value2. |
| 172 */ | 174 */ |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 219 } | 221 } |
| 220 }, | 222 }, |
| 221 }; | 223 }; |
| 222 | 224 |
| 223 /** | 225 /** |
| 224 * Creates a new name value list item. | 226 * Creates a new name value list item. |
| 225 * @param {options.autofillOptions.AutofillNameValuesList} list The parent | 227 * @param {options.autofillOptions.AutofillNameValuesList} list The parent |
| 226 * list of this item. | 228 * list of this item. |
| 227 * @param {Array.<string>} entry An array of [first, middle, last] names. | 229 * @param {Array.<string>} entry An array of [first, middle, last] names. |
| 228 * @constructor | 230 * @constructor |
| 229 * @extends {options.ValuesListItem} | 231 * @extends {options.autofillOptions.ValuesListItem} |
| 230 */ | 232 */ |
| 231 function NameListItem(list, entry) { | 233 function NameListItem(list, entry) { |
| 232 var el = cr.doc.createElement('div'); | 234 var el = cr.doc.createElement('div'); |
| 233 el.list = list; | 235 el.list = list; |
| 234 el.first = entry ? entry[0] : ''; | 236 el.first = entry ? entry[0] : ''; |
| 235 el.middle = entry ? entry[1] : ''; | 237 el.middle = entry ? entry[1] : ''; |
| 236 el.last = entry ? entry[2] : ''; | 238 el.last = entry ? entry[2] : ''; |
| 237 el.__proto__ = NameListItem.prototype; | 239 el.__proto__ = NameListItem.prototype; |
| 238 el.decorate(); | 240 el.decorate(); |
| 239 | 241 |
| (...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 331 * @private | 333 * @private |
| 332 */ | 334 */ |
| 333 onBlur_: function() { | 335 onBlur_: function() { |
| 334 this.selectionModel.unselectAll(); | 336 this.selectionModel.unselectAll(); |
| 335 }, | 337 }, |
| 336 }; | 338 }; |
| 337 | 339 |
| 338 /** | 340 /** |
| 339 * Create a new address list. | 341 * Create a new address list. |
| 340 * @constructor | 342 * @constructor |
| 341 * @extends {options.AutofillProfileList} | 343 * @extends {options.autofillOptions.AutofillProfileList} |
| 342 */ | 344 */ |
| 343 var AutofillAddressList = cr.ui.define('list'); | 345 var AutofillAddressList = cr.ui.define('list'); |
| 344 | 346 |
| 345 AutofillAddressList.prototype = { | 347 AutofillAddressList.prototype = { |
| 346 __proto__: AutofillProfileList.prototype, | 348 __proto__: AutofillProfileList.prototype, |
| 347 | 349 |
| 348 decorate: function() { | 350 decorate: function() { |
| 349 AutofillProfileList.prototype.decorate.call(this); | 351 AutofillProfileList.prototype.decorate.call(this); |
| 350 }, | 352 }, |
| 351 | 353 |
| 352 /** @override */ | 354 /** @override */ |
| 353 activateItemAtIndex: function(index) { | 355 activateItemAtIndex: function(index) { |
| 354 AutofillOptions.loadAddressEditor(this.dataModel.item(index)[0]); | 356 AutofillOptions.loadAddressEditor(this.dataModel.item(index)[0]); |
| 355 }, | 357 }, |
| 356 | 358 |
| 357 /** @override */ | 359 /** @override */ |
| 358 createItem: function(entry) { | 360 createItem: function(entry) { |
| 359 return new AddressListItem(entry); | 361 return new AddressListItem(/** @type {Array} */(entry)); |
| 360 }, | 362 }, |
| 361 | 363 |
| 362 /** @override */ | 364 /** @override */ |
| 363 deleteItemAtIndex: function(index) { | 365 deleteItemAtIndex: function(index) { |
| 364 AutofillOptions.removeData(this.dataModel.item(index)[0]); | 366 AutofillOptions.removeData(this.dataModel.item(index)[0]); |
| 365 }, | 367 }, |
| 366 }; | 368 }; |
| 367 | 369 |
| 368 /** | 370 /** |
| 369 * Create a new credit card list. | 371 * Create a new credit card list. |
| 370 * @constructor | 372 * @constructor |
| 371 * @extends {options.DeletableItemList} | 373 * @extends {options.DeletableItemList} |
| 372 */ | 374 */ |
| 373 var AutofillCreditCardList = cr.ui.define('list'); | 375 var AutofillCreditCardList = cr.ui.define('list'); |
| 374 | 376 |
| 375 AutofillCreditCardList.prototype = { | 377 AutofillCreditCardList.prototype = { |
| 376 __proto__: AutofillProfileList.prototype, | 378 __proto__: AutofillProfileList.prototype, |
| 377 | 379 |
| 378 decorate: function() { | 380 decorate: function() { |
| 379 AutofillProfileList.prototype.decorate.call(this); | 381 AutofillProfileList.prototype.decorate.call(this); |
| 380 }, | 382 }, |
| 381 | 383 |
| 382 /** @override */ | 384 /** @override */ |
| 383 activateItemAtIndex: function(index) { | 385 activateItemAtIndex: function(index) { |
| 384 AutofillOptions.loadCreditCardEditor(this.dataModel.item(index)[0]); | 386 AutofillOptions.loadCreditCardEditor(this.dataModel.item(index)[0]); |
| 385 }, | 387 }, |
| 386 | 388 |
| 387 /** @override */ | 389 /** @override */ |
| 388 createItem: function(entry) { | 390 createItem: function(entry) { |
| 389 return new CreditCardListItem(entry); | 391 return new CreditCardListItem(/** @type {Array} */(entry)); |
| 390 }, | 392 }, |
| 391 | 393 |
| 392 /** @override */ | 394 /** @override */ |
| 393 deleteItemAtIndex: function(index) { | 395 deleteItemAtIndex: function(index) { |
| 394 AutofillOptions.removeData(this.dataModel.item(index)[0]); | 396 AutofillOptions.removeData(this.dataModel.item(index)[0]); |
| 395 }, | 397 }, |
| 396 }; | 398 }; |
| 397 | 399 |
| 398 /** | 400 /** |
| 399 * Create a new value list. | 401 * Create a new value list. |
| 400 * @constructor | 402 * @constructor |
| 401 * @extends {options.InlineEditableItemList} | 403 * @extends {options.InlineEditableItemList} |
| 402 */ | 404 */ |
| 403 var AutofillValuesList = cr.ui.define('list'); | 405 var AutofillValuesList = cr.ui.define('list'); |
| 404 | 406 |
| 405 AutofillValuesList.prototype = { | 407 AutofillValuesList.prototype = { |
| 406 __proto__: InlineEditableItemList.prototype, | 408 __proto__: InlineEditableItemList.prototype, |
| 407 | 409 |
| 408 /** @override */ | 410 /** @override */ |
| 409 createItem: function(entry) { | 411 createItem: function(entry) { |
| 410 return new ValuesListItem(this, entry); | 412 return new ValuesListItem(this, /** @type {string} */(entry)); |
| 411 }, | 413 }, |
| 412 | 414 |
| 413 /** @override */ | 415 /** @override */ |
| 414 deleteItemAtIndex: function(index) { | 416 deleteItemAtIndex: function(index) { |
| 415 this.dataModel.splice(index, 1); | 417 this.dataModel.splice(index, 1); |
| 416 }, | 418 }, |
| 417 | 419 |
| 418 /** @override */ | 420 /** @override */ |
| 419 shouldFocusPlaceholder: function() { | 421 shouldFocusPlaceholder: function() { |
| 420 return false; | 422 return false; |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 456 * @param {string} value The value of the item to insert. | 458 * @param {string} value The value of the item to insert. |
| 457 */ | 459 */ |
| 458 validateAndSave: function(index, remove, value) { | 460 validateAndSave: function(index, remove, value) { |
| 459 this.dataModel.splice(index, remove, value); | 461 this.dataModel.splice(index, remove, value); |
| 460 }, | 462 }, |
| 461 }; | 463 }; |
| 462 | 464 |
| 463 /** | 465 /** |
| 464 * Create a new value list for phone number validation. | 466 * Create a new value list for phone number validation. |
| 465 * @constructor | 467 * @constructor |
| 466 * @extends {options.AutofillValuesList} | 468 * @extends {options.autofillOptions.AutofillValuesList} |
| 467 */ | 469 */ |
| 468 var AutofillNameValuesList = cr.ui.define('list'); | 470 var AutofillNameValuesList = cr.ui.define('list'); |
| 469 | 471 |
| 470 AutofillNameValuesList.prototype = { | 472 AutofillNameValuesList.prototype = { |
| 471 __proto__: AutofillValuesList.prototype, | 473 __proto__: AutofillValuesList.prototype, |
| 472 | 474 |
| 473 /** @override */ | 475 /** @override */ |
| 474 createItem: function(entry) { | 476 createItem: function(entry) { |
| 475 return new NameListItem(this, entry); | 477 return new NameListItem(this, /** @type {Array.<string>} */(entry)); |
| 476 }, | 478 }, |
| 477 }; | 479 }; |
| 478 | 480 |
| 479 /** | 481 /** |
| 480 * Create a new value list for phone number validation. | 482 * Create a new value list for phone number validation. |
| 481 * @constructor | 483 * @constructor |
| 482 * @extends {options.AutofillValuesList} | 484 * @extends {options.autofillOptions.AutofillValuesList} |
| 483 */ | 485 */ |
| 484 var AutofillPhoneValuesList = cr.ui.define('list'); | 486 var AutofillPhoneValuesList = cr.ui.define('list'); |
| 485 | 487 |
| 486 AutofillPhoneValuesList.prototype = { | 488 AutofillPhoneValuesList.prototype = { |
| 487 __proto__: AutofillValuesList.prototype, | 489 __proto__: AutofillValuesList.prototype, |
| 488 | 490 |
| 489 /** @override */ | 491 /** @override */ |
| 490 validateAndSave: function(index, remove, value) { | 492 validateAndSave: function(index, remove, value) { |
| 491 var numbers = this.dataModel.slice(0, this.dataModel.length - 1); | 493 var numbers = this.dataModel.slice(0, this.dataModel.length - 1); |
| 492 numbers.splice(index, remove, value); | 494 numbers.splice(index, remove, value); |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 535 doneValidating: function() { | 537 doneValidating: function() { |
| 536 if (this.validationRequests_ <= 0) | 538 if (this.validationRequests_ <= 0) |
| 537 return Promise.resolve(); | 539 return Promise.resolve(); |
| 538 return new Promise(function(resolve) { | 540 return new Promise(function(resolve) { |
| 539 this.validationPromiseResolvers_.push(resolve); | 541 this.validationPromiseResolvers_.push(resolve); |
| 540 }.bind(this)); | 542 }.bind(this)); |
| 541 } | 543 } |
| 542 }; | 544 }; |
| 543 | 545 |
| 544 return { | 546 return { |
| 547 AutofillProfileList: AutofillProfileList, |
| 545 AddressListItem: AddressListItem, | 548 AddressListItem: AddressListItem, |
| 546 CreditCardListItem: CreditCardListItem, | 549 CreditCardListItem: CreditCardListItem, |
| 547 ValuesListItem: ValuesListItem, | 550 ValuesListItem: ValuesListItem, |
| 548 NameListItem: NameListItem, | 551 NameListItem: NameListItem, |
| 549 AutofillAddressList: AutofillAddressList, | 552 AutofillAddressList: AutofillAddressList, |
| 550 AutofillCreditCardList: AutofillCreditCardList, | 553 AutofillCreditCardList: AutofillCreditCardList, |
| 551 AutofillValuesList: AutofillValuesList, | 554 AutofillValuesList: AutofillValuesList, |
| 552 AutofillNameValuesList: AutofillNameValuesList, | 555 AutofillNameValuesList: AutofillNameValuesList, |
| 553 AutofillPhoneValuesList: AutofillPhoneValuesList, | 556 AutofillPhoneValuesList: AutofillPhoneValuesList, |
| 554 }; | 557 }; |
| 555 }); | 558 }); |
| OLD | NEW |