Merge pull request #3 from PolymerElements/add-focus-behaviour

Add an inky focus behaviour for radio button/checkboxes

.gitignore

@@ -0,0 +1 @@
+bower_components

bower.json

@@ -1,14 +1,32 @@
 {
   "name": "paper-behaviors",
+  "version": "0.8.0",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer"
+  ],
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-behaviors"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/PolymerElements/paper-behaviors",
+  "ignore": [
+  ],
   "dependencies": {
     "polymer": "polymer/polymer#v0.8.0-rc.7",
-    "iron-behaviors": "polymerelements/iron-behaviors#^0.8.0"
+    "iron-behaviors": "PolymerElements/iron-behaviors#^0.8.0"
   },
   "devDependencies": {
-    "paper-card": "polymerelements/paper-card#v0.8.0",
+    "paper-card": "PolymerElements/paper-card#^0.8.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^0.8.0",
     "iron-test-helpers": "polymerelements/iron-test-helpers#^0.8.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
-    "web-component-tester": "*"
+    "web-component-tester": "Polymer/web-component-tester#^2.2.3"
   }
 }

demo/index.html

@@ -15,11 +15,12 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-  <title>simple-button</title>
+  <title>paper-behaviors demo</title>
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link href="paper-button.html" rel="import">
+  <link href="paper-radio-button.html" rel="import">
 
   <style>
 
@@ -46,5 +47,10 @@ <h3>Disabled</h3>
 
   <paper-button disabled tabindex="0">Hello World</paper-button>
 
+  <h3>Radio button with focus state</h3>
+
+  <paper-radio-button tabindex="0"></paper-radio-button>
+
+
 </body>
 </html>

demo/paper-radio-button.html

@@ -0,0 +1,112 @@
+<!--
+@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="../../paper-ripple/paper-ripple.html">
+<link rel="import" href="../paper-radio-button-behavior.html">
+
+<dom-module id="paper-radio-button">
+
+  <style>
+  :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;
+  }
+
+  #offRadio {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: solid 2px;
+    border-color: black;
+    transition: border-color 0.28s;
+  }
+
+  #onRadio {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: red;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transition: -webkit-transform ease 0.28s;
+    transition: transform ease 0.28s;
+  }
+
+  :host([disabled]) {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  :host([pressed]) #offRadio,
+  :host([active]) #offRadio {
+    border-color: red;
+  }
+
+  :host([pressed]) #onRadio,
+  :host([active]) #onRadio {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  #ink {
+    position: absolute;
+    top: -16px;
+    left: -16px;
+    width: 48px;
+    height: 48px;
+  }
+
+  </style>
+
+  <template>
+    <div id="radioContainer">
+      <div id="offRadio"></div>
+      <div id="onRadio"></div>
+      <paper-ripple id="ink" class="circle" recenters></paper-ripple>
+    </div>
+  </template>
+
+  <script>
+
+    Polymer({
+
+      behaviors: [
+        Polymer.PaperRadioButtonBehavior
+      ],
+
+      ready: function() {
+        this.toggles = true;
+      }
+
+    });
+
+  </script>
+
+</dom-module>

paper-radio-button-behavior.html

@@ -0,0 +1,42 @@
+<!--
+@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-behaviors/iron-button-state.html">
+
+<script>
+
+  Polymer.PaperRadioButtonInk = {
+
+    observers: [
+      `_focusedChanged(focused)`
+    ],
+
+    _focusedChanged: function(focused) {
+      if (!this.$.ink)
+        return;
+
+      if (focused) {
+        var rect = this.$.ink.getBoundingClientRect();
+        this.$.ink.mousedownAction();
+      } else {
+        this.$.ink.mouseupAction();
+      }
+    }
+
+  };
+
+  Polymer.PaperRadioButtonBehavior = [
+    Polymer.IronControlState,
+    Polymer.IronButtonState,
+    Polymer.PaperRadioButtonInk
+  ];
+
+</script>