third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js

   1
   2     Polymer({
   3       is: 'paper-toggle-button',
   4
   5       behaviors: [
   6         Polymer.PaperInkyFocusBehavior
   7       ],
   8
   9       hostAttributes: {
  10         role: 'button',
  11         'aria-pressed': 'false',
  12         tabindex: 0
  13       },
  14
  15       properties: {
  16         /**
  17          * Fired when the checked state changes due to user interaction.
  18          *
  19          * @event change
  20          */
  21         /**
  22          * Fired when the checked state changes.
  23          *
  24          * @event iron-change
  25          */
  26         /**
  27          * Gets or sets the state, `true` is checked and `false` is unchecked.
  28          *
  29          * @attribute checked
  30          * @type boolean
  31          * @default false
  32          */
  33         checked: {
  34           type: Boolean,
  35           value: false,
  36           reflectToAttribute: true,
  37           notify: true,
  38           observer: '_checkedChanged'
  39         },
  40
  41         /**
  42          * If true, the button toggles the active state with each tap or press
  43          * of the spacebar.
  44          *
  45          * @attribute toggles
  46          * @type boolean
  47          * @default true
  48          */
  49         toggles: {
  50           type: Boolean,
  51           value: true,
  52           reflectToAttribute: true
  53         }
  54       },
  55
  56       listeners: {
  57         track: '_ontrack'
  58       },
  59
  60       ready: function() {
  61         this._isReady = true;
  62       },
  63
  64       // button-behavior hook
  65       _buttonStateChanged: function() {
  66         if (this.disabled) {
  67           return;
  68         }
  69         if (this._isReady) {
  70           this.checked = this.active;
  71         }
  72       },
  73
  74       _checkedChanged: function(checked) {
  75         this.active = this.checked;
  76         this.fire('iron-change');
  77       },
  78
  79       _ontrack: function(event) {
  80         var track = event.detail;
  81         if (track.state === 'start') {
  82           this._trackStart(track);
  83         } else if (track.state === 'track') {
  84           this._trackMove(track);
  85         } else if (track.state === 'end') {
  86           this._trackEnd(track);
  87         }
  88       },
  89
  90       _trackStart: function(track) {
  91         this._width = this.$.toggleBar.offsetWidth / 2;
  92         /*
  93          * keep an track-only check state to keep the dragging behavior smooth
  94          * while toggling activations
  95          */
  96         this._trackChecked = this.checked;
  97         this.$.toggleButton.classList.add('dragging');
  98       },
  99
 100       _trackMove: function(track) {
 101         var dx = track.dx;
 102         this._x = Math.min(this._width,
 103             Math.max(0, this._trackChecked ? this._width + dx : dx));
 104         this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
 105         this._userActivate(this._x > (this._width / 2));
 106       },
 107
 108       _trackEnd: function(track) {
 109         this.$.toggleButton.classList.remove('dragging');
 110         this.transform('', this.$.toggleButton);
 111       }
 112
 113     });
 114