third_party/polymer/v1_0/components-chromium/iron-behaviors/iron-button-state-extracted.js

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