122 lines
3.2 KiB
HTML
122 lines
3.2 KiB
HTML
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<!--
|
|
@group Paper Elements
|
|
|
|
`paper-button-base` is the base class for button-like elements with ripple and optional shadow.
|
|
|
|
@element paper-button-base
|
|
@mixins Polymer.CoreFocusable
|
|
@status unstable
|
|
-->
|
|
|
|
<link href="../polymer/polymer.html" rel="import">
|
|
<link href="../core-focusable/core-focusable.html" rel="import">
|
|
<link href="../paper-ripple/paper-ripple.html" rel="import">
|
|
|
|
<polymer-element name="paper-button-base" tabindex="0">
|
|
|
|
<script>
|
|
|
|
(function() {
|
|
|
|
var p = {
|
|
|
|
eventDelegates: {
|
|
down: 'downAction'
|
|
},
|
|
|
|
activeChanged: function() {
|
|
this.super();
|
|
|
|
if (this.$.ripple) {
|
|
if (this.active) {
|
|
// FIXME: remove when paper-ripple can have a default 'down' state.
|
|
if (!this.lastEvent) {
|
|
var rect = this.getBoundingClientRect();
|
|
this.lastEvent = {
|
|
x: rect.left + rect.width / 2,
|
|
y: rect.top + rect.height / 2
|
|
}
|
|
}
|
|
this.$.ripple.downAction(this.lastEvent);
|
|
} else {
|
|
this.$.ripple.upAction();
|
|
}
|
|
}
|
|
|
|
this.adjustZ();
|
|
},
|
|
|
|
disabledChanged: function() {
|
|
this._disabledChanged();
|
|
this.adjustZ();
|
|
},
|
|
|
|
recenteringTouchChanged: function() {
|
|
if (this.$.ripple) {
|
|
this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
|
|
}
|
|
},
|
|
|
|
fillChanged: function() {
|
|
if (this.$.ripple) {
|
|
this.$.ripple.classList.toggle('fill', this.fill);
|
|
}
|
|
},
|
|
|
|
adjustZ: function() {
|
|
if (!this.$.shadow) {
|
|
return;
|
|
}
|
|
if (this.active) {
|
|
this.$.shadow.setZ(2);
|
|
} else if (this.disabled) {
|
|
this.$.shadow.setZ(0);
|
|
} else {
|
|
this.$.shadow.setZ(1);
|
|
}
|
|
},
|
|
|
|
downAction: function(e) {
|
|
this._downAction();
|
|
|
|
if (this.hasAttribute('noink')) {
|
|
return;
|
|
}
|
|
|
|
this.lastEvent = e;
|
|
if (!this.$.ripple) {
|
|
var ripple = document.createElement('paper-ripple');
|
|
ripple.setAttribute('id', 'ripple');
|
|
ripple.setAttribute('fit', '');
|
|
if (this.recenteringTouch) {
|
|
ripple.classList.add('recenteringTouch');
|
|
}
|
|
if (!this.fill) {
|
|
ripple.classList.add('circle');
|
|
}
|
|
this.$.ripple = ripple;
|
|
this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
|
|
// No need to forward the event to the ripple because the ripple
|
|
// is triggered in activeChanged
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
Polymer.mixin2(p, Polymer.CoreFocusable);
|
|
Polymer(p);
|
|
|
|
})();
|
|
|
|
</script>
|
|
</polymer-element>
|