← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-toggle-button/paper-toggle-button.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-toggle-button/paper-toggle-button.html
 
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-flex-layout/iron-flex-layout.html">
 
13
<link rel="import" href="../paper-styles/color.html">
 
14
<link rel="import" href="../paper-styles/default-theme.html">
 
15
<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
 
16
 
 
17
<!--
 
18
Material design: [Switch](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch)
 
19
 
 
20
`paper-toggle-button` provides a ON/OFF switch that user can toggle the state
 
21
by tapping or by dragging the switch.
 
22
 
 
23
Example:
 
24
 
 
25
    <paper-toggle-button></paper-toggle-button>
 
26
 
 
27
### Styling
 
28
 
 
29
The following custom properties and mixins are available for styling:
 
30
 
 
31
Custom property | Description | Default
 
32
----------------|-------------|----------
 
33
`--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
 
34
`--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
 
35
`--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
 
36
`--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--primary-color`
 
37
`--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--primary-color`
 
38
`--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
 
39
`--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the input is not checked | `{}`
 
40
`--paper-toggle-button-unchecked-button` | Mixin applied to the slider button when the input is not checked | `{}`
 
41
`--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}`
 
42
`--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}`
 
43
`--paper-toggle-button-label-color` | Label color | `--primary-text-color`
 
44
`--paper-toggle-button-label-spacing` | Spacing between the label and the button | `8px`
 
45
 
 
46
This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
 
47
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
 
48
 
 
49
@group Paper Elements
 
50
@element paper-toggle-button
 
51
@hero hero.svg
 
52
@demo demo/index.html
 
53
-->
 
54
 
 
55
<dom-module id="paper-toggle-button">
 
56
  <template strip-whitespace>
 
57
 
 
58
    <style>
 
59
      :host {
 
60
        display: inline-block;
 
61
        @apply(--layout-horizontal);
 
62
        @apply(--layout-center);
 
63
        @apply(--paper-font-common-base);
 
64
      }
 
65
 
 
66
      :host([disabled]) {
 
67
        pointer-events: none;
 
68
      }
 
69
 
 
70
      :host(:focus) {
 
71
        outline:none;
 
72
      }
 
73
 
 
74
      .toggle-bar {
 
75
        position: absolute;
 
76
        height: 100%;
 
77
        width: 100%;
 
78
        border-radius: 8px;
 
79
        pointer-events: none;
 
80
        opacity: 0.4;
 
81
        transition: background-color linear .08s;
 
82
        background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
 
83
 
 
84
        @apply(--paper-toggle-button-unchecked-bar);
 
85
      }
 
86
 
 
87
      .toggle-button {
 
88
        position: absolute;
 
89
        top: -3px;
 
90
        left: 0;
 
91
        height: 20px;
 
92
        width: 20px;
 
93
        border-radius: 50%;
 
94
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
 
95
        transition: -webkit-transform linear .08s, background-color linear .08s;
 
96
        transition: transform linear .08s, background-color linear .08s;
 
97
        will-change: transform;
 
98
        background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
 
99
 
 
100
        @apply(--paper-toggle-button-unchecked-button);
 
101
      }
 
102
 
 
103
      .toggle-button.dragging {
 
104
        -webkit-transition: none;
 
105
        transition: none;
 
106
      }
 
107
 
 
108
      :host([checked]:not([disabled])) .toggle-bar {
 
109
        opacity: 0.5;
 
110
        background-color: var(--paper-toggle-button-checked-bar-color, --primary-color);
 
111
 
 
112
        @apply(--paper-toggle-button-checked-bar);
 
113
      }
 
114
 
 
115
      :host([disabled]) .toggle-bar {
 
116
        background-color: #000;
 
117
        opacity: 0.12;
 
118
      }
 
119
 
 
120
      :host([checked]) .toggle-button {
 
121
        -webkit-transform: translate(16px, 0);
 
122
        transform: translate(16px, 0);
 
123
      }
 
124
 
 
125
      :host([checked]:not([disabled])) .toggle-button {
 
126
        background-color: var(--paper-toggle-button-checked-button-color, --primary-color);
 
127
 
 
128
        @apply(--paper-toggle-button-checked-button);
 
129
      }
 
130
 
 
131
      :host([disabled]) .toggle-button {
 
132
        background-color: #bdbdbd;
 
133
        opacity: 1;
 
134
      }
 
135
 
 
136
      .toggle-ink {
 
137
        position: absolute;
 
138
        top: -14px;
 
139
        left: -14px;
 
140
        right: auto;
 
141
        bottom: auto;
 
142
        width: 48px;
 
143
        height: 48px;
 
144
        opacity: 0.5;
 
145
        pointer-events: none;
 
146
        color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
 
147
      }
 
148
 
 
149
      :host([checked]) .toggle-ink {
 
150
        color: var(--paper-toggle-button-checked-ink-color, --primary-color);
 
151
      }
 
152
 
 
153
      .toggle-container {
 
154
        display: inline-block;
 
155
        position: relative;
 
156
        width: 36px;
 
157
        height: 14px;
 
158
        /* The toggle button has an absolute position of -3px; The extra 1px
 
159
        /* accounts for the toggle button shadow box. */
 
160
        margin: 4px 1px;
 
161
      }
 
162
 
 
163
      .toggle-label {
 
164
        position: relative;
 
165
        display: inline-block;
 
166
        vertical-align: middle;
 
167
        padding-left: var(--paper-toggle-button-label-spacing, 8px);
 
168
        pointer-events: none;
 
169
        color: var(--paper-toggle-button-label-color, --primary-text-color);
 
170
      }
 
171
    </style>
 
172
 
 
173
    <div class="toggle-container">
 
174
      <div id="toggleBar" class="toggle-bar"></div>
 
175
      <div id="toggleButton" class="toggle-button"></div>
 
176
    </div>
 
177
 
 
178
    <div class="toggle-label"><content></content></div>
 
179
 
 
180
  </template>
 
181
 
 
182
  <script>
 
183
    Polymer({
 
184
      is: 'paper-toggle-button',
 
185
 
 
186
      behaviors: [
 
187
        Polymer.PaperCheckedElementBehavior
 
188
      ],
 
189
 
 
190
      hostAttributes: {
 
191
        role: 'button',
 
192
        'aria-pressed': 'false',
 
193
        tabindex: 0
 
194
      },
 
195
 
 
196
      properties: {
 
197
        /**
 
198
         * Fired when the checked state changes due to user interaction.
 
199
         *
 
200
         * @event change
 
201
         */
 
202
        /**
 
203
         * Fired when the checked state changes.
 
204
         *
 
205
         * @event iron-change
 
206
         */
 
207
      },
 
208
 
 
209
      listeners: {
 
210
        track: '_ontrack'
 
211
      },
 
212
 
 
213
      _ontrack: function(event) {
 
214
        var track = event.detail;
 
215
        if (track.state === 'start') {
 
216
          this._trackStart(track);
 
217
        } else if (track.state === 'track') {
 
218
          this._trackMove(track);
 
219
        } else if (track.state === 'end') {
 
220
          this._trackEnd(track);
 
221
        }
 
222
      },
 
223
 
 
224
      _trackStart: function(track) {
 
225
        this._width = this.$.toggleBar.offsetWidth / 2;
 
226
        /*
 
227
         * keep an track-only check state to keep the dragging behavior smooth
 
228
         * while toggling activations
 
229
         */
 
230
        this._trackChecked = this.checked;
 
231
        this.$.toggleButton.classList.add('dragging');
 
232
      },
 
233
 
 
234
      _trackMove: function(track) {
 
235
        var dx = track.dx;
 
236
        this._x = Math.min(this._width,
 
237
            Math.max(0, this._trackChecked ? this._width + dx : dx));
 
238
        this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
 
239
        this._userActivate(this._x > (this._width / 2));
 
240
      },
 
241
 
 
242
      _trackEnd: function(track) {
 
243
        this.$.toggleButton.classList.remove('dragging');
 
244
        this.transform('', this.$.toggleButton);
 
245
      },
 
246
 
 
247
      // customize the element's ripple
 
248
      _createRipple: function() {
 
249
        this._rippleContainer = this.$.toggleButton;
 
250
        var ripple = Polymer.PaperRippleBehavior._createRipple();
 
251
        ripple.id = 'ink';
 
252
        ripple.setAttribute('recenters', '');
 
253
        ripple.classList.add('circle', 'toggle-ink');
 
254
        return ripple;
 
255
      }
 
256
 
 
257
    });
 
258
  </script>
 
259
</dom-module>