Home | History | Annotate | Download | only in paper-behaviors 
      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-behaviors/iron-button-state.html">
     13 <link rel="import" href="paper-ripple-behavior.html">
     14 
     15 <script>
     16 
     17   /** @polymerBehavior Polymer.PaperButtonBehavior */
     18   Polymer.PaperButtonBehaviorImpl = {
     19 
     20     properties: {
     21 
     22       /**
     23        * The z-depth of this element, from 0-5. Setting to 0 will remove the
     24        * shadow, and each increasing number greater than 0 will be "deeper"
     25        * than the last.
     26        *
     27        * @attribute elevation
     28        * @type number
     29        * @default 1
     30        */
     31       elevation: {
     32         type: Number,
     33         reflectToAttribute: true,
     34         readOnly: true
     35       }
     36 
     37     },
     38 
     39     observers: [
     40       '_calculateElevation(focused, disabled, active, pressed, receivedFocusFromKeyboard)',
     41       '_computeKeyboardClass(receivedFocusFromKeyboard)'
     42     ],
     43 
     44     hostAttributes: {
     45       role: 'button',
     46       tabindex: '0',
     47       animated: true
     48     },
     49 
     50     _calculateElevation: function() {
     51       var e = 1;
     52       if (this.disabled) {
     53         e = 0;
     54       } else if (this.active || this.pressed) {
     55         e = 4;
     56       } else if (this.receivedFocusFromKeyboard) {
     57         e = 3;
     58       }
     59       this._setElevation(e);
     60     },
     61 
     62     _computeKeyboardClass: function(receivedFocusFromKeyboard) {
     63       this.toggleClass('keyboard-focus', receivedFocusFromKeyboard);
     64     },
     65 
     66     /**
     67      * In addition to `IronButtonState` behavior, when space key goes down,
     68      * create a ripple down effect.
     69      *
     70      * @param {!KeyboardEvent} event .
     71      */
     72     _spaceKeyDownHandler: function(event) {
     73       Polymer.IronButtonStateImpl._spaceKeyDownHandler.call(this, event);
     74       // Ensure that there is at most one ripple when the space key is held down.
     75       if (this.hasRipple() && this.getRipple().ripples.length < 1) {
     76         this._ripple.uiDownAction();
     77       }
     78     },
     79 
     80     /**
     81      * In addition to `IronButtonState` behavior, when space key goes up,
     82      * create a ripple up effect.
     83      *
     84      * @param {!KeyboardEvent} event .
     85      */
     86     _spaceKeyUpHandler: function(event) {
     87       Polymer.IronButtonStateImpl._spaceKeyUpHandler.call(this, event);
     88       if (this.hasRipple()) {
     89         this._ripple.uiUpAction();
     90       }
     91     }
     92 
     93   };
     94 
     95   /** @polymerBehavior */
     96   Polymer.PaperButtonBehavior = [
     97     Polymer.IronButtonState,
     98     Polymer.IronControlState,
     99     Polymer.PaperRippleBehavior,
    100     Polymer.PaperButtonBehaviorImpl
    101   ];
    102 
    103 </script>
    104