1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject 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