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

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