2016-06-04 17:17:35 -07:00
|
|
|
|
define(['css!./emby-button'], function (layoutManager, browser) {
|
|
|
|
|
|
|
|
|
|
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
|
|
|
|
|
|
|
|
|
function animateButton(e) {
|
|
|
|
|
|
|
|
|
|
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';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.appendChild(div);
|
|
|
|
|
|
2016-06-04 20:50:07 -07:00
|
|
|
|
div.addEventListener("animationend", function() {
|
2016-06-04 17:17:35 -07:00
|
|
|
|
div.parentNode.removeChild(div);
|
2016-06-04 20:50:07 -07:00
|
|
|
|
}, false);
|
2016-06-04 17:17:35 -07:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onKeyDown(e) {
|
|
|
|
|
|
|
|
|
|
if (e.keyCode == 13) {
|
|
|
|
|
animateButton.call(this, e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-04 20:50:07 -07:00
|
|
|
|
function onMouseDown(e) {
|
|
|
|
|
|
|
|
|
|
if (e.button == 0) {
|
|
|
|
|
animateButton.call(this, e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-06-04 17:17:35 -07:00
|
|
|
|
EmbyButtonPrototype.attachedCallback = function () {
|
|
|
|
|
|
|
|
|
|
if (this.getAttribute('data-embybutton') == 'true') {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setAttribute('data-embybutton', 'true');
|
|
|
|
|
|
|
|
|
|
this.addEventListener('keydown', onKeyDown);
|
2016-06-04 20:50:07 -07:00
|
|
|
|
this.addEventListener('mousedown', onMouseDown);
|
|
|
|
|
this.addEventListener('touchstart', animateButton);
|
2016-06-04 17:17:35 -07:00
|
|
|
|
//this.addEventListener('click', animateButton);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.registerElement('emby-button', {
|
|
|
|
|
prototype: EmbyButtonPrototype,
|
|
|
|
|
extends: 'button'
|
|
|
|
|
});
|
|
|
|
|
});
|