OLD | NEW |
1 /** @polymerBehavior Polymer.IronMultiSelectableBehavior */ | 1 /** @polymerBehavior Polymer.IronMultiSelectableBehavior */ |
2 Polymer.IronMultiSelectableBehaviorImpl = { | 2 Polymer.IronMultiSelectableBehaviorImpl = { |
3 properties: { | 3 properties: { |
4 | 4 |
5 /** | 5 /** |
6 * If true, multiple selections are allowed. | 6 * If true, multiple selections are allowed. |
7 */ | 7 */ |
8 multi: { | 8 multi: { |
9 type: Boolean, | 9 type: Boolean, |
10 value: false, | 10 value: false, |
(...skipping 14 matching lines...) Expand all Loading... |
25 */ | 25 */ |
26 selectedItems: { | 26 selectedItems: { |
27 type: Array, | 27 type: Array, |
28 readOnly: true, | 28 readOnly: true, |
29 notify: true | 29 notify: true |
30 }, | 30 }, |
31 | 31 |
32 }, | 32 }, |
33 | 33 |
34 observers: [ | 34 observers: [ |
35 '_updateSelected(attrForSelected, selectedValues)' | 35 '_updateSelected(selectedValues)' |
36 ], | 36 ], |
37 | 37 |
38 /** | 38 /** |
39 * Selects the given value. If the `multi` property is true, then the select
ed state of the | 39 * Selects the given value. If the `multi` property is true, then the select
ed state of the |
40 * `value` will be toggled; otherwise the `value` will be selected. | 40 * `value` will be toggled; otherwise the `value` will be selected. |
41 * | 41 * |
42 * @method select | 42 * @method select |
43 * @param {string|number} value the value to select. | 43 * @param {string|number} value the value to select. |
44 */ | 44 */ |
45 select: function(value) { | 45 select: function(value) { |
(...skipping 10 matching lines...) Expand all Loading... |
56 | 56 |
57 multiChanged: function(multi) { | 57 multiChanged: function(multi) { |
58 this._selection.multi = multi; | 58 this._selection.multi = multi; |
59 }, | 59 }, |
60 | 60 |
61 get _shouldUpdateSelection() { | 61 get _shouldUpdateSelection() { |
62 return this.selected != null || | 62 return this.selected != null || |
63 (this.selectedValues != null && this.selectedValues.length); | 63 (this.selectedValues != null && this.selectedValues.length); |
64 }, | 64 }, |
65 | 65 |
| 66 _updateAttrForSelected: function() { |
| 67 if (!this.multi) { |
| 68 Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this); |
| 69 } else if (this._shouldUpdateSelection) { |
| 70 this.selectedValues = this.selectedItems.map(function(selectedItem) { |
| 71 return this._indexToValue(this.indexOf(selectedItem)); |
| 72 }, this).filter(function(unfilteredValue) { |
| 73 return unfilteredValue != null; |
| 74 }, this); |
| 75 } |
| 76 }, |
| 77 |
66 _updateSelected: function() { | 78 _updateSelected: function() { |
67 if (this.multi) { | 79 if (this.multi) { |
68 this._selectMulti(this.selectedValues); | 80 this._selectMulti(this.selectedValues); |
69 } else { | 81 } else { |
70 this._selectSelected(this.selected); | 82 this._selectSelected(this.selected); |
71 } | 83 } |
72 }, | 84 }, |
73 | 85 |
74 _selectMulti: function(values) { | 86 _selectMulti: function(values) { |
75 this._selection.clear(); | |
76 if (values) { | 87 if (values) { |
77 for (var i = 0; i < values.length; i++) { | 88 var selectedItems = this._valuesToItems(values); |
78 this._selection.setItemSelected(this._valueToItem(values[i]), true); | 89 // clear all but the current selected items |
| 90 this._selection.clear(selectedItems); |
| 91 // select only those not selected yet |
| 92 for (var i = 0; i < selectedItems.length; i++) { |
| 93 this._selection.setItemSelected(selectedItems[i], true); |
79 } | 94 } |
| 95 } else { |
| 96 this._selection.clear(); |
80 } | 97 } |
81 }, | 98 }, |
82 | 99 |
83 _selectionChange: function() { | 100 _selectionChange: function() { |
84 var s = this._selection.get(); | 101 var s = this._selection.get(); |
85 if (this.multi) { | 102 if (this.multi) { |
86 this._setSelectedItems(s); | 103 this._setSelectedItems(s); |
87 } else { | 104 } else { |
88 this._setSelectedItems([s]); | 105 this._setSelectedItems([s]); |
89 this._setSelectedItem(s); | 106 this._setSelectedItem(s); |
90 } | 107 } |
91 }, | 108 }, |
92 | 109 |
93 _toggleSelected: function(value) { | 110 _toggleSelected: function(value) { |
94 var i = this.selectedValues.indexOf(value); | 111 var i = this.selectedValues.indexOf(value); |
95 var unselected = i < 0; | 112 var unselected = i < 0; |
96 if (unselected) { | 113 if (unselected) { |
97 this.push('selectedValues',value); | 114 this.push('selectedValues',value); |
98 } else { | 115 } else { |
99 this.splice('selectedValues',i,1); | 116 this.splice('selectedValues',i,1); |
100 } | 117 } |
101 this._selection.setItemSelected(this._valueToItem(value), unselected); | 118 this._selection.setItemSelected(this._valueToItem(value), unselected); |
| 119 }, |
| 120 |
| 121 _valuesToItems: function(values) { |
| 122 return (values == null) ? null : values.map(function(value) { |
| 123 return this._valueToItem(value); |
| 124 }, this); |
102 } | 125 } |
103 }; | 126 }; |
104 | 127 |
105 /** @polymerBehavior */ | 128 /** @polymerBehavior */ |
106 Polymer.IronMultiSelectableBehavior = [ | 129 Polymer.IronMultiSelectableBehavior = [ |
107 Polymer.IronSelectableBehavior, | 130 Polymer.IronSelectableBehavior, |
108 Polymer.IronMultiSelectableBehaviorImpl | 131 Polymer.IronMultiSelectableBehaviorImpl |
109 ]; | 132 ]; |
OLD | NEW |