OLD | NEW |
1 | 1 |
2 | 2 |
| 3 /** @polymerBehavior */ |
3 Polymer.IronSelectableBehavior = { | 4 Polymer.IronSelectableBehavior = { |
4 | 5 |
5 properties: { | 6 properties: { |
6 | 7 |
7 /** | 8 /** |
8 * If you want to use the attribute value of an element for `selected` ins
tead of the index, | 9 * If you want to use the attribute value of an element for `selected` ins
tead of the index, |
9 * set this to the name of the attribute. | 10 * set this to the name of the attribute. |
10 * | 11 * |
11 * @attribute attrForSelected | 12 * @attribute attrForSelected |
12 * @type {string} | 13 * @type {string} |
(...skipping 26 matching lines...) Expand all Loading... |
39 notify: true | 40 notify: true |
40 }, | 41 }, |
41 | 42 |
42 /** | 43 /** |
43 * The event that fires from items when they are selected. Selectable | 44 * The event that fires from items when they are selected. Selectable |
44 * will listen for this event from items and update the selection state. | 45 * will listen for this event from items and update the selection state. |
45 * Set to empty string to listen to no events. | 46 * Set to empty string to listen to no events. |
46 * | 47 * |
47 * @attribute activateEvent | 48 * @attribute activateEvent |
48 * @type {string} | 49 * @type {string} |
49 * @default 'click' | 50 * @default 'tap' |
50 */ | 51 */ |
51 activateEvent: { | 52 activateEvent: { |
52 type: String, | 53 type: String, |
53 value: 'click', | 54 value: 'tap', |
54 observer: '_activateEventChanged' | 55 observer: '_activateEventChanged' |
55 }, | 56 }, |
56 | 57 |
57 /** | 58 /** |
58 * This is a CSS selector sting. If this is set, only items that matches
the CSS selector | 59 * This is a CSS selector sting. If this is set, only items that matches
the CSS selector |
59 * are selectable. | 60 * are selectable. |
60 * | 61 * |
61 * @attribute selectable | 62 * @attribute selectable |
62 * @type {string} | 63 * @type {string} |
63 */ | 64 */ |
(...skipping 25 matching lines...) Expand all Loading... |
89 | 90 |
90 observers: [ | 91 observers: [ |
91 '_updateSelected(attrForSelected, selected)' | 92 '_updateSelected(attrForSelected, selected)' |
92 ], | 93 ], |
93 | 94 |
94 excludedLocalNames: { | 95 excludedLocalNames: { |
95 'template': 1 | 96 'template': 1 |
96 }, | 97 }, |
97 | 98 |
98 created: function() { | 99 created: function() { |
99 this._bindActivateHandler = this._activateHandler.bind(this); | |
100 this._bindFilterItem = this._filterItem.bind(this); | 100 this._bindFilterItem = this._filterItem.bind(this); |
101 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); | 101 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); |
102 }, | 102 }, |
103 | 103 |
104 attached: function() { | 104 attached: function() { |
105 this._observer = this._observeItems(this); | 105 this._observer = this._observeItems(this); |
106 this._contentObserver = this._observeContent(this); | 106 this._contentObserver = this._observeContent(this); |
107 }, | 107 }, |
108 | 108 |
109 detached: function() { | 109 detached: function() { |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
163 * Selects the next item. | 163 * Selects the next item. |
164 * | 164 * |
165 * @method selectNext | 165 * @method selectNext |
166 */ | 166 */ |
167 selectNext: function() { | 167 selectNext: function() { |
168 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; | 168 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; |
169 this.selected = this._indexToValue(index); | 169 this.selected = this._indexToValue(index); |
170 }, | 170 }, |
171 | 171 |
172 _addListener: function(eventName) { | 172 _addListener: function(eventName) { |
173 this.addEventListener(eventName, this._bindActivateHandler); | 173 this.listen(this, eventName, '_activateHandler'); |
174 }, | 174 }, |
175 | 175 |
176 _removeListener: function(eventName) { | 176 _removeListener: function(eventName) { |
177 this.removeEventListener(eventName, this._bindActivateHandler); | 177 // There is no unlisten yet... |
| 178 // https://github.com/Polymer/polymer/issues/1639 |
| 179 //this.removeEventListener(eventName, this._bindActivateHandler); |
178 }, | 180 }, |
179 | 181 |
180 _activateEventChanged: function(eventName, old) { | 182 _activateEventChanged: function(eventName, old) { |
181 this._removeListener(old); | 183 this._removeListener(old); |
182 this._addListener(eventName); | 184 this._addListener(eventName); |
183 }, | 185 }, |
184 | 186 |
185 _updateSelected: function() { | 187 _updateSelected: function() { |
186 this._selectSelected(this.selected); | 188 this._selectSelected(this.selected); |
187 }, | 189 }, |
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
256 } | 258 } |
257 }.bind(this)); | 259 }.bind(this)); |
258 observer.observe(node, { | 260 observer.observe(node, { |
259 childList: true, | 261 childList: true, |
260 subtree: true | 262 subtree: true |
261 }); | 263 }); |
262 return observer; | 264 return observer; |
263 }, | 265 }, |
264 | 266 |
265 _activateHandler: function(e) { | 267 _activateHandler: function(e) { |
| 268 // TODO: remove this when https://github.com/Polymer/polymer/issues/1639 i
s fixed so we |
| 269 // can just remove the old event listener. |
| 270 if (e.type !== this.activateEvent) { |
| 271 return; |
| 272 } |
266 var t = e.target; | 273 var t = e.target; |
267 var items = this.items; | 274 var items = this.items; |
268 while (t && t != this) { | 275 while (t && t != this) { |
269 var i = items.indexOf(t); | 276 var i = items.indexOf(t); |
270 if (i >= 0) { | 277 if (i >= 0) { |
271 var value = this._indexToValue(i); | 278 var value = this._indexToValue(i); |
272 this._itemActivate(value, t); | 279 this._itemActivate(value, t); |
273 return; | 280 return; |
274 } | 281 } |
275 t = t.parentNode; | 282 t = t.parentNode; |
276 } | 283 } |
277 }, | 284 }, |
278 | 285 |
279 _itemActivate: function(value, item) { | 286 _itemActivate: function(value, item) { |
280 if (!this.fire('iron-activate', | 287 if (!this.fire('iron-activate', |
281 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { | 288 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { |
282 this.select(value); | 289 this.select(value); |
283 } | 290 } |
284 } | 291 } |
285 | 292 |
286 }; | 293 }; |
287 | 294 |
OLD | NEW |