OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --> | 8 --> |
9 | 9 |
10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
11 <link rel="import" href="iron-selection.html"> | 11 <link rel="import" href="iron-selection.html"> |
12 | 12 |
13 <script> | 13 <script> |
14 | 14 |
| 15 /** @polymerBehavior */ |
15 Polymer.IronSelectableBehavior = { | 16 Polymer.IronSelectableBehavior = { |
16 | 17 |
17 properties: { | 18 properties: { |
18 | 19 |
19 /** | 20 /** |
20 * If you want to use the attribute value of an element for `selected` ins
tead of the index, | 21 * If you want to use the attribute value of an element for `selected` ins
tead of the index, |
21 * set this to the name of the attribute. | 22 * set this to the name of the attribute. |
22 * | 23 * |
23 * @attribute attrForSelected | 24 * @attribute attrForSelected |
24 * @type {string} | 25 * @type {string} |
(...skipping 26 matching lines...) Expand all Loading... |
51 notify: true | 52 notify: true |
52 }, | 53 }, |
53 | 54 |
54 /** | 55 /** |
55 * The event that fires from items when they are selected. Selectable | 56 * The event that fires from items when they are selected. Selectable |
56 * will listen for this event from items and update the selection state. | 57 * will listen for this event from items and update the selection state. |
57 * Set to empty string to listen to no events. | 58 * Set to empty string to listen to no events. |
58 * | 59 * |
59 * @attribute activateEvent | 60 * @attribute activateEvent |
60 * @type {string} | 61 * @type {string} |
61 * @default 'click' | 62 * @default 'tap' |
62 */ | 63 */ |
63 activateEvent: { | 64 activateEvent: { |
64 type: String, | 65 type: String, |
65 value: 'click', | 66 value: 'tap', |
66 observer: '_activateEventChanged' | 67 observer: '_activateEventChanged' |
67 }, | 68 }, |
68 | 69 |
69 /** | 70 /** |
70 * This is a CSS selector sting. If this is set, only items that matches
the CSS selector | 71 * This is a CSS selector sting. If this is set, only items that matches
the CSS selector |
71 * are selectable. | 72 * are selectable. |
72 * | 73 * |
73 * @attribute selectable | 74 * @attribute selectable |
74 * @type {string} | 75 * @type {string} |
75 */ | 76 */ |
(...skipping 25 matching lines...) Expand all Loading... |
101 | 102 |
102 observers: [ | 103 observers: [ |
103 '_updateSelected(attrForSelected, selected)' | 104 '_updateSelected(attrForSelected, selected)' |
104 ], | 105 ], |
105 | 106 |
106 excludedLocalNames: { | 107 excludedLocalNames: { |
107 'template': 1 | 108 'template': 1 |
108 }, | 109 }, |
109 | 110 |
110 created: function() { | 111 created: function() { |
111 this._bindActivateHandler = this._activateHandler.bind(this); | |
112 this._bindFilterItem = this._filterItem.bind(this); | 112 this._bindFilterItem = this._filterItem.bind(this); |
113 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); | 113 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); |
114 }, | 114 }, |
115 | 115 |
116 attached: function() { | 116 attached: function() { |
117 this._observer = this._observeItems(this); | 117 this._observer = this._observeItems(this); |
118 this._contentObserver = this._observeContent(this); | 118 this._contentObserver = this._observeContent(this); |
119 }, | 119 }, |
120 | 120 |
121 detached: function() { | 121 detached: function() { |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
175 * Selects the next item. | 175 * Selects the next item. |
176 * | 176 * |
177 * @method selectNext | 177 * @method selectNext |
178 */ | 178 */ |
179 selectNext: function() { | 179 selectNext: function() { |
180 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; | 180 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; |
181 this.selected = this._indexToValue(index); | 181 this.selected = this._indexToValue(index); |
182 }, | 182 }, |
183 | 183 |
184 _addListener: function(eventName) { | 184 _addListener: function(eventName) { |
185 this.addEventListener(eventName, this._bindActivateHandler); | 185 this.listen(this, eventName, '_activateHandler'); |
186 }, | 186 }, |
187 | 187 |
188 _removeListener: function(eventName) { | 188 _removeListener: function(eventName) { |
189 this.removeEventListener(eventName, this._bindActivateHandler); | 189 // There is no unlisten yet... |
| 190 // https://github.com/Polymer/polymer/issues/1639 |
| 191 //this.removeEventListener(eventName, this._bindActivateHandler); |
190 }, | 192 }, |
191 | 193 |
192 _activateEventChanged: function(eventName, old) { | 194 _activateEventChanged: function(eventName, old) { |
193 this._removeListener(old); | 195 this._removeListener(old); |
194 this._addListener(eventName); | 196 this._addListener(eventName); |
195 }, | 197 }, |
196 | 198 |
197 _updateSelected: function() { | 199 _updateSelected: function() { |
198 this._selectSelected(this.selected); | 200 this._selectSelected(this.selected); |
199 }, | 201 }, |
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
268 } | 270 } |
269 }.bind(this)); | 271 }.bind(this)); |
270 observer.observe(node, { | 272 observer.observe(node, { |
271 childList: true, | 273 childList: true, |
272 subtree: true | 274 subtree: true |
273 }); | 275 }); |
274 return observer; | 276 return observer; |
275 }, | 277 }, |
276 | 278 |
277 _activateHandler: function(e) { | 279 _activateHandler: function(e) { |
| 280 // TODO: remove this when https://github.com/Polymer/polymer/issues/1639 i
s fixed so we |
| 281 // can just remove the old event listener. |
| 282 if (e.type !== this.activateEvent) { |
| 283 return; |
| 284 } |
278 var t = e.target; | 285 var t = e.target; |
279 var items = this.items; | 286 var items = this.items; |
280 while (t && t != this) { | 287 while (t && t != this) { |
281 var i = items.indexOf(t); | 288 var i = items.indexOf(t); |
282 if (i >= 0) { | 289 if (i >= 0) { |
283 var value = this._indexToValue(i); | 290 var value = this._indexToValue(i); |
284 this._itemActivate(value, t); | 291 this._itemActivate(value, t); |
285 return; | 292 return; |
286 } | 293 } |
287 t = t.parentNode; | 294 t = t.parentNode; |
288 } | 295 } |
289 }, | 296 }, |
290 | 297 |
291 _itemActivate: function(value, item) { | 298 _itemActivate: function(value, item) { |
292 if (!this.fire('iron-activate', | 299 if (!this.fire('iron-activate', |
293 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { | 300 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { |
294 this.select(value); | 301 this.select(value); |
295 } | 302 } |
296 } | 303 } |
297 | 304 |
298 }; | 305 }; |
299 | 306 |
300 </script> | 307 </script> |
OLD | NEW |