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 |