Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Unified Diff: third_party/polymer/v0_8/components/paper-radio-group/paper-radio-group.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698