third_party/polymer/v1_0/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-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>