third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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>