2019-12-07 17:54:34 +01:00
|
|
|
import {fadeIn, fadeOut} from "../services/animations";
|
2017-08-06 22:08:03 +02:00
|
|
|
|
|
|
|
class Overlay {
|
|
|
|
|
|
|
|
constructor(elem) {
|
|
|
|
this.container = elem;
|
|
|
|
elem.addEventListener('click', event => {
|
|
|
|
if (event.target === elem) return this.hide();
|
|
|
|
});
|
2019-08-24 19:26:28 +02:00
|
|
|
|
|
|
|
window.addEventListener('keyup', event => {
|
|
|
|
if (event.key === 'Escape') {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-04-07 12:34:40 +02:00
|
|
|
let closeButtons = elem.querySelectorAll('.popup-header-close');
|
2017-08-06 22:08:03 +02:00
|
|
|
for (let i=0; i < closeButtons.length; i++) {
|
|
|
|
closeButtons[i].addEventListener('click', this.hide.bind(this));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-07 17:54:34 +01:00
|
|
|
hide(onComplete = null) { this.toggle(false, onComplete); }
|
|
|
|
show(onComplete = null) { this.toggle(true, onComplete); }
|
2017-08-06 22:08:03 +02:00
|
|
|
|
2019-12-07 17:54:34 +01:00
|
|
|
toggle(show = true, onComplete) {
|
|
|
|
if (show) {
|
|
|
|
fadeIn(this.container, 240, onComplete);
|
|
|
|
} else {
|
|
|
|
fadeOut(this.container, 240, onComplete);
|
|
|
|
}
|
2017-08-06 22:08:03 +02:00
|
|
|
}
|
|
|
|
|
2019-08-24 19:26:28 +02:00
|
|
|
focusOnBody() {
|
|
|
|
const body = this.container.querySelector('.popup-body');
|
|
|
|
if (body) {
|
|
|
|
body.focus();
|
|
|
|
}
|
|
|
|
}
|
2017-08-06 22:08:03 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2018-11-09 22:17:35 +01:00
|
|
|
export default Overlay;
|