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 |