Home | History | Annotate | Download | only in paper-button 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      8 -->
      9 
     10 <!--
     11 @group Paper Elements
     12 
     13 `paper-button-base` is the base class for button-like elements with ripple and optional shadow.
     14 
     15 @element paper-button-base
     16 @mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable
     17 @status unstable
     18 -->
     19 
     20 <link href="../polymer/polymer.html" rel="import">
     21 <link href="../core-focusable/core-focusable.html" rel="import">
     22 <link href="../paper-ripple/paper-ripple.html" rel="import">
     23 
     24 <polymer-element name="paper-button-base" tabindex="0">
     25 
     26 <script>
     27 
     28   (function() {
     29 
     30     var p = {
     31 
     32       eventDelegates: {
     33         down: 'downAction',
     34         up: 'upAction'
     35       },
     36 
     37       toggleBackground: function() {
     38         if (this.active) {
     39 
     40           if (!this.$.bg) {
     41             var bg = document.createElement('div');
     42             bg.setAttribute('id', 'bg');
     43             bg.setAttribute('fit', '');
     44             bg.style.opacity = 0.25;
     45             this.$.bg = bg;
     46             this.shadowRoot.insertBefore(bg, this.shadowRoot.firstChild);
     47           }
     48           this.$.bg.style.backgroundColor = getComputedStyle(this).color;
     49 
     50         } else {
     51 
     52           if (this.$.bg) {
     53             this.$.bg.style.backgroundColor = '';
     54           }
     55         }
     56       },
     57 
     58       activeChanged: function() {
     59         this.super();
     60 
     61         if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
     62           this.toggleBackground();
     63         }
     64       },
     65 
     66       pressedChanged: function() {
     67         this.super();
     68 
     69         if (!this.lastEvent) {
     70           return;
     71         }
     72 
     73         if (this.$.ripple && !this.hasAttribute('noink')) {
     74           if (this.pressed) {
     75             this.$.ripple.downAction(this.lastEvent);
     76           } else {
     77             this.$.ripple.upAction();
     78           }
     79         }
     80 
     81         this.adjustZ();
     82       },
     83 
     84       focusedChanged: function() {
     85         this.adjustZ();
     86       },
     87 
     88       disabledChanged: function() {
     89         this._disabledChanged();
     90         this.adjustZ();
     91       },
     92 
     93       recenteringTouchChanged: function() {
     94         if (this.$.ripple) {
     95           this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
     96         }
     97       },
     98 
     99       fillChanged: function() {
    100         if (this.$.ripple) {
    101           this.$.ripple.classList.toggle('fill', this.fill);
    102         }
    103       },
    104 
    105       adjustZ: function() {
    106         if (!this.$.shadow) {
    107           return;
    108         }
    109         if (this.active) {
    110           this.$.shadow.setZ(2);
    111         } else if (this.disabled) {
    112           this.$.shadow.setZ(0);
    113         } else if (this.focused) {
    114           this.$.shadow.setZ(3);
    115         } else {
    116           this.$.shadow.setZ(1);
    117         }
    118       },
    119 
    120       downAction: function(e) {
    121         this._downAction();
    122 
    123         if (this.hasAttribute('noink')) {
    124           return;
    125         }
    126 
    127         this.lastEvent = e;
    128         if (!this.$.ripple) {
    129           var ripple = document.createElement('paper-ripple');
    130           ripple.setAttribute('id', 'ripple');
    131           ripple.setAttribute('fit', '');
    132           if (this.recenteringTouch) {
    133             ripple.classList.add('recenteringTouch');
    134           }
    135           if (!this.fill) {
    136             ripple.classList.add('circle');
    137           }
    138           this.$.ripple = ripple;
    139           this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
    140           // No need to forward the event to the ripple because the ripple
    141           // is triggered in activeChanged
    142         }
    143       },
    144 
    145       upAction: function() {
    146         this._upAction();
    147 
    148         if (this.toggle) {
    149           this.toggleBackground();
    150           if (this.$.ripple) {
    151             this.$.ripple.cancel();
    152           }
    153         }
    154       }
    155 
    156     };
    157 
    158     Polymer.mixin2(p, Polymer.CoreFocusable);
    159     Polymer(p);
    160 
    161   })();
    162 
    163 </script>
    164 </polymer-element>
    165