2024-10-11 22:19:19 +08:00
|
|
|
import {fadeIn, fadeOut} from '../services/animations.ts';
|
2023-04-19 05:20:02 +08:00
|
|
|
import {onSelect} from '../services/dom';
|
|
|
|
import {Component} from './component';
|
2020-06-28 06:56:01 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Popup window that will contain other content.
|
|
|
|
* This component provides the show/hide functionality
|
|
|
|
* with the ability for popup@hide child references to close this.
|
|
|
|
*/
|
2022-11-15 20:44:57 +08:00
|
|
|
export class Popup extends Component {
|
2020-06-28 06:56:01 +08:00
|
|
|
|
|
|
|
setup() {
|
|
|
|
this.container = this.$el;
|
|
|
|
this.hideButtons = this.$manyRefs.hide || [];
|
|
|
|
|
|
|
|
this.onkeyup = null;
|
|
|
|
this.onHide = null;
|
|
|
|
this.setupListeners();
|
|
|
|
}
|
|
|
|
|
|
|
|
setupListeners() {
|
|
|
|
let lastMouseDownTarget = null;
|
|
|
|
this.container.addEventListener('mousedown', event => {
|
|
|
|
lastMouseDownTarget = event.target;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.container.addEventListener('click', event => {
|
|
|
|
if (event.target === this.container && lastMouseDownTarget === this.container) {
|
2023-04-19 22:20:04 +08:00
|
|
|
this.hide();
|
2020-06-28 06:56:01 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
onSelect(this.hideButtons, () => this.hide());
|
2020-06-28 06:56:01 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
hide(onComplete = null) {
|
2022-04-20 21:58:37 +08:00
|
|
|
fadeOut(this.container, 120, onComplete);
|
2020-06-28 06:56:01 +08:00
|
|
|
if (this.onkeyup) {
|
|
|
|
window.removeEventListener('keyup', this.onkeyup);
|
|
|
|
this.onkeyup = null;
|
|
|
|
}
|
|
|
|
if (this.onHide) {
|
|
|
|
this.onHide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
show(onComplete = null, onHide = null) {
|
2022-04-20 21:58:37 +08:00
|
|
|
fadeIn(this.container, 120, onComplete);
|
2020-06-28 06:56:01 +08:00
|
|
|
|
2023-04-19 05:20:02 +08:00
|
|
|
this.onkeyup = event => {
|
2020-06-28 06:56:01 +08:00
|
|
|
if (event.key === 'Escape') {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
window.addEventListener('keyup', this.onkeyup);
|
|
|
|
this.onHide = onHide;
|
|
|
|
}
|
|
|
|
|
2023-04-19 05:20:02 +08:00
|
|
|
}
|