OLD | NEW |
(Empty) | |
| 1 |
| 2 Polymer({ |
| 3 is: 'paper-radio-group', |
| 4 |
| 5 behaviors: [ |
| 6 Polymer.IronA11yKeysBehavior |
| 7 ], |
| 8 |
| 9 hostAttributes: { |
| 10 role: 'radiogroup', |
| 11 tabindex: 0 |
| 12 }, |
| 13 |
| 14 properties: { |
| 15 /** |
| 16 * Fired when the selected element changes to user interaction. |
| 17 * |
| 18 * @event paper-radio-group-changed |
| 19 */ |
| 20 |
| 21 /** |
| 22 * Gets or sets the selected element. Use the `name` attribute of the |
| 23 * <paper-radio-button> that should be selected. |
| 24 * |
| 25 * @attribute selected |
| 26 * @type String |
| 27 * @default null |
| 28 */ |
| 29 |
| 30 selected: { |
| 31 type: String, |
| 32 value: null, |
| 33 notify: true, |
| 34 reflectToAttribute: true, |
| 35 observer: "_selectedChanged" |
| 36 } |
| 37 }, |
| 38 |
| 39 keyBindings: { |
| 40 'left up': '_selectPrevious', |
| 41 'right down': '_selectNext', |
| 42 }, |
| 43 |
| 44 _selectedChanged: function() { |
| 45 // TODO: This only needs to be async while a domReady event is unavailable
. |
| 46 this.async(function() { |
| 47 this._selectIndex(this._valueToIndex(this.items, this.selected)); |
| 48 this.fire('paper-radio-group-changed'); |
| 49 }); |
| 50 }, |
| 51 |
| 52 _selectNext: function() { |
| 53 this.selected = this._nextNode(); |
| 54 }, |
| 55 |
| 56 _selectPrevious: function() { |
| 57 this.selected = this._previousNode(); |
| 58 }, |
| 59 |
| 60 /** |
| 61 * Returns an array of all items. |
| 62 * |
| 63 * @property items |
| 64 * @type array |
| 65 */ |
| 66 get items() { |
| 67 return Polymer.dom(this.$.items).getDistributedNodes(); |
| 68 }, |
| 69 |
| 70 _nextNode: function() { |
| 71 var items = this.items; |
| 72 var index = this._selectedIndex; |
| 73 var newIndex = index; |
| 74 do { |
| 75 newIndex = (newIndex + 1) % items.length; |
| 76 if (newIndex === index) { |
| 77 break; |
| 78 } |
| 79 } while (items[newIndex].disabled); |
| 80 return this._valueForNode(items[newIndex]); |
| 81 }, |
| 82 |
| 83 _previousNode: function() { |
| 84 var items = this.items; |
| 85 var index = this._selectedIndex; |
| 86 var newIndex = index; |
| 87 do { |
| 88 newIndex = (newIndex || items.length) - 1; |
| 89 if (newIndex === index) { |
| 90 break; |
| 91 } |
| 92 } while (items[newIndex].disabled); |
| 93 return this._valueForNode(items[newIndex]); |
| 94 }, |
| 95 |
| 96 _selectIndex: function(index) { |
| 97 if (index == this._selectedIndex) |
| 98 return; |
| 99 |
| 100 var nodes = this.items; |
| 101 |
| 102 // If there was a previously selected node, deselect it. |
| 103 if (nodes[this._selectedIndex]) { |
| 104 nodes[this._selectedIndex].checked = false; |
| 105 } |
| 106 |
| 107 // Select a new node. |
| 108 nodes[index].checked = true; |
| 109 nodes[index].focus(); |
| 110 this._selectedIndex = index; |
| 111 }, |
| 112 |
| 113 _valueForNode: function(node) { |
| 114 return node["name"] || node.getAttribute("name"); |
| 115 }, |
| 116 |
| 117 // Finds an item with value == |value| and return its index. |
| 118 _valueToIndex: function(items, value) { |
| 119 for (var index = 0, node; (node = items[index]); index++) { |
| 120 if (this._valueForNode(node) == value) { |
| 121 return index; |
| 122 } |
| 123 } |
| 124 // If no item found, the value itself is probably the index. |
| 125 return value; |
| 126 } |
| 127 }); |
OLD | NEW |