| OLD | NEW |
| 1 /** @polymerBehavior */ | 1 |
| 2 |
| 3 /** @polymerBehavior */ |
| 2 Polymer.IronSelectableBehavior = { | 4 Polymer.IronSelectableBehavior = { |
| 3 | 5 |
| 6 /** |
| 7 * Fired when iron-selector is activated (selected or deselected). |
| 8 * It is fired before the selected items are changed. |
| 9 * Cancel the event to abort selection. |
| 10 * |
| 11 * @event iron-activate |
| 12 * |
| 13 **/ |
| 14 /** |
| 15 * Fired when an item is selected |
| 16 * |
| 17 * @event iron-select |
| 18 * |
| 19 **/ |
| 20 /** |
| 21 * Fired when an item is deselected |
| 22 * |
| 23 * @event iron-deselect |
| 24 * |
| 25 **/ |
| 26 |
| 4 properties: { | 27 properties: { |
| 5 | 28 |
| 6 /** | 29 /** |
| 7 * If you want to use the attribute value of an element for `selected` ins
tead of the index, | 30 * If you want to use the attribute value of an element for `selected` ins
tead of the index, |
| 8 * set this to the name of the attribute. | 31 * set this to the name of the attribute. |
| 9 * | 32 * |
| 10 * @attribute attrForSelected | 33 * @attribute attrForSelected |
| 11 * @type {string} | 34 * @type {string} |
| 12 */ | 35 */ |
| 13 attrForSelected: { | 36 attrForSelected: { |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 * @type {string} | 70 * @type {string} |
| 48 * @default 'tap' | 71 * @default 'tap' |
| 49 */ | 72 */ |
| 50 activateEvent: { | 73 activateEvent: { |
| 51 type: String, | 74 type: String, |
| 52 value: 'tap', | 75 value: 'tap', |
| 53 observer: '_activateEventChanged' | 76 observer: '_activateEventChanged' |
| 54 }, | 77 }, |
| 55 | 78 |
| 56 /** | 79 /** |
| 57 * This is a CSS selector sting. If this is set, only items that matches
the CSS selector | 80 * This is a CSS selector string. If this is set, only items that match t
he CSS selector |
| 58 * are selectable. | 81 * are selectable. |
| 59 * | 82 * |
| 60 * @attribute selectable | 83 * @attribute selectable |
| 61 * @type {string} | 84 * @type {string} |
| 62 */ | 85 */ |
| 63 selectable: String, | 86 selectable: String, |
| 64 | 87 |
| 65 /** | 88 /** |
| 66 * The class to set on elements when selected. | 89 * The class to set on elements when selected. |
| 67 * | 90 * |
| 68 * @attribute selectedClass | 91 * @attribute selectedClass |
| 69 * @type {string} | 92 * @type {string} |
| 70 */ | 93 */ |
| 71 selectedClass: { | 94 selectedClass: { |
| 72 type: String, | 95 type: String, |
| 73 value: 'iron-selected' | 96 value: 'iron-selected' |
| 74 }, | 97 }, |
| 75 | 98 |
| 76 /** | 99 /** |
| 77 * The attribute to set on elements when selected. | 100 * The attribute to set on elements when selected. |
| 78 * | 101 * |
| 79 * @attribute selectedAttribute | 102 * @attribute selectedAttribute |
| 80 * @type {string} | 103 * @type {string} |
| 81 */ | 104 */ |
| 82 selectedAttribute: { | 105 selectedAttribute: { |
| 83 type: String, | 106 type: String, |
| 84 value: null | 107 value: null |
| 108 }, |
| 109 |
| 110 /** |
| 111 * The set of excluded elements where the key is the `localName` |
| 112 * of the element that will be ignored from the item list. |
| 113 * |
| 114 * @type {object} |
| 115 * @default {template: 1} |
| 116 */ |
| 117 |
| 118 excludedLocalNames: { |
| 119 type: Object, |
| 120 value: function() { |
| 121 return { |
| 122 'template': 1 |
| 123 }; |
| 124 } |
| 85 } | 125 } |
| 86 | |
| 87 }, | 126 }, |
| 88 | 127 |
| 89 observers: [ | 128 observers: [ |
| 90 '_updateSelected(attrForSelected, selected)' | 129 '_updateSelected(attrForSelected, selected)' |
| 91 ], | 130 ], |
| 92 | 131 |
| 93 excludedLocalNames: { | |
| 94 'template': 1 | |
| 95 }, | |
| 96 | |
| 97 created: function() { | 132 created: function() { |
| 98 this._bindFilterItem = this._filterItem.bind(this); | 133 this._bindFilterItem = this._filterItem.bind(this); |
| 99 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); | 134 this._selection = new Polymer.IronSelection(this._applySelection.bind(this
)); |
| 100 }, | 135 }, |
| 101 | 136 |
| 102 attached: function() { | 137 attached: function() { |
| 103 this._observer = this._observeItems(this); | 138 this._observer = this._observeItems(this); |
| 104 this._contentObserver = this._observeContent(this); | 139 this._contentObserver = this._observeContent(this); |
| 105 }, | 140 }, |
| 106 | 141 |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 165 selectNext: function() { | 200 selectNext: function() { |
| 166 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; | 201 var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.l
ength; |
| 167 this.selected = this._indexToValue(index); | 202 this.selected = this._indexToValue(index); |
| 168 }, | 203 }, |
| 169 | 204 |
| 170 _addListener: function(eventName) { | 205 _addListener: function(eventName) { |
| 171 this.listen(this, eventName, '_activateHandler'); | 206 this.listen(this, eventName, '_activateHandler'); |
| 172 }, | 207 }, |
| 173 | 208 |
| 174 _removeListener: function(eventName) { | 209 _removeListener: function(eventName) { |
| 175 // There is no unlisten yet... | 210 this.unlisten(this, eventName, '_activateHandler'); |
| 176 // https://github.com/Polymer/polymer/issues/1639 | |
| 177 //this.removeEventListener(eventName, this._bindActivateHandler); | |
| 178 }, | 211 }, |
| 179 | 212 |
| 180 _activateEventChanged: function(eventName, old) { | 213 _activateEventChanged: function(eventName, old) { |
| 181 this._removeListener(old); | 214 this._removeListener(old); |
| 182 this._addListener(eventName); | 215 this._addListener(eventName); |
| 183 }, | 216 }, |
| 184 | 217 |
| 185 _updateSelected: function() { | 218 _updateSelected: function() { |
| 186 this._selectSelected(this.selected); | 219 this._selectSelected(this.selected); |
| 187 }, | 220 }, |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 256 } | 289 } |
| 257 }.bind(this)); | 290 }.bind(this)); |
| 258 observer.observe(node, { | 291 observer.observe(node, { |
| 259 childList: true, | 292 childList: true, |
| 260 subtree: true | 293 subtree: true |
| 261 }); | 294 }); |
| 262 return observer; | 295 return observer; |
| 263 }, | 296 }, |
| 264 | 297 |
| 265 _activateHandler: function(e) { | 298 _activateHandler: function(e) { |
| 266 // TODO: remove this when https://github.com/Polymer/polymer/issues/1639 i
s fixed so we | |
| 267 // can just remove the old event listener. | |
| 268 if (e.type !== this.activateEvent) { | |
| 269 return; | |
| 270 } | |
| 271 var t = e.target; | 299 var t = e.target; |
| 272 var items = this.items; | 300 var items = this.items; |
| 273 while (t && t != this) { | 301 while (t && t != this) { |
| 274 var i = items.indexOf(t); | 302 var i = items.indexOf(t); |
| 275 if (i >= 0) { | 303 if (i >= 0) { |
| 276 var value = this._indexToValue(i); | 304 var value = this._indexToValue(i); |
| 277 this._itemActivate(value, t); | 305 this._itemActivate(value, t); |
| 278 return; | 306 return; |
| 279 } | 307 } |
| 280 t = t.parentNode; | 308 t = t.parentNode; |
| 281 } | 309 } |
| 282 }, | 310 }, |
| 283 | 311 |
| 284 _itemActivate: function(value, item) { | 312 _itemActivate: function(value, item) { |
| 285 if (!this.fire('iron-activate', | 313 if (!this.fire('iron-activate', |
| 286 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { | 314 {selected: value, item: item}, {cancelable: true}).defaultPrevented) { |
| 287 this.select(value); | 315 this.select(value); |
| 288 } | 316 } |
| 289 } | 317 } |
| 290 | 318 |
| 291 }; | 319 }; |
| 320 |
| OLD | NEW |