| 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 /** |
| 360 * @override |
| 361 * @param {Array} entry |
| 362 */ |
| 358 createItem: function(entry) { | 363 createItem: function(entry) { |
| 359 return new AddressListItem(entry); | 364 return new AddressListItem(entry); |
| 360 }, | 365 }, |
| 361 | 366 |
| 362 /** @override */ | 367 /** @override */ |
| 363 deleteItemAtIndex: function(index) { | 368 deleteItemAtIndex: function(index) { |
| 364 AutofillOptions.removeData(this.dataModel.item(index)[0]); | 369 AutofillOptions.removeData(this.dataModel.item(index)[0]); |
| 365 }, | 370 }, |
| 366 }; | 371 }; |
| 367 | 372 |
| 368 /** | 373 /** |
| 369 * Create a new credit card list. | 374 * Create a new credit card list. |
| 370 * @constructor | 375 * @constructor |
| 371 * @extends {options.DeletableItemList} | 376 * @extends {options.DeletableItemList} |
| 372 */ | 377 */ |
| 373 var AutofillCreditCardList = cr.ui.define('list'); | 378 var AutofillCreditCardList = cr.ui.define('list'); |
| 374 | 379 |
| 375 AutofillCreditCardList.prototype = { | 380 AutofillCreditCardList.prototype = { |
| 376 __proto__: AutofillProfileList.prototype, | 381 __proto__: AutofillProfileList.prototype, |
| 377 | 382 |
| 378 decorate: function() { | 383 decorate: function() { |
| 379 AutofillProfileList.prototype.decorate.call(this); | 384 AutofillProfileList.prototype.decorate.call(this); |
| 380 }, | 385 }, |
| 381 | 386 |
| 382 /** @override */ | 387 /** @override */ |
| 383 activateItemAtIndex: function(index) { | 388 activateItemAtIndex: function(index) { |
| 384 AutofillOptions.loadCreditCardEditor(this.dataModel.item(index)[0]); | 389 AutofillOptions.loadCreditCardEditor(this.dataModel.item(index)[0]); |
| 385 }, | 390 }, |
| 386 | 391 |
| 387 /** @override */ | 392 /** |
| 393 * @override |
| 394 * @param {Array} entry |
| 395 */ |
| 388 createItem: function(entry) { | 396 createItem: function(entry) { |
| 389 return new CreditCardListItem(entry); | 397 return new CreditCardListItem(entry); |
| 390 }, | 398 }, |
| 391 | 399 |
| 392 /** @override */ | 400 /** @override */ |
| 393 deleteItemAtIndex: function(index) { | 401 deleteItemAtIndex: function(index) { |
| 394 AutofillOptions.removeData(this.dataModel.item(index)[0]); | 402 AutofillOptions.removeData(this.dataModel.item(index)[0]); |
| 395 }, | 403 }, |
| 396 }; | 404 }; |
| 397 | 405 |
| 398 /** | 406 /** |
| 399 * Create a new value list. | 407 * Create a new value list. |
| 400 * @constructor | 408 * @constructor |
| 401 * @extends {options.InlineEditableItemList} | 409 * @extends {options.InlineEditableItemList} |
| 402 */ | 410 */ |
| 403 var AutofillValuesList = cr.ui.define('list'); | 411 var AutofillValuesList = cr.ui.define('list'); |
| 404 | 412 |
| 405 AutofillValuesList.prototype = { | 413 AutofillValuesList.prototype = { |
| 406 __proto__: InlineEditableItemList.prototype, | 414 __proto__: InlineEditableItemList.prototype, |
| 407 | 415 |
| 408 /** @override */ | 416 /** |
| 417 * @override |
| 418 * @param {string} entry |
| 419 */ |
| 409 createItem: function(entry) { | 420 createItem: function(entry) { |
| 410 return new ValuesListItem(this, entry); | 421 return new ValuesListItem(this, entry); |
| 411 }, | 422 }, |
| 412 | 423 |
| 413 /** @override */ | 424 /** @override */ |
| 414 deleteItemAtIndex: function(index) { | 425 deleteItemAtIndex: function(index) { |
| 415 this.dataModel.splice(index, 1); | 426 this.dataModel.splice(index, 1); |
| 416 }, | 427 }, |
| 417 | 428 |
| 418 /** @override */ | 429 /** @override */ |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 456 * @param {string} value The value of the item to insert. | 467 * @param {string} value The value of the item to insert. |
| 457 */ | 468 */ |
| 458 validateAndSave: function(index, remove, value) { | 469 validateAndSave: function(index, remove, value) { |
| 459 this.dataModel.splice(index, remove, value); | 470 this.dataModel.splice(index, remove, value); |
| 460 }, | 471 }, |
| 461 }; | 472 }; |
| 462 | 473 |
| 463 /** | 474 /** |
| 464 * Create a new value list for phone number validation. | 475 * Create a new value list for phone number validation. |
| 465 * @constructor | 476 * @constructor |
| 466 * @extends {options.AutofillValuesList} | 477 * @extends {options.autofillOptions.AutofillValuesList} |
| 467 */ | 478 */ |
| 468 var AutofillNameValuesList = cr.ui.define('list'); | 479 var AutofillNameValuesList = cr.ui.define('list'); |
| 469 | 480 |
| 470 AutofillNameValuesList.prototype = { | 481 AutofillNameValuesList.prototype = { |
| 471 __proto__: AutofillValuesList.prototype, | 482 __proto__: AutofillValuesList.prototype, |
| 472 | 483 |
| 473 /** @override */ | 484 /** |
| 485 * @override |
| 486 * @param {Array.<string>} entry |
| 487 */ |
| 474 createItem: function(entry) { | 488 createItem: function(entry) { |
| 475 return new NameListItem(this, entry); | 489 return new NameListItem(this, entry); |
| 476 }, | 490 }, |
| 477 }; | 491 }; |
| 478 | 492 |
| 479 /** | 493 /** |
| 480 * Create a new value list for phone number validation. | 494 * Create a new value list for phone number validation. |
| 481 * @constructor | 495 * @constructor |
| 482 * @extends {options.AutofillValuesList} | 496 * @extends {options.autofillOptions.AutofillValuesList} |
| 483 */ | 497 */ |
| 484 var AutofillPhoneValuesList = cr.ui.define('list'); | 498 var AutofillPhoneValuesList = cr.ui.define('list'); |
| 485 | 499 |
| 486 AutofillPhoneValuesList.prototype = { | 500 AutofillPhoneValuesList.prototype = { |
| 487 __proto__: AutofillValuesList.prototype, | 501 __proto__: AutofillValuesList.prototype, |
| 488 | 502 |
| 489 /** @override */ | 503 /** @override */ |
| 490 validateAndSave: function(index, remove, value) { | 504 validateAndSave: function(index, remove, value) { |
| 491 var numbers = this.dataModel.slice(0, this.dataModel.length - 1); | 505 var numbers = this.dataModel.slice(0, this.dataModel.length - 1); |
| 492 numbers.splice(index, remove, value); | 506 numbers.splice(index, remove, value); |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 535 doneValidating: function() { | 549 doneValidating: function() { |
| 536 if (this.validationRequests_ <= 0) | 550 if (this.validationRequests_ <= 0) |
| 537 return Promise.resolve(); | 551 return Promise.resolve(); |
| 538 return new Promise(function(resolve) { | 552 return new Promise(function(resolve) { |
| 539 this.validationPromiseResolvers_.push(resolve); | 553 this.validationPromiseResolvers_.push(resolve); |
| 540 }.bind(this)); | 554 }.bind(this)); |
| 541 } | 555 } |
| 542 }; | 556 }; |
| 543 | 557 |
| 544 return { | 558 return { |
| 559 AutofillProfileList: AutofillProfileList, |
| 545 AddressListItem: AddressListItem, | 560 AddressListItem: AddressListItem, |
| 546 CreditCardListItem: CreditCardListItem, | 561 CreditCardListItem: CreditCardListItem, |
| 547 ValuesListItem: ValuesListItem, | 562 ValuesListItem: ValuesListItem, |
| 548 NameListItem: NameListItem, | 563 NameListItem: NameListItem, |
| 549 AutofillAddressList: AutofillAddressList, | 564 AutofillAddressList: AutofillAddressList, |
| 550 AutofillCreditCardList: AutofillCreditCardList, | 565 AutofillCreditCardList: AutofillCreditCardList, |
| 551 AutofillValuesList: AutofillValuesList, | 566 AutofillValuesList: AutofillValuesList, |
| 552 AutofillNameValuesList: AutofillNameValuesList, | 567 AutofillNameValuesList: AutofillNameValuesList, |
| 553 AutofillPhoneValuesList: AutofillPhoneValuesList, | 568 AutofillPhoneValuesList: AutofillPhoneValuesList, |
| 554 }; | 569 }; |
| 555 }); | 570 }); |
| OLD | NEW |