third_party/polymer/v1_0/components/iron-behaviors/iron-button-state.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-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  13 <link rel="import" href="iron-control-state.html">
  14
  15 <script>
  16
  17   /**
  18    * @demo demo/index.html
  19    * @polymerBehavior Polymer.IronButtonState
  20    */
  21   Polymer.IronButtonStateImpl = {
  22
  23     properties: {
  24
  25       /**
  26        * If true, the user is currently holding down the button.
  27        */
  28       pressed: {
  29         type: Boolean,
  30         readOnly: true,
  31         value: false,
  32         reflectToAttribute: true,
  33         observer: '_pressedChanged'
  34       },
  35
  36       /**
  37        * If true, the button toggles the active state with each tap or press
  38        * of the spacebar.
  39        */
  40       toggles: {
  41         type: Boolean,
  42         value: false,
  43         reflectToAttribute: true
  44       },
  45
  46       /**
  47        * If true, the button is a toggle and is currently in the active state.
  48        */
  49       active: {
  50         type: Boolean,
  51         value: false,
  52         notify: true,
  53         reflectToAttribute: true,
  54         observer: '_activeChanged'
  55       },
  56
  57       /**
  58        * True if the element is currently being pressed by a "pointer," which
  59        * is loosely defined as mouse or touch input (but specifically excluding
  60        * keyboard input).
  61        */
  62       pointerDown: {
  63         type: Boolean,
  64         readOnly: true,
  65         value: false
  66       },
  67
  68       /**
  69        * True if the input device that caused the element to receive focus
  70        * was a keyboard.
  71        */
  72       receivedFocusFromKeyboard: {
  73         type: Boolean,
  74         readOnly: true
  75       }
  76     },
  77
  78     listeners: {
  79       down: '_downHandler',
  80       up: '_upHandler',
  81       tap: '_tapHandler'
  82     },
  83
  84     observers: [
  85       '_detectKeyboardFocus(focused)'
  86     ],
  87
  88     keyBindings: {
  89       'enter:keydown': '_asyncClick',
  90       'space:keydown': '_spaceKeyDownHandler',
  91       'space:keyup': '_spaceKeyUpHandler',
  92     },
  93
  94     _tapHandler: function() {
  95       if (this.toggles) {
  96        // a tap is needed to toggle the active state
  97         this._userActivate(!this.active);
  98       } else {
  99         this.active = false;
 100       }
 101     },
 102
 103     _detectKeyboardFocus: function(focused) {
 104       this._setReceivedFocusFromKeyboard(!this.pointerDown && focused);
 105     },
 106
 107     // to emulate native checkbox, (de-)activations from a user interaction fire
 108     // 'change' events
 109     _userActivate: function(active) {
 110       this.active = active;
 111       this.fire('change');
 112     },
 113
 114     _downHandler: function() {
 115       this._setPointerDown(true);
 116       this._setPressed(true);
 117       this._setReceivedFocusFromKeyboard(false);
 118     },
 119
 120     _upHandler: function() {
 121       this._setPointerDown(false);
 122       this._setPressed(false);
 123     },
 124
 125     _spaceKeyDownHandler: function(event) {
 126       var keyboardEvent = event.detail.keyboardEvent;
 127       keyboardEvent.preventDefault();
 128       keyboardEvent.stopImmediatePropagation();
 129       this._setPressed(true);
 130     },
 131
 132     _spaceKeyUpHandler: function() {
 133       if (this.pressed) {
 134         this._asyncClick();
 135       }
 136       this._setPressed(false);
 137     },
 138
 139     // trigger click asynchronously, the asynchrony is useful to allow one
 140     // event handler to unwind before triggering another event
 141     _asyncClick: function() {
 142       this.async(function() {
 143         this.click();
 144       }, 1);
 145     },
 146
 147     // any of these changes are considered a change to button state
 148
 149     _pressedChanged: function(pressed) {
 150       this._changedButtonState();
 151     },
 152
 153     _activeChanged: function(active) {
 154       if (this.toggles) {
 155         this.setAttribute('aria-pressed', active ? 'true' : 'false');
 156       } else {
 157         this.removeAttribute('aria-pressed');
 158       }
 159       this._changedButtonState();
 160     },
 161
 162     _controlStateChanged: function() {
 163       if (this.disabled) {
 164         this._setPressed(false);
 165       } else {
 166         this._changedButtonState();
 167       }
 168     },
 169
 170     // provide hook for follow-on behaviors to react to button-state
 171
 172     _changedButtonState: function() {
 173       if (this._buttonStateChanged) {
 174         this._buttonStateChanged(); // abstract
 175       }
 176     }
 177
 178   };
 179
 180   /** @polymerBehavior */
 181   Polymer.IronButtonState = [
 182     Polymer.IronA11yKeysBehavior,
 183     Polymer.IronButtonStateImpl
 184   ];
 185
 186 </script>