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

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

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 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 @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.g ithub.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/CONTRI BUTORS.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/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/color.html">
13 <link rel="import" href="../paper-styles/default-theme.html">
14 <link rel="import" href="../paper-ripple/paper-ripple.html">
15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
16
17 <!--
18 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
19 by tapping or by dragging the switch.
20
21 Example:
22
23 <paper-toggle-button></paper-toggle-button>
24
25 ### Styling
26
27 The following custom properties and mixins are available for styling:
28
29 Custom property | Description | Default
30 ----------------|-------------|----------
31 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
32 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
33 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t he input is not checked | `--dark-primary-color`
34 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--google-green-500`
35 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--google-green-500`
36 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
37
38 @group Paper Elements
39 @element paper-toggle-button
40 @hero hero.svg
41 @demo demo/index.html
42 -->
43
44 <dom-module id="paper-toggle-button">
45
46 <link rel="import" type="css" href="paper-toggle-button.css">
47
48 <template>
49
50 <div id="toggleContainer">
51 <div id="toggleBar" class="toggle-bar"></div>
52 <div id="toggleButton" class="toggle-button">
53 <paper-ripple id="ink" class="toggle-ink circle" recenters></paper-rippl e>
54 </div>
55 </div>
56
57 </template>
58
59 <script>
60 Polymer({
61 is: 'paper-toggle-button',
62
63 behaviors: [
64 Polymer.PaperInkyFocusBehavior
65 ],
66
67 hostAttributes: {
68 role: 'button',
69 'aria-pressed': 'false',
70 tabindex: 0
71 },
72
73 properties: {
74 /**
75 * Fired when the checked state changes due to user interaction.
76 *
77 * @event change
78 */
79 /**
80 * Fired when the checked state changes.
81 *
82 * @event iron-change
83 */
84 /**
85 * Gets or sets the state, `true` is checked and `false` is unchecked.
86 *
87 * @attribute checked
88 * @type boolean
89 * @default false
90 */
91 checked: {
92 type: Boolean,
93 value: false,
94 reflectToAttribute: true,
95 notify: true,
96 observer: '_checkedChanged'
97 },
98
99 /**
100 * If true, the button toggles the active state with each tap or press
101 * of the spacebar.
102 *
103 * @attribute toggles
104 * @type boolean
105 * @default true
106 */
107 toggles: {
108 type: Boolean,
109 value: true,
110 reflectToAttribute: true
111 }
112 },
113
114 listeners: {
115 track: '_ontrack'
116 },
117
118 ready: function() {
119 this._isReady = true;
120 },
121
122 // button-behavior hook
123 _buttonStateChanged: function() {
124 if (this.disabled) {
125 return;
126 }
127 if (this._isReady) {
128 this.checked = this.active;
129 }
130 },
131
132 _checkedChanged: function(checked) {
133 this.active = this.checked;
134 this.fire('iron-change');
135 },
136
137 _ontrack: function(event) {
138 var track = event.detail;
139 if (track.state === 'start') {
140 this._trackStart(track);
141 } else if (track.state === 'track') {
142 this._trackMove(track);
143 } else if (track.state === 'end') {
144 this._trackEnd(track);
145 }
146 },
147
148 _trackStart: function(track) {
149 this._width = this.$.toggleBar.offsetWidth / 2;
150 /*
151 * keep an track-only check state to keep the dragging behavior smooth
152 * while toggling activations
153 */
154 this._trackChecked = this.checked;
155 this.$.toggleButton.classList.add('dragging');
156 },
157
158 _trackMove: function(track) {
159 var dx = track.dx;
160 this._x = Math.min(this._width,
161 Math.max(0, this._trackChecked ? this._width + dx : dx));
162 this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
163 this._userActivate(this._x > (this._width / 2));
164 },
165
166 _trackEnd: function(track) {
167 this.$.toggleButton.classList.remove('dragging');
168 this.transform('', this.$.toggleButton);
169 }
170
171 });
172 </script>
173
174 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698