third_party/polymer/components/paper-button/paper-button-base.html

   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
  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       },
  35
  36       activeChanged: function() {
  37         this.super();
  38
  39         if (this.$.ripple) {
  40           if (this.active) {
  41             // FIXME: remove when paper-ripple can have a default 'down' state.
  42             if (!this.lastEvent) {
  43               var rect = this.getBoundingClientRect();
  44               this.lastEvent = {
  45                 x: rect.left + rect.width / 2,
  46                 y: rect.top + rect.height / 2
  47               }
  48             }
  49             this.$.ripple.downAction(this.lastEvent);
  50           } else {
  51             this.$.ripple.upAction();
  52           }
  53         }
  54
  55         this.adjustZ();
  56       },
  57
  58       disabledChanged: function() {
  59         this._disabledChanged();
  60         this.adjustZ();
  61       },
  62
  63       recenteringTouchChanged: function() {
  64         if (this.$.ripple) {
  65           this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
  66         }
  67       },
  68
  69       fillChanged: function() {
  70         if (this.$.ripple) {
  71           this.$.ripple.classList.toggle('fill', this.fill);
  72         }
  73       },
  74
  75       adjustZ: function() {
  76         if (!this.$.shadow) {
  77           return;
  78         }
  79         if (this.active) {
  80           this.$.shadow.setZ(2);
  81         } else if (this.disabled) {
  82           this.$.shadow.setZ(0);
  83         } else {
  84           this.$.shadow.setZ(1);
  85         }
  86       },
  87
  88       downAction: function(e) {
  89         this._downAction();
  90
  91         if (this.hasAttribute('noink')) {
  92           return;
  93         }
  94
  95         this.lastEvent = e;
  96         if (!this.$.ripple) {
  97           var ripple = document.createElement('paper-ripple');
  98           ripple.setAttribute('id', 'ripple');
  99           ripple.setAttribute('fit', '');
 100           if (this.recenteringTouch) {
 101             ripple.classList.add('recenteringTouch');
 102           }
 103           if (!this.fill) {
 104             ripple.classList.add('circle');
 105           }
 106           this.$.ripple = ripple;
 107           this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
 108           // No need to forward the event to the ripple because the ripple
 109           // is triggered in activeChanged
 110         }
 111       }
 112
 113     };
 114
 115     Polymer.mixin2(p, Polymer.CoreFocusable);
 116     Polymer(p);
 117
 118   })();
 119
 120 </script>
 121 </polymer-element>