Skip to content

Commit c01e54e

Browse files
notwaldorfnotwaldorf
committed
Merge pull request #3 from PolymerElements/add-focus-behaviour
Add an inky focus behaviour for radio button/checkboxes
2 parents 516c874 + 289cd04 commit c01e54e

5 files changed

Lines changed: 183 additions & 4 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎bower.json‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
11
{
22
"name": "paper-behaviors",
3+
"version": "0.8.0",
4+
"authors": [
5+
"The Polymer Authors"
6+
],
7+
"keywords": [
8+
"web-components",
9+
"web-component",
10+
"polymer"
11+
],
312
"private": true,
13+
"repository": {
14+
"type": "git",
15+
"url": "git://github.com/PolymerElements/paper-behaviors"
16+
},
17+
"license": "MIT",
18+
"homepage": "https://github.com/PolymerElements/paper-behaviors",
19+
"ignore": [
20+
],
421
"dependencies": {
522
"polymer": "polymer/polymer#v0.8.0-rc.7",
6-
"iron-behaviors": "polymerelements/iron-behaviors#^0.8.0"
23+
"iron-behaviors": "PolymerElements/iron-behaviors#^0.8.0"
724
},
825
"devDependencies": {
9-
"paper-card": "polymerelements/paper-card#v0.8.0",
26+
"paper-card": "PolymerElements/paper-card#^0.8.0",
27+
"paper-ripple": "PolymerElements/paper-ripple#^0.8.0",
1028
"iron-test-helpers": "polymerelements/iron-test-helpers#^0.8.0",
1129
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
12-
"web-component-tester": "*"
30+
"web-component-tester": "Polymer/web-component-tester#^2.2.3"
1331
}
1432
}

‎demo/index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
1616
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
1717

18-
<title>simple-button</title>
18+
<title>paper-behaviors demo</title>
1919

2020
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2121

2222
<link href="paper-button.html" rel="import">
23+
<link href="paper-radio-button.html" rel="import">
2324

2425
<style>
2526

@@ -46,5 +47,10 @@ <h3>Disabled</h3>
4647

4748
<paper-button disabled tabindex="0">Hello World</paper-button>
4849

50+
<h3>Radio button with focus state</h3>
51+
52+
<paper-radio-button tabindex="0"></paper-radio-button>
53+
54+
4955
</body>
5056
</html>

‎demo/paper-radio-button.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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="../../paper-ripple/paper-ripple.html">
13+
<link rel="import" href="../paper-radio-button-behavior.html">
14+
15+
<dom-module id="paper-radio-button">
16+
17+
<style>
18+
:host {
19+
display: inline-block;
20+
white-space: nowrap;
21+
}
22+
23+
:host(:focus) {
24+
outline: none
25+
}
26+
27+
#radioContainer {
28+
display: inline-block;
29+
position: relative;
30+
width: 16px;
31+
height: 16px;
32+
cursor: pointer;
33+
vertical-align: middle;
34+
}
35+
36+
#offRadio {
37+
position: absolute;
38+
top: 0px;
39+
left: 0px;
40+
width: 12px;
41+
height: 12px;
42+
border-radius: 50%;
43+
border: solid 2px;
44+
border-color: black;
45+
transition: border-color 0.28s;
46+
}
47+
48+
#onRadio {
49+
position: absolute;
50+
top: 4px;
51+
left: 4px;
52+
width: 8px;
53+
height: 8px;
54+
border-radius: 50%;
55+
background-color: red;
56+
-webkit-transform: scale(0);
57+
transform: scale(0);
58+
transition: -webkit-transform ease 0.28s;
59+
transition: transform ease 0.28s;
60+
}
61+
62+
:host([disabled]) {
63+
opacity: 0.3;
64+
pointer-events: none;
65+
}
66+
67+
:host([pressed]) #offRadio,
68+
:host([active]) #offRadio {
69+
border-color: red;
70+
}
71+
72+
:host([pressed]) #onRadio,
73+
:host([active]) #onRadio {
74+
-webkit-transform: scale(1);
75+
transform: scale(1);
76+
}
77+
78+
#ink {
79+
position: absolute;
80+
top: -16px;
81+
left: -16px;
82+
width: 48px;
83+
height: 48px;
84+
}
85+
86+
</style>
87+
88+
<template>
89+
<div id="radioContainer">
90+
<div id="offRadio"></div>
91+
<div id="onRadio"></div>
92+
<paper-ripple id="ink" class="circle" recenters></paper-ripple>
93+
</div>
94+
</template>
95+
96+
<script>
97+
98+
Polymer({
99+
100+
behaviors: [
101+
Polymer.PaperRadioButtonBehavior
102+
],
103+
104+
ready: function() {
105+
this.toggles = true;
106+
}
107+
108+
});
109+
110+
</script>
111+
112+
</dom-module>

‎paper-radio-button-behavior.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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-behaviors/iron-button-state.html">
13+
14+
<script>
15+
16+
Polymer.PaperRadioButtonInk = {
17+
18+
observers: [
19+
`_focusedChanged(focused)`
20+
],
21+
22+
_focusedChanged: function(focused) {
23+
if (!this.$.ink)
24+
return;
25+
26+
if (focused) {
27+
var rect = this.$.ink.getBoundingClientRect();
28+
this.$.ink.mousedownAction();
29+
} else {
30+
this.$.ink.mouseupAction();
31+
}
32+
}
33+
34+
};
35+
36+
Polymer.PaperRadioButtonBehavior = [
37+
Polymer.IronControlState,
38+
Polymer.IronButtonState,
39+
Polymer.PaperRadioButtonInk
40+
];
41+
42+
</script>

0 commit comments

Comments
 (0)