third_party/polymer/v1_0/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="../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 the input is not checked | `--dark-primary-color`
  34 `--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--google-green-500`
  35 `--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--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-ripple>
  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>