third_party/polymer/v1_0/components/iron-behaviors/iron-control-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
  13 <script>
  14
  15   /**
  16    * @demo demo/index.html
  17    * @polymerBehavior
  18    */
  19   Polymer.IronControlState = {
  20
  21     properties: {
  22
  23       /**
  24        * If true, the element currently has focus.
  25        */
  26       focused: {
  27         type: Boolean,
  28         value: false,
  29         notify: true,
  30         readOnly: true,
  31         reflectToAttribute: true
  32       },
  33
  34       /**
  35        * If true, the user cannot interact with this element.
  36        */
  37       disabled: {
  38         type: Boolean,
  39         value: false,
  40         notify: true,
  41         observer: '_disabledChanged',
  42         reflectToAttribute: true
  43       },
  44
  45       _oldTabIndex: {
  46         type: Number
  47       },
  48
  49       _boundFocusBlurHandler: {
  50         type: Function,
  51         value: function() {
  52           return this._focusBlurHandler.bind(this);
  53         }
  54       }
  55
  56     },
  57
  58     observers: [
  59       '_changedControlState(focused, disabled)'
  60     ],
  61
  62     ready: function() {
  63       // TODO(sjmiles): ensure read-only property is valued so the compound
  64       // observer will fire
  65       if (this.focused === undefined) {
  66         this._setFocused(false);
  67       }
  68       this.addEventListener('focus', this._boundFocusBlurHandler, true);
  69       this.addEventListener('blur', this._boundFocusBlurHandler, true);
  70     },
  71
  72     _focusBlurHandler: function(event) {
  73       var target = event.path ? event.path[0] : event.target;
  74       if (target === this) {
  75         var focused = event.type === 'focus';
  76         this._setFocused(focused);
  77       } else if (!this.shadowRoot) {
  78         event.stopPropagation();
  79         this.fire(event.type, {sourceEvent: event}, {
  80           node: this,
  81           bubbles: event.bubbles,
  82           cancelable: event.cancelable
  83         });
  84       }
  85     },
  86
  87     _disabledChanged: function(disabled, old) {
  88       this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
  89       this.style.pointerEvents = disabled ? 'none' : '';
  90       if (disabled) {
  91         this._oldTabIndex = this.tabIndex;
  92         this.focused = false;
  93         this.tabIndex = -1;
  94       } else if (this._oldTabIndex !== undefined) {
  95         this.tabIndex = this._oldTabIndex;
  96       }
  97     },
  98
  99     _changedControlState: function() {
 100       // _controlStateChanged is abstract, follow-on behaviors may implement it
 101       if (this._controlStateChanged) {
 102         this._controlStateChanged();
 103       }
 104     }
 105
 106   };
 107
 108 </script>