paper-toggle-button.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`paper-toggle-button` provides a ON/OFF switch that user can toggle the state
by tapping or by dragging the swtich.

Example:

    <paper-toggle-button></paper-toggle-button>

Styling toggle button:

To change the toggle color:

    paper-toggle-button::shadow .toggle {
      background-color: #9c27b0;
    }

To change the ink color:
    
    paper-toggle-button::shadow .toggle-ink {
      color: #009688;
    }

To change the checked toggle color:

    paper-toggle-button::shadow [checked] .toggle {
      background-color: #4285f4;
    }

To change the checked ink color:

    paper-toggle-button::shadow [checked] .toggle-ink {
      color: #4285f4;
    }

To change the toggle bar and toggle button colors separately:

    paper-toggle-button::shadow .toggle-bar {
      background-color: #5677fc;
    }

    paper-toggle-button::shadow .toggle-button {
      background-color: #9c27b0;
    }

@group Paper Elements
@element paper-toggle-button
@homepage github.io
-->

<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">

<polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
<template>

  <link rel="stylesheet" href="paper-toggle-button.css">

  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>

  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
  
    <div id="toggleBar" class="toggle toggle-bar"></div>

    <div id="toggleButton" class="toggle toggle-button">
      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
    </div>

  </div>

</template>
<script>

  Polymer('paper-toggle-button', {
    
    /**
     * Fired when the checked state changes due to user interaction.
     *
     * @event change
     */
     
    /**
     * Fired when the checked state changes.
     *
     * @event core-change
     */

    /**
     * Gets or sets the state, `true` is checked and `false` is unchecked.
     *
     * @attribute checked
     * @type boolean
     * @default false
     */
    checked: false,

    /**
     * If true, the toggle button is disabled.  A disabled toggle button cannot
     * be tapped or dragged to change the checked state.
     *
     * @attribute disabled
     * @type boolean
     * @default false
     */
    disabled: false,

    eventDelegates: {
      down: 'downAction',
      up: 'upAction',
      tap: 'tap',
      trackstart: 'trackStart',
      trackx: 'trackx',
      trackend: 'trackEnd'
    },

    downAction: function(e) {
      var rect = this.$.ink.getBoundingClientRect();
      this.$.ink.downAction({
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
      });
    },

    upAction: function(e) {
      this.$.ink.upAction();
    },

    tap: function() {
      if (this.disabled) {
        return;
      }
      this.checked = !this.checked;
      this.fire('change');
    },

    trackStart: function(e) {
      if (this.disabled) {
        return;
      }
      this._w = this.$.toggleBar.offsetWidth / 2;
      e.preventTap();
    },

    trackx: function(e) {
      this._x = Math.min(this._w, 
          Math.max(0, this.checked ? this._w + e.dx : e.dx));
      this.$.toggleButton.classList.add('dragging');
      var s =  this.$.toggleButton.style;
      s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
    },

    trackEnd: function() {
      var s =  this.$.toggleButton.style;
      s.transform = s.webkitTransform = '';
      this.$.toggleButton.classList.remove('dragging');
      var old = this.checked;
      this.checked = Math.abs(this._x) > this._w / 2;
      if (this.checked !== old) {
        this.fire('change');
      }
    },
    
    checkedChanged: function() {
      this.setAttribute('aria-pressed', Boolean(this.checked));
      this.fire('core-change');
    }

  });

</script>
</polymer-element>