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 |