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

Side by Side Diff: third_party/polymer/components/paper-toggle-button/paper-toggle-button.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix unit test Created 5 years, 5 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 unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10 <!--
11 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
12 by tapping or by dragging the swtich.
13
14 Example:
15
16 <paper-toggle-button></paper-toggle-button>
17
18 Styling toggle button:
19
20 To change the toggle color:
21
22 paper-toggle-button::shadow .toggle {
23 background-color: #9c27b0;
24 }
25
26 To change the ink color:
27
28 paper-toggle-button::shadow .toggle-ink {
29 color: #009688;
30 }
31
32 To change the checked toggle color:
33
34 paper-toggle-button::shadow [checked] .toggle {
35 background-color: #4285f4;
36 }
37
38 To change the checked ink color:
39
40 paper-toggle-button::shadow [checked] .toggle-ink {
41 color: #4285f4;
42 }
43
44 To change the toggle bar and toggle button colors separately:
45
46 paper-toggle-button::shadow .toggle-bar {
47 background-color: #5677fc;
48 }
49
50 paper-toggle-button::shadow .toggle-button {
51 background-color: #9c27b0;
52 }
53
54 @group Paper Elements
55 @element paper-toggle-button
56 @homepage github.io
57 -->
58
59 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
60 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
61
62 <polymer-element name="paper-toggle-button" attributes="checked disabled" role=" button" aria-pressed="false" tabindex="0">
63 <template>
64
65 <link rel="stylesheet" href="paper-toggle-button.css">
66
67 <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a1 1y-keys>
68
69 <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
70
71 <div id="toggleBar" class="toggle toggle-bar"></div>
72
73 <div id="toggleButton" class="toggle toggle-button">
74 <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
75 </div>
76
77 </div>
78
79 </template>
80 <script>
81
82 Polymer('paper-toggle-button', {
83
84 /**
85 * Fired when the checked state changes due to user interaction.
86 *
87 * @event change
88 */
89
90 /**
91 * Fired when the checked state changes.
92 *
93 * @event core-change
94 */
95
96 /**
97 * Gets or sets the state, `true` is checked and `false` is unchecked.
98 *
99 * @attribute checked
100 * @type boolean
101 * @default false
102 */
103 checked: false,
104
105 /**
106 * If true, the toggle button is disabled. A disabled toggle button cannot
107 * be tapped or dragged to change the checked state.
108 *
109 * @attribute disabled
110 * @type boolean
111 * @default false
112 */
113 disabled: false,
114
115 eventDelegates: {
116 down: 'downAction',
117 up: 'upAction',
118 tap: 'tap',
119 trackstart: 'trackStart',
120 trackx: 'trackx',
121 trackend: 'trackEnd'
122 },
123
124 downAction: function(e) {
125 var rect = this.$.ink.getBoundingClientRect();
126 this.$.ink.downAction({
127 x: rect.left + rect.width / 2,
128 y: rect.top + rect.height / 2
129 });
130 },
131
132 upAction: function(e) {
133 this.$.ink.upAction();
134 },
135
136 tap: function() {
137 if (this.disabled) {
138 return;
139 }
140 this.checked = !this.checked;
141 this.fire('change');
142 },
143
144 trackStart: function(e) {
145 if (this.disabled) {
146 return;
147 }
148 this._w = this.$.toggleBar.offsetWidth / 2;
149 e.preventTap();
150 },
151
152 trackx: function(e) {
153 this._x = Math.min(this._w,
154 Math.max(0, this.checked ? this._w + e.dx : e.dx));
155 this.$.toggleButton.classList.add('dragging');
156 var s = this.$.toggleButton.style;
157 s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
158 },
159
160 trackEnd: function() {
161 var s = this.$.toggleButton.style;
162 s.transform = s.webkitTransform = '';
163 this.$.toggleButton.classList.remove('dragging');
164 var old = this.checked;
165 this.checked = Math.abs(this._x) > this._w / 2;
166 if (this.checked !== old) {
167 this.fire('change');
168 }
169 },
170
171 checkedChanged: function() {
172 this.setAttribute('aria-pressed', Boolean(this.checked));
173 this.fire('core-change');
174 }
175
176 });
177
178 </script>
179 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698