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', function() { | 5 cr.define('options', 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 | 8 |
9 /** | 9 /** |
10 * Creates a new list item with support for inline editing. | 10 * Creates a new list item with support for inline editing. |
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
78 DeletableItem.prototype.decorate.call(this); | 78 DeletableItem.prototype.decorate.call(this); |
79 | 79 |
80 this.editFields_ = []; | 80 this.editFields_ = []; |
81 this.addEventListener('mousedown', this.handleMouseDown_); | 81 this.addEventListener('mousedown', this.handleMouseDown_); |
82 this.addEventListener('keydown', this.handleKeyDown_); | 82 this.addEventListener('keydown', this.handleKeyDown_); |
83 this.addEventListener('focusin', this.handleFocusIn_); | 83 this.addEventListener('focusin', this.handleFocusIn_); |
84 }, | 84 }, |
85 | 85 |
86 /** @override */ | 86 /** @override */ |
87 selectionChanged: function() { | 87 selectionChanged: function() { |
88 this.updateEditState(); | 88 if (!this.parentNode.ignoreChangeEvents_) |
| 89 this.updateEditState(); |
89 }, | 90 }, |
90 | 91 |
91 /** | 92 /** |
92 * Called when this element gains or loses 'lead' status. Updates editing | 93 * Called when this element gains or loses 'lead' status. Updates editing |
93 * mode accordingly. | 94 * mode accordingly. |
94 */ | 95 */ |
95 updateLeadState: function() { | 96 updateLeadState: function() { |
96 // Add focusability before call to updateEditState. | 97 // Add focusability before call to updateEditState. |
97 if (this.lead) { | 98 if (this.lead) { |
98 this.setEditableValuesFocusable(true); | 99 this.setEditableValuesFocusable(true); |
(...skipping 470 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
569 /** | 570 /** |
570 * @constructor | 571 * @constructor |
571 * @extends {options.DeletableItemList} | 572 * @extends {options.DeletableItemList} |
572 */ | 573 */ |
573 var InlineEditableItemList = cr.ui.define('list'); | 574 var InlineEditableItemList = cr.ui.define('list'); |
574 | 575 |
575 InlineEditableItemList.prototype = { | 576 InlineEditableItemList.prototype = { |
576 __proto__: DeletableItemList.prototype, | 577 __proto__: DeletableItemList.prototype, |
577 | 578 |
578 /** | 579 /** |
| 580 * Whether to ignore list change events. |
| 581 * Used to modify the list without processing selection change and lead |
| 582 * change events. |
| 583 * @type {boolean} |
| 584 * @private |
| 585 */ |
| 586 ignoreChangeEvents_: false, |
| 587 |
| 588 /** |
579 * Focuses the input element of the placeholder if true. | 589 * Focuses the input element of the placeholder if true. |
580 * @type {boolean} | 590 * @type {boolean} |
581 * @private | 591 * @private |
582 */ | 592 */ |
583 needsToFocusPlaceholder_: false, | 593 needsToFocusPlaceholder_: false, |
584 | 594 |
585 /** @override */ | 595 /** @override */ |
586 decorate: function() { | 596 decorate: function() { |
587 DeletableItemList.prototype.decorate.call(this); | 597 DeletableItemList.prototype.decorate.call(this); |
588 this.setAttribute('inlineeditable', ''); | 598 this.setAttribute('inlineeditable', ''); |
(...skipping 28 matching lines...) Expand all Loading... |
617 leadItem.editing = false; | 627 leadItem.editing = false; |
618 // Remove focusability after making other changes. | 628 // Remove focusability after making other changes. |
619 if (!leadItem.isPlaceholder) | 629 if (!leadItem.isPlaceholder) |
620 leadItem.setEditableValuesFocusable(false); | 630 leadItem.setEditableValuesFocusable(false); |
621 } | 631 } |
622 } | 632 } |
623 }, | 633 }, |
624 | 634 |
625 /** @override */ | 635 /** @override */ |
626 handleLeadChange: function(e) { | 636 handleLeadChange: function(e) { |
| 637 if (this.ignoreChangeEvents_) |
| 638 return; |
| 639 |
627 DeletableItemList.prototype.handleLeadChange.call(this, e); | 640 DeletableItemList.prototype.handleLeadChange.call(this, e); |
628 | 641 |
629 var focusedColumnIndex = -1; | 642 var focusedColumnIndex = -1; |
630 if (e.oldValue != -1) { | 643 if (e.oldValue != -1) { |
631 var element = this.getListItemByIndex(e.oldValue); | 644 var element = this.getListItemByIndex(e.oldValue); |
632 if (element) { | 645 if (element) { |
633 focusedColumnIndex = element.focusedColumnIndex; | 646 focusedColumnIndex = element.focusedColumnIndex; |
634 element.updateLeadState(); | 647 element.updateLeadState(); |
635 } | 648 } |
636 } | 649 } |
(...skipping 18 matching lines...) Expand all Loading... |
655 if (item) { | 668 if (item) { |
656 item.setStaticValuesFocusable(true); | 669 item.setStaticValuesFocusable(true); |
657 item.setCloseButtonFocusable(true); | 670 item.setCloseButtonFocusable(true); |
658 if (item.isPlaceholder) | 671 if (item.isPlaceholder) |
659 item.setEditableValuesFocusable(true); | 672 item.setEditableValuesFocusable(true); |
660 } | 673 } |
661 } | 674 } |
662 }, | 675 }, |
663 | 676 |
664 /** | 677 /** |
| 678 * Execute |callback| with list change events disabled. Selection change and |
| 679 * lead change events will not be processed. |
| 680 * @param {!Function} callback The function to execute. |
| 681 * @protected |
| 682 */ |
| 683 ignoreChangeEvents: function(callback) { |
| 684 assert(!this.ignoreChangeEvents_); |
| 685 this.ignoreChangeEvents_ = true; |
| 686 callback(); |
| 687 this.ignoreChangeEvents_ = false; |
| 688 }, |
| 689 |
| 690 /** |
| 691 * Set the selected index without changing the focused element on the page. |
| 692 * Used to change the selected index when the list doesn't have focus (and |
| 693 * doesn't want to take focus). |
| 694 * @param {number} index The index to select. |
| 695 */ |
| 696 selectIndexWithoutFocusing: function(index) { |
| 697 // Remove focusability from old item. |
| 698 var oldItem = this.getListItemByIndex(this.selectionModel.leadIndex) || |
| 699 this.getInitialFocusableItem(); |
| 700 if (oldItem) { |
| 701 oldItem.setEditableValuesFocusable(false); |
| 702 oldItem.setStaticValuesFocusable(false); |
| 703 oldItem.setCloseButtonFocusable(false); |
| 704 oldItem.lead = false; |
| 705 } |
| 706 |
| 707 // Select the new item. |
| 708 this.ignoreChangeEvents(function() { |
| 709 this.selectionModel.selectedIndex = index; |
| 710 }.bind(this)); |
| 711 |
| 712 // Add focusability to new item. |
| 713 var newItem = this.getListItemByIndex(index); |
| 714 if (newItem) { |
| 715 if (newItem.isPlaceholder) |
| 716 newItem.setEditableValuesFocusable(true); |
| 717 else |
| 718 newItem.setStaticValuesFocusable(true); |
| 719 |
| 720 newItem.setCloseButtonFocusable(true); |
| 721 newItem.lead = true; |
| 722 } |
| 723 }, |
| 724 |
| 725 /** |
665 * Focus the placeholder's first input field. | 726 * Focus the placeholder's first input field. |
666 * Should only be called immediately after the list has been repopulated. | 727 * Should only be called immediately after the list has been repopulated. |
667 */ | 728 */ |
668 focusPlaceholder: function() { | 729 focusPlaceholder: function() { |
669 // Remove focusability from initial item. | 730 // Remove focusability from initial item. |
670 var item = this.getInitialFocusableItem(); | 731 var item = this.getInitialFocusableItem(); |
671 if (item) { | 732 if (item) { |
672 item.setStaticValuesFocusable(false); | 733 item.setStaticValuesFocusable(false); |
673 item.setCloseButtonFocusable(false); | 734 item.setCloseButtonFocusable(false); |
674 } | 735 } |
(...skipping 29 matching lines...) Expand all Loading... |
704 this.getListItemByIndex(0)); | 765 this.getListItemByIndex(0)); |
705 }, | 766 }, |
706 }; | 767 }; |
707 | 768 |
708 // Export | 769 // Export |
709 return { | 770 return { |
710 InlineEditableItem: InlineEditableItem, | 771 InlineEditableItem: InlineEditableItem, |
711 InlineEditableItemList: InlineEditableItemList, | 772 InlineEditableItemList: InlineEditableItemList, |
712 }; | 773 }; |
713 }); | 774 }); |
OLD | NEW |