2016-08-07 12:43:52 -07:00
|
|
|
|
define(['browser', 'dom', 'css!./emby-button', 'registerElement'], function (browser, dom) {
|
2016-06-05 13:46:19 -07:00
|
|
|
|
|
|
|
|
|
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
|
|
|
|
|
2016-06-25 13:18:23 -07:00
|
|
|
|
function enableAnimation() {
|
|
|
|
|
if (browser.tv) {
|
|
|
|
|
// too slow
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-05 13:46:19 -07:00
|
|
|
|
function animateButtonInternal(e, btn) {
|
|
|
|
|
|
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
|
|
|
|
|
div.classList.add('ripple-effect');
|
|
|
|
|
|
|
|
|
|
var offsetX = e.offsetX || 0;
|
|
|
|
|
var offsetY = e.offsetY || 0;
|
|
|
|
|
|
|
|
|
|
if (offsetX > 0 && offsetY > 0) {
|
|
|
|
|
div.style.left = offsetX + 'px';
|
|
|
|
|
div.style.top = offsetY + 'px';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
btn.appendChild(div);
|
|
|
|
|
|
|
|
|
|
div.addEventListener("animationend", function () {
|
|
|
|
|
div.parentNode.removeChild(div);
|
|
|
|
|
}, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function animateButton(e) {
|
|
|
|
|
|
|
|
|
|
var btn = this;
|
|
|
|
|
requestAnimationFrame(function () {
|
|
|
|
|
animateButtonInternal(e, btn);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onKeyDown(e) {
|
|
|
|
|
|
|
|
|
|
if (e.keyCode == 13) {
|
|
|
|
|
animateButton.call(this, e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
EmbyButtonPrototype.attachedCallback = function () {
|
|
|
|
|
|
2016-08-04 19:03:15 -07:00
|
|
|
|
if (this.classList.contains('paper-icon-button-light')) {
|
2016-06-05 13:46:19 -07:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2016-08-04 19:03:15 -07:00
|
|
|
|
this.classList.add('paper-icon-button-light');
|
2016-06-05 13:46:19 -07:00
|
|
|
|
|
2016-06-25 13:18:23 -07:00
|
|
|
|
if (enableAnimation()) {
|
2016-08-07 12:43:52 -07:00
|
|
|
|
dom.addEventListener(this, 'keydown', onKeyDown, {
|
|
|
|
|
passive: true
|
|
|
|
|
});
|
|
|
|
|
dom.addEventListener(this, 'click', animateButton, {
|
|
|
|
|
passive: true
|
|
|
|
|
});
|
2016-06-25 13:18:23 -07:00
|
|
|
|
}
|
2016-06-05 13:46:19 -07:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.registerElement('paper-icon-button-light', {
|
|
|
|
|
prototype: EmbyButtonPrototype,
|
|
|
|
|
extends: 'button'
|
|
|
|
|
});
|
|
|
|
|
});
|