164 lines
4.1 KiB
HTML
164 lines
4.1 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 https://github.com/polymer/core-focusable
|
|
@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',
|
|
up: 'upAction'
|
|
},
|
|
|
|
toggleBackground: function() {
|
|
if (this.active) {
|
|
|
|
if (!this.$.bg) {
|
|
var bg = document.createElement('div');
|
|
bg.setAttribute('id', 'bg');
|
|
bg.setAttribute('fit', '');
|
|
bg.style.opacity = 0.25;
|
|
this.$.bg = bg;
|
|
this.shadowRoot.insertBefore(bg, this.shadowRoot.firstChild);
|
|
}
|
|
this.$.bg.style.backgroundColor = getComputedStyle(this).color;
|
|
|
|
} else {
|
|
|
|
if (this.$.bg) {
|
|
this.$.bg.style.backgroundColor = '';
|
|
}
|
|
}
|
|
},
|
|
|
|
activeChanged: function() {
|
|
this.super();
|
|
|
|
if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
|
|
this.toggleBackground();
|
|
}
|
|
},
|
|
|
|
pressedChanged: function() {
|
|
this.super();
|
|
|
|
if (!this.lastEvent) {
|
|
return;
|
|
}
|
|
|
|
if (this.$.ripple && !this.hasAttribute('noink')) {
|
|
if (this.pressed) {
|
|
this.$.ripple.downAction(this.lastEvent);
|
|
} else {
|
|
this.$.ripple.upAction();
|
|
}
|
|
}
|
|
|
|
this.adjustZ();
|
|
},
|
|
|
|
focusedChanged: function() {
|
|
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 if (this.focused) {
|
|
this.$.shadow.setZ(3);
|
|
} 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
|
|
}
|
|
},
|
|
|
|
upAction: function() {
|
|
this._upAction();
|
|
|
|
if (this.toggle) {
|
|
this.toggleBackground();
|
|
if (this.$.ripple) {
|
|
this.$.ripple.cancel();
|
|
}
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
Polymer.mixin2(p, Polymer.CoreFocusable);
|
|
Polymer(p);
|
|
|
|
})();
|
|
|
|
</script>
|
|
</polymer-element>
|