jellyfin-web/dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js

71 lines
1.7 KiB
JavaScript
Raw Normal View History

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'
});
});