polymer-paper-elements-rails 0.0.1

data/app/assets/components/paper-radio-button/hero.svg

@@ -0,0 +1,22 @@
+<?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="63" r="8"/>
+		<path d="M112.5,80c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S121.9,80,112.5,80z M112.5,48c-8.3,0-15,6.7-15,15s6.7,15,15,15
+			s15-6.7,15-15S120.8,48,112.5,48z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-radio-button/paper-radio-button.css

@@ -0,0 +1,109 @@
+/*
+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
+*/
+
+:host {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+#radioContainer {
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+:host #ink {
+  position: absolute;
+  top: -16px;
+  left: -16px;
+  width: 48px;
+  height: 48px;
+  color: var(--paper-radio-button-unchecked-ink-color);
+  opacity: 0.6;
+}
+
+:host #ink[checked] {
+  color: var(--paper-radio-button-checked-ink-color);
+}
+
+:host #offRadio {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: solid 2px;
+  border-color: var(--paper-radio-button-unchecked-color);
+  transition: border-color 0.28s;
+}
+
+:host #onRadio {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--paper-radio-button-checked-color);
+  -webkit-transform: scale(0);
+  transform: scale(0);
+  transition: -webkit-transform ease 0.28s;
+  transition: transform ease 0.28s;
+}
+
+:host([checked]) #offRadio {
+  border-color: var(--paper-radio-button-checked-color);
+}
+
+:host([checked]) #onRadio {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+#radioLabel {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 10px;
+  white-space: normal;
+  pointer-events: none;
+  color: var(--paper-radio-button-label-color);
+}
+
+#radioLabel[hidden] {
+  display: none;
+}
+
+/* disabled state */
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) #offRadio {
+  border-color: var(--paper-radio-button-unchecked-color);
+  opacity: 0.5;
+}
+
+:host([disabled][checked]) #onRadio {
+  background-color: var(--paper-radio-button-unchecked-color);
+  opacity: 0.5;
+}
+
+:host([disabled]) #radioLabel {
+  /* slightly darker than the button, so that it's readable */
+  opacity: 0.65;
+}

data/app/assets/components/paper-radio-button/paper-radio-button.html

@@ -0,0 +1,148 @@
+<!--
+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="../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
+
+<!--
+`paper-radio-button` is a button that can be either checked or unchecked.
+User can tap the radio button to check it.  But it cannot be unchecked by
+tapping once checked.
+
+Use `paper-radio-group` to group a set of radio buttons.  When radio buttons
+are inside a radio group, only one radio button in the group can be checked.
+
+Example:
+
+    <paper-radio-button></paper-radio-button>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-radio-button-unchecked-color` | Radio button color when the input is not checked | `--primary-text-color`
+`--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
+`--paper-radio-button-checked-color` | Radio button color when the input is checked | `--default-primary-color`
+`--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
+`--paper-radio-button-label-color` | Label color | `--primary-text-color`
+
+@group Paper Elements
+@element paper-radio-button
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<style is="custom-style">
+  :root {
+    --paper-radio-button-unchecked-color: var(--primary-text-color);
+    --paper-radio-button-unchecked-ink-color: var(--primary-text-color);
+
+    --paper-radio-button-checked-color: var(--default-primary-color);
+    --paper-radio-button-checked-ink-color: var(--default-primary-color);
+
+    --paper-radio-button-label-color: var(--primary-text-color);
+  }
+</style>
+
+<dom-module id="paper-radio-button">
+
+  <link rel="import" type="css" href="paper-radio-button.css">
+
+  <template>
+
+    <div id="radioContainer">
+      <div id="offRadio"></div>
+      <div id="onRadio"></div>
+      <paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
+    </div>
+
+    <div id="radioLabel" aria-hidden="true"><content></content></div>
+
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-radio-button',
+
+      behaviors: [
+        Polymer.PaperInkyFocusBehavior
+      ],
+
+      hostAttributes: {
+        role: 'radio',
+        'aria-checked': false,
+        tabindex: 0
+      },
+
+      properties: {
+        /**
+         * Fired when the checked state changes due to user interaction.
+         *
+         * @event change
+         */
+
+        /**
+         * Fired when the checked state changes.
+         *
+         * @event iron-change
+         */
+
+        /**
+         * Gets or sets the state, `true` is checked and `false` is unchecked.
+         */
+        checked: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+          notify: true,
+          observer: '_checkedChanged'
+        },
+
+        /**
+         * If true, the button toggles the active state with each tap or press
+         * of the spacebar.
+         */
+        toggles: {
+          type: Boolean,
+          value: true,
+          reflectToAttribute: true
+        }
+      },
+
+      ready: function() {
+        if (Polymer.dom(this).textContent == '') {
+          this.$.radioLabel.hidden = true;
+        } else {
+          this.setAttribute('aria-label', Polymer.dom(this).textContent);
+        }
+        this._isReady = true;
+      },
+
+      _buttonStateChanged: function() {
+        if (this.disabled) {
+          return;
+        }
+        if (this._isReady) {
+          this.checked = this.active;
+        }
+      },
+
+      _checkedChanged: function() {
+        this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        this.active = this.checked;
+        this.fire('iron-change');
+      }
+    })
+  </script>
+
+</dom-module>

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

@@ -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/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>