OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 <link rel="import" href="../iron-selector/iron-selector.html"> | |
13 <link rel="import" href="../paper-radio-button/paper-radio-button.html"> | |
14 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | |
15 | |
16 <!-- | |
17 `paper-radio-group` allows user to select only one radio button from a set. | |
18 Checking one radio button that belongs to a radio group unchecks any | |
19 previously checked radio button within the same group. Use | |
20 `selected` to get or set the selected radio button. | |
21 | |
22 Example: | |
23 | |
24 <paper-radio-group selected="small"> | |
25 <paper-radio-button name="small" label="Small"></paper-radio-button> | |
26 <paper-radio-button name="medium" label="Medium"></paper-radio-button> | |
27 <paper-radio-button name="large" label="Large"></paper-radio-button> | |
28 </paper-radio-group> | |
29 | |
30 See <a href="paper-radio-button.html">paper-radio-button</a> for more | |
31 information about `paper-radio-button`. | |
32 | |
33 @group Paper Elements | |
34 @element paper-radio-group | |
35 @hero hero.svg | |
36 @demo demo/index.html | |
37 --> | |
38 | |
39 <dom-module name="paper-radio-group"> | |
40 <style> | |
41 :host { | |
42 display: inline-block; | |
43 } | |
44 | |
45 iron-selector ::content > * { | |
46 padding: 12px; | |
47 } | |
48 </style> | |
49 | |
50 <template> | |
51 <iron-selector selected="{{selected}}" attr-for-selected="name" | |
52 selectable="paper-radio-button"> | |
53 <content id="items" select="*"></content> | |
54 </iron-selector> | |
55 </template> | |
56 | |
57 </dom-module> | |
58 | |
59 <script> | |
60 Polymer({ | |
61 is: 'paper-radio-group', | |
62 | |
63 behaviors: [ | |
64 Polymer.IronA11yKeysBehavior | |
65 ], | |
66 | |
67 hostAttributes: { | |
68 role: 'radiogroup', | |
69 tabindex: 0 | |
70 }, | |
71 | |
72 properties: { | |
73 /** | |
74 * Fired when the selected element changes to user interaction. | |
75 * | |
76 * @event paper-radio-group-changed | |
77 */ | |
78 | |
79 /** | |
80 * Gets or sets the selected element. Use the `name` attribute of the | |
81 * <paper-radio-button> that should be selected. | |
82 * | |
83 * @attribute selected | |
84 * @type String | |
85 * @default null | |
86 */ | |
87 | |
88 selected: { | |
89 type: String, | |
90 value: null, | |
91 notify: true, | |
92 reflectToAttribute: true, | |
93 observer: "_selectedChanged" | |
94 } | |
95 }, | |
96 | |
97 keyBindings: { | |
98 'left up': '_selectPrevious', | |
99 'right down': '_selectNext', | |
100 }, | |
101 | |
102 _selectedChanged: function() { | |
103 // TODO: This only needs to be async while a domReady event is unavailable
. | |
104 this.async(function() { | |
105 this._selectIndex(this._valueToIndex(this.items, this.selected)); | |
106 this.fire('paper-radio-group-changed'); | |
107 }); | |
108 }, | |
109 | |
110 _selectNext: function() { | |
111 this.selected = this._nextNode(); | |
112 }, | |
113 | |
114 _selectPrevious: function() { | |
115 this.selected = this._previousNode(); | |
116 }, | |
117 | |
118 /** | |
119 * Returns an array of all items. | |
120 * | |
121 * @property items | |
122 * @type array | |
123 */ | |
124 get items() { | |
125 return Polymer.dom(this.$.items).getDistributedNodes(); | |
126 }, | |
127 | |
128 _nextNode: function() { | |
129 var items = this.items; | |
130 var index = this._selectedIndex; | |
131 var newIndex = index; | |
132 do { | |
133 newIndex = (newIndex + 1) % items.length; | |
134 if (newIndex === index) { | |
135 break; | |
136 } | |
137 } while (items[newIndex].disabled); | |
138 return this._valueForNode(items[newIndex]); | |
139 }, | |
140 | |
141 _previousNode: function() { | |
142 var items = this.items; | |
143 var index = this._selectedIndex; | |
144 var newIndex = index; | |
145 do { | |
146 newIndex = (newIndex || items.length) - 1; | |
147 if (newIndex === index) { | |
148 break; | |
149 } | |
150 } while (items[newIndex].disabled); | |
151 return this._valueForNode(items[newIndex]); | |
152 }, | |
153 | |
154 _selectIndex: function(index) { | |
155 if (index == this._selectedIndex) | |
156 return; | |
157 | |
158 var nodes = this.items; | |
159 | |
160 // If there was a previously selected node, deselect it. | |
161 if (nodes[this._selectedIndex]) { | |
162 nodes[this._selectedIndex].checked = false; | |
163 } | |
164 | |
165 // Select a new node. | |
166 nodes[index].checked = true; | |
167 nodes[index].focus(); | |
168 this._selectedIndex = index; | |
169 }, | |
170 | |
171 _valueForNode: function(node) { | |
172 return node["name"] || node.getAttribute("name"); | |
173 }, | |
174 | |
175 // Finds an item with value == |value| and return its index. | |
176 _valueToIndex: function(items, value) { | |
177 for (var index = 0, node; (node = items[index]); index++) { | |
178 if (this._valueForNode(node) == value) { | |
179 return index; | |
180 } | |
181 } | |
182 // If no item found, the value itself is probably the index. | |
183 return value; | |
184 } | |
185 }); | |
186 </script> | |
OLD | NEW |