| 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 |