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-selectable.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">Small</paper-radio-button> | |
26 <paper-radio-button name="medium">Medium</paper-radio-button> | |
27 <paper-radio-button name="large">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 :host ::content > * { | |
46 padding: 12px; | |
47 } | |
48 </style> | |
49 | |
50 <template> | |
51 <content id="items" select="*"></content> | |
52 </template> | |
53 | |
54 </dom-module> | |
55 | |
56 <script> | |
57 Polymer({ | |
58 is: 'paper-radio-group', | |
59 | |
60 behaviors: [ | |
61 Polymer.IronA11yKeysBehavior, | |
62 Polymer.IronSelectableBehavior | |
63 ], | |
64 | |
65 hostAttributes: { | |
66 role: 'radiogroup', | |
67 tabindex: 0 | |
68 }, | |
69 | |
70 properties: { | |
71 /** | |
72 * Overriden from Polymer.IronSelectableBehavior | |
73 */ | |
74 attrForSelected: { | |
75 type: String, | |
76 value: 'name' | |
77 }, | |
78 | |
79 /** | |
80 * Overriden from Polymer.IronSelectableBehavior | |
81 */ | |
82 selectedAttribute: { | |
83 type: String, | |
84 value: 'checked' | |
85 }, | |
86 | |
87 /** | |
88 * Overriden from Polymer.IronSelectableBehavior | |
89 */ | |
90 selectable: { | |
91 type: String, | |
92 value: 'paper-radio-button' | |
93 } | |
94 }, | |
95 | |
96 keyBindings: { | |
97 'left up': 'selectPrevious', | |
98 'right down': 'selectNext', | |
99 }, | |
100 | |
101 /** | |
102 * Selects the given value. | |
103 */ | |
104 select: function(value) { | |
105 if (this.selected) { | |
106 var oldItem = this._valueToItem(this.selected); | |
107 | |
108 // Do not allow unchecking the selected item. | |
109 if (this.selected == value) { | |
110 oldItem.checked = true; | |
111 return; | |
112 } | |
113 | |
114 if (oldItem) | |
115 oldItem.checked = false; | |
116 } | |
117 | |
118 Polymer.IronSelectableBehavior.select.apply(this, [value]); | |
119 this.fire('paper-radio-group-changed'); | |
120 }, | |
121 | |
122 /** | |
123 * Selects the previous item. If the previous item is disabled, then it is | |
124 * skipped, and its previous item is selected | |
125 */ | |
126 selectPrevious: function() { | |
127 var length = this.items.length; | |
128 var newIndex = Number(this._valueToIndex(this.selected)); | |
129 | |
130 do { | |
131 newIndex = (newIndex - 1 + length) % length; | |
132 } while (this.items[newIndex].disabled) | |
133 | |
134 this.select(this._indexToValue(newIndex)); | |
135 }, | |
136 | |
137 /** | |
138 * Selects the next item. If the next item is disabled, then it is | |
139 * skipped, and the next item after it is selected. | |
140 */ | |
141 selectNext: function() { | |
142 var length = this.items.length; | |
143 var newIndex = Number(this._valueToIndex(this.selected)); | |
144 | |
145 do { | |
146 newIndex = (newIndex + 1 + length) % length; | |
147 } while (this.items[newIndex].disabled) | |
148 | |
149 this.select(this._indexToValue(newIndex)); | |
150 }, | |
151 }); | |
152 </script> | |
OLD | NEW |