| <link rel="import" href="../../third-party/polymer/polymer.html"> |
| <link rel="import" href="../../third-party/core-list/core-list.html"> |
| <link rel="import" href="../../third-party/core-item/core-item.html"> |
| |
| <polymer-element name="p2b-namespace-list" attributes="names selectable"> |
| <template> |
| <link rel="stylesheet" href="component.css"> |
| <core-list selectable?="{{selectable}}" on-core-activate="{{fireSelectEvent}}" data="{{_items}}" height="20" style="height: 200px"> |
| <template> |
| <core-item class="{{ {selected: selected} | tokenList }}" label="{{model.name}}"></core-item> |
| </template> |
| </core-list> |
| </template> |
| <script> |
| Polymer('p2b-namespace-list', { |
| /* |
| * List of names to be displayed |
| * @type {Array<string>} |
| */ |
| names: [], |
| |
| /* |
| * Whether the names displayed are selectable |
| * if selectable, 'select' event will fire with the name of the selected item |
| * @type {boolean} |
| */ |
| selectable: false, |
| |
| /* |
| * transformed collection of names to objects |
| * @private |
| */ |
| _items: [], |
| namesChanged: function() { |
| // transform from [string] to [object] since core-items expects array of objects |
| this._items = this.names.map( function(n) { |
| return {name: n}; |
| }); |
| }, |
| |
| /* |
| * fires the select event pass the name as event argument |
| * @private |
| */ |
| fireSelectEvent: function(e) { |
| if (!this.selectable) { |
| return; |
| } |
| this.fire('select', e.detail.data.name); |
| } |
| }); |
| </script> |
| </polymer-element> |