mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-29 12:30:11 +00:00
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
declare var window: Window;
|
|
|
|
export class Modal implements Modal {
|
|
modal: HTMLElement;
|
|
closeButton: HTMLSpanElement;
|
|
openEvent: CustomEvent;
|
|
closeEvent: CustomEvent;
|
|
constructor(modal: HTMLElement, important: boolean = false) {
|
|
this.modal = modal;
|
|
this.openEvent = new CustomEvent("modal-open-" + modal.id);
|
|
this.closeEvent = new CustomEvent("modal-close-" + modal.id);
|
|
const closeButton = this.modal.querySelector('span.modal-close');
|
|
if (closeButton !== null) {
|
|
this.closeButton = closeButton as HTMLSpanElement;
|
|
this.closeButton.onclick = this.close;
|
|
}
|
|
if (!important) {
|
|
window.addEventListener('click', (event: Event) => {
|
|
if (event.target == this.modal) { this.close(); }
|
|
});
|
|
}
|
|
}
|
|
close = (event?: Event) => {
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
this.modal.classList.add('animate-fade-out');
|
|
this.modal.classList.remove("animate-fade-in");
|
|
const modal = this.modal;
|
|
const listenerFunc = () => {
|
|
modal.classList.remove('block');
|
|
modal.classList.remove('animate-fade-out');
|
|
modal.removeEventListener(window.animationEvent, listenerFunc);
|
|
document.dispatchEvent(this.closeEvent);
|
|
};
|
|
this.modal.addEventListener(window.animationEvent, listenerFunc, false);
|
|
}
|
|
|
|
set onopen(f: () => void) {
|
|
document.addEventListener("modal-open-"+this.modal.id, f);
|
|
}
|
|
set onclose(f: () => void) {
|
|
document.addEventListener("modal-close-"+this.modal.id, f);
|
|
}
|
|
|
|
show = () => {
|
|
this.modal.classList.add('block', 'animate-fade-in');
|
|
document.dispatchEvent(this.openEvent);
|
|
}
|
|
toggle = () => {
|
|
if (this.modal.classList.contains('animate-fade-in')) {
|
|
this.close();
|
|
} else {
|
|
this.show();
|
|
}
|
|
}
|
|
|
|
asElement = () => { return this.modal; }
|
|
}
|