Index: third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html |
diff --git a/third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html b/third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7960f2779ca1e516dd65320225fbf309b919e22f |
--- /dev/null |
+++ b/third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html |
@@ -0,0 +1,186 @@ |
+<!-- |
+@license |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../iron-selector/iron-selector.html"> |
+<link rel="import" href="../paper-radio-button/paper-radio-button.html"> |
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> |
+ |
+<!-- |
+`paper-radio-group` allows user to select only one radio button from a set. |
+Checking one radio button that belongs to a radio group unchecks any |
+previously checked radio button within the same group. Use |
+`selected` to get or set the selected radio button. |
+ |
+Example: |
+ |
+ <paper-radio-group selected="small"> |
+ <paper-radio-button name="small" label="Small"></paper-radio-button> |
+ <paper-radio-button name="medium" label="Medium"></paper-radio-button> |
+ <paper-radio-button name="large" label="Large"></paper-radio-button> |
+ </paper-radio-group> |
+ |
+See <a href="paper-radio-button.html">paper-radio-button</a> for more |
+information about `paper-radio-button`. |
+ |
+@group Paper Elements |
+@element paper-radio-group |
+@hero hero.svg |
+@demo demo/index.html |
+--> |
+ |
+<dom-module name="paper-radio-group"> |
+ <style> |
+ :host { |
+ display: inline-block; |
+ } |
+ |
+ iron-selector ::content > * { |
+ padding: 12px; |
+ } |
+ </style> |
+ |
+ <template> |
+ <iron-selector selected="{{selected}}" attr-for-selected="name" |
+ selectable="paper-radio-button"> |
+ <content id="items" select="*"></content> |
+ </iron-selector> |
+ </template> |
+ |
+</dom-module> |
+ |
+<script> |
+ Polymer({ |
+ is: 'paper-radio-group', |
+ |
+ behaviors: [ |
+ Polymer.IronA11yKeysBehavior |
+ ], |
+ |
+ hostAttributes: { |
+ role: 'radiogroup', |
+ tabindex: 0 |
+ }, |
+ |
+ properties: { |
+ /** |
+ * Fired when the selected element changes to user interaction. |
+ * |
+ * @event paper-radio-group-changed |
+ */ |
+ |
+ /** |
+ * Gets or sets the selected element. Use the `name` attribute of the |
+ * <paper-radio-button> that should be selected. |
+ * |
+ * @attribute selected |
+ * @type String |
+ * @default null |
+ */ |
+ |
+ selected: { |
+ type: String, |
+ value: null, |
+ notify: true, |
+ reflectToAttribute: true, |
+ observer: "_selectedChanged" |
+ } |
+ }, |
+ |
+ keyBindings: { |
+ 'left up': '_selectPrevious', |
+ 'right down': '_selectNext', |
+ }, |
+ |
+ _selectedChanged: function() { |
+ // TODO: This only needs to be async while a domReady event is unavailable. |
+ this.async(function() { |
+ this._selectIndex(this._valueToIndex(this.items, this.selected)); |
+ this.fire('paper-radio-group-changed'); |
+ }); |
+ }, |
+ |
+ _selectNext: function() { |
+ this.selected = this._nextNode(); |
+ }, |
+ |
+ _selectPrevious: function() { |
+ this.selected = this._previousNode(); |
+ }, |
+ |
+ /** |
+ * Returns an array of all items. |
+ * |
+ * @property items |
+ * @type array |
+ */ |
+ get items() { |
+ return Polymer.dom(this.$.items).getDistributedNodes(); |
+ }, |
+ |
+ _nextNode: function() { |
+ var items = this.items; |
+ var index = this._selectedIndex; |
+ var newIndex = index; |
+ do { |
+ newIndex = (newIndex + 1) % items.length; |
+ if (newIndex === index) { |
+ break; |
+ } |
+ } while (items[newIndex].disabled); |
+ return this._valueForNode(items[newIndex]); |
+ }, |
+ |
+ _previousNode: function() { |
+ var items = this.items; |
+ var index = this._selectedIndex; |
+ var newIndex = index; |
+ do { |
+ newIndex = (newIndex || items.length) - 1; |
+ if (newIndex === index) { |
+ break; |
+ } |
+ } while (items[newIndex].disabled); |
+ return this._valueForNode(items[newIndex]); |
+ }, |
+ |
+ _selectIndex: function(index) { |
+ if (index == this._selectedIndex) |
+ return; |
+ |
+ var nodes = this.items; |
+ |
+ // If there was a previously selected node, deselect it. |
+ if (nodes[this._selectedIndex]) { |
+ nodes[this._selectedIndex].checked = false; |
+ } |
+ |
+ // Select a new node. |
+ nodes[index].checked = true; |
+ nodes[index].focus(); |
+ this._selectedIndex = index; |
+ }, |
+ |
+ _valueForNode: function(node) { |
+ return node["name"] || node.getAttribute("name"); |
+ }, |
+ |
+ // Finds an item with value == |value| and return its index. |
+ _valueToIndex: function(items, value) { |
+ for (var index = 0, node; (node = items[index]); index++) { |
+ if (this._valueForNode(node) == value) { |
+ return index; |
+ } |
+ } |
+ // If no item found, the value itself is probably the index. |
+ return value; |
+ } |
+ }); |
+</script> |