third_party/polymer/components/paper-toggle-button/paper-toggle-button.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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-a11y-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>