RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/paper-radio-group/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+paper-radio-group
+=================
+`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:
+```html
+<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`.

data/app/assets/components/paper-radio-group/bower.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "paper-radio-group",
+  "version": "1.0.1",
+  "description": "A group of material design radio buttons",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "radio",
+    "control"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-radio-group"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-radio-group",
+  "ignore": [],
+  "dependencies": {
+    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
+    "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "web-component-tester": "*",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "paper-radio-button": "PolymerElements/paper-radio-button#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-radio-group/demo/index.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+  <head>
+    <title>paper-radio-group demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../paper-radio-button/paper-radio-button.html">
+    <link rel="import" href="../paper-radio-group.html">
+    <link rel="import" href="../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../paper-styles/demo-pages.html">
+    <style is="custom-style">
+      .horizontal-section {
+        min-width: 200px;
+      }
+      paper-radio-button.blue {
+        --paper-radio-button-checked-color: var(--paper-light-blue-500);
+        --paper-radio-button-checked-ink-color: var(--paper-light-blue-500);
+        --paper-radio-button-unchecked-color: var(--paper-light-blue-900);
+        --paper-radio-button-unchecked-ink-color: var(--paper-light-blue-900);
+      }
+      paper-radio-button.red {
+        --paper-radio-button-checked-color: var(--paper-red-500);
+        --paper-radio-button-checked-ink-color: var(--paper-red-500);
+        --paper-radio-button-unchecked-color: var(--paper-red-900);
+        --paper-radio-button-unchecked-ink-color: var(--paper-red-900);
+      }
+      paper-radio-button.green {
+        --paper-radio-button-checked-color: var(--paper-green-500);
+        --paper-radio-button-checked-ink-color: var(--paper-green-500);
+        --paper-radio-button-unchecked-color: var(--paper-green-900);
+        --paper-radio-button-unchecked-ink-color: var(--paper-green-900);
+      }
+      paper-radio-button.orange {
+        --paper-radio-button-checked-color: var(--paper-orange-500);
+        --paper-radio-button-checked-ink-color: var(--paper-orange-500);
+        --paper-radio-button-unchecked-color: var(--paper-orange-900);
+        --paper-radio-button-unchecked-ink-color: var(--paper-orange-900);
+      }
+      paper-radio-button {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="horizontal center-justified layout">
+      <div>
+        <h4>Enabled</h4>
+        <div class="horizontal-section">
+          <paper-radio-group selected="c">
+            <paper-radio-button name="o">Oxygen</paper-radio-button>
+            <paper-radio-button name="c">Carbon</paper-radio-button>
+            <paper-radio-button name="h">Hydrogen</paper-radio-button>
+            <paper-radio-button name="n">Nitrogen</paper-radio-button>
+            <paper-radio-button name="ca">Calcium</paper-radio-button>
+          </paper-radio-group>
+        </div>
+      </div>
+      <div>
+        <h4>Disabled</h4>
+        <div class="horizontal-section">
+          <paper-radio-group selected="c">
+            <paper-radio-button name="o">Oxygen</paper-radio-button>
+            <paper-radio-button name="c">Carbon</paper-radio-button>
+            <paper-radio-button name="h" disabled>Hydrogen</paper-radio-button>
+            <paper-radio-button name="n" disabled>Nitrogen</paper-radio-button>
+            <paper-radio-button name="ca">Calcium</paper-radio-button>
+          </paper-radio-group>
+        </div>
+      </div>
+      <div>
+        <h4>Color</h4>
+        <div class="horizontal-section">
+          <paper-radio-group selected="c">
+            <paper-radio-button name="o" class="blue">Oxygen</paper-radio-button>
+            <paper-radio-button name="c" class="red">Carbon</paper-radio-button>
+            <paper-radio-button name="h" class="orange">Hydrogen</paper-radio-button>
+            <paper-radio-button name="n" class="green">Nitrogen</paper-radio-button>
+            <paper-radio-button name="ca" class="blue">Calcium</paper-radio-button>
+          </paper-radio-group>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

data/app/assets/components/paper-radio-group/hero.svg ADDED Viewed

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<circle cx="112.5" cy="41" r="8"/>
+		<path d="M112.5,58c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S121.9,58,112.5,58z M112.5,26c-8.3,0-15,6.7-15,15s6.7,15,15,15
+			s15-6.7,15-15S120.8,26,112.5,26z"/>
+		<circle cx="112.5" cy="85" r="8"/>
+		<path d="M112.5,102c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S121.9,102,112.5,102z M112.5,70c-8.3,0-15,6.7-15,15
+			s6.7,15,15,15s15-6.7,15-15S120.8,70,112.5,70z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-radio-group/index.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>paper-radio-group</title>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../polymer/polymer.html">
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page></iron-component-page>
+  </body>
+</html>

data/app/assets/components/paper-radio-group/paper-radio-group.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@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
@@ -7,9 +8,14 @@ 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
+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.
@@ -21,81 +27,160 @@ Example:
       <paper-radio-button name="large" label="Large"></paper-radio-button>
     </paper-radio-group>
-See <a href="../paper-radio-button/">paper-radio-button</a> for more
+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
-@extends core-selector
-@homepage github.io
+@hero hero.svg
+@demo demo/index.html
 -->
-<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
-<link rel="import" href="../core-selector/core-selector.html">
-<link rel="import" href="../paper-radio-button/paper-radio-button.html">
+<dom-module name="paper-radio-group">
+  <style>
+    :host {
+      display: inline-block;
+    }
-<polymer-element name="paper-radio-group" extends="core-selector" role="radiogroup">
+    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
+    ],
-    <core-a11y-keys target="{{}}" keys="up left" on-keys-pressed="{{selectPrevious}}"></core-a11y-keys>
-    <core-a11y-keys target="{{}}" keys="down right" on-keys-pressed="{{selectNext}}"></core-a11y-keys>
-    <style>
-      :host {
-        display: inline-block;
+    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"
       }
-      polyfill-next-selector { content: ':host > *'; }
-      ::content > * {
-        padding: 12px;
+    },
+    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;
       }
-    </style>
-    <shadow></shadow>
-  </template>
-  <script>
-    Polymer('paper-radio-group', {
-      nextIndex: function(index) {
-        var items = this.items;
-        var newIndex = index;
-        do {
-          newIndex = (newIndex + 1) % items.length;
-          if (newIndex === index) {
-            break;
-          }
-        } while (items[newIndex].disabled);
-        return newIndex;
-      },
-      previousIndex: function(index) {
-        var items = this.items;
-        var newIndex = index;
-        do {
-          newIndex = (newIndex || items.length) - 1;
-          if (newIndex === index) {
-            break;
-          }
-        } while (items[newIndex].disabled);
-        return newIndex;
-      },
-      selectNext: function() {
-        var node = this.selectIndex(this.nextIndex(this.selectedIndex));
-        node.focus();
-      },
-      selectPrevious: function() {
-        var node = this.selectIndex(this.previousIndex(this.selectedIndex));
-        node.focus();
-      },
-      selectedAttribute: 'checked',
-      activateEvent: 'change'
-    });
-  </script>
-</polymer-element>
+      // 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>

data/app/assets/components/paper-radio-group/test/basic.html ADDED Viewed

@@ -0,0 +1,167 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>paper-radio-group basic tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../test-fixture/test-fixture-mocha.js"></script>
+    <script src="../../iron-test-helpers/mock-interactions.js"></script>
+    <link rel="import" href="../../test-fixture/test-fixture.html">
+    <link rel="import" href="../paper-radio-group.html">
+  </head>
+  <body>
+    <test-fixture id="NoSelection">
+      <template>
+        <paper-radio-group>
+          <paper-radio-button name="r1">r1</paper-radio-button>
+          <paper-radio-button name="r2">r2</paper-radio-button>
+          <paper-radio-button name="r3">r3</paper-radio-button>
+        </paper-radio-group>
+      </template>
+    </test-fixture>
+    <test-fixture id="WithSelection">
+      <template>
+        <paper-radio-group selected="r1">
+          <paper-radio-button name="r1">r1</paper-radio-button>
+          <paper-radio-button name="r2">r2</paper-radio-button>
+          <paper-radio-button name="r3">r3</paper-radio-button>
+        </paper-radio-group>
+      </template>
+    </test-fixture>
+    <test-fixture id="WithDisabled">
+      <template>
+        <paper-radio-group selected="r1">
+          <paper-radio-button name="r1">r1</paper-radio-button>
+          <paper-radio-button name="r2" disabled>r2</paper-radio-button>
+          <paper-radio-button name="r3">r3</paper-radio-button>
+        </paper-radio-group>
+      </template>
+    </test-fixture>
+    <script>
+      suite('defaults', function() {
+        var g1;
+        var g2;
+        var g3;
+        setup(function() {
+          g1 = fixture('NoSelection');
+          g2 = fixture('WithSelection');
+          g3 = fixture('WithDisabled');
+        });
+        test('group can have no selection', function () {
+          expect(g1.selected).to.not.be.ok;
+          var items = g1.items;
+          expect(items.length).to.be.equal(3);
+          expect(items[0].checked).to.be.equal(false);
+          expect(items[1].checked).to.be.equal(false);
+          expect(items[2].checked).to.be.equal(false);
+        });
+        test('group can have a selection', function (done) {
+          expect(g2.selected).to.be.ok;
+          var items = g2.items;
+          expect(items.length).to.be.equal(3);
+          g2.addEventListener('paper-radio-group-changed', function () {
+            expect(items[0].checked).to.be.equal(true);
+            expect(items[1].checked).to.be.equal(false);
+            expect(items[2].checked).to.be.equal(false);
+            expect(items[0].getAttribute('name')).to.be.equal(g2.selected);
+            done();
+          });
+        });
+        test('right arrow advances the selection', function (done) {
+          debugger
+          var items = g2.items;
+          // Initially, the first item is checked.
+          var expectedCheckedItem = 0;
+          g2.addEventListener('paper-radio-group-changed', function () {
+            expect(items[expectedCheckedItem].checked).to.be.equal(true);
+            // Right arrow should go to the next item.
+            expectedCheckedItem = 1;
+            var event = new CustomEvent('keydown');
+            event.keyCode = event.code = 39;
+            g2.dispatchEvent(event);
+            done();
+          });
+        });
+        test('left arrow reverses the selection', function (done) {
+          var items = g2.items;
+          // Initially, the first item is checked.
+          var expectedCheckedItem = 0;
+          g2.addEventListener('paper-radio-group-changed', function () {
+            expect(items[expectedCheckedItem].checked).to.be.equal(true);
+            // Left arrow should go to the last item.
+            expectedCheckedItem = 2;
+            var event = new CustomEvent('keydown');
+            event.keyCode = event.code = 37;
+            g2.dispatchEvent(event);
+            done();
+          });
+        });
+        test('selection should skip disabled items', function (done) {
+          var items = g3.items;
+          // Initially, the first item is checked.
+          var expectedCheckedItem = 0;
+          g3.addEventListener('paper-radio-group-changed', function () {
+            expect(items[expectedCheckedItem].checked).to.be.equal(true);
+            // Right arrow should go to the last item, since the second item is
+            // disabled.
+            expectedCheckedItem = 2;
+            var event = new CustomEvent('keydown');
+            event.keyCode = event.code = 39;
+            g3.dispatchEvent(event);
+            done();
+          });
+        });
+        test('clicking should change the selection', function (done) {
+          var items = g2.items;
+          // Initially, the first item is checked.
+          var expectedCheckedItem = 0;
+          g3.addEventListener('paper-radio-group-changed', function () {
+            expect(items[expectedCheckedItem].checked).to.be.equal(true);
+            expectedCheckedItem = 1;
+            MockInteractions.down(items[1]);
+            done();
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/paper-radio-group/test/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>paper-radio-group tests</title>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      WCT.loadSuites([
+        'basic.html'
+      ]);
+    </script>
+  </body>
+</html>