hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 17:10:10 +00:00
Code Issues Projects Releases Wiki Activity

modal: add onopen/onclose

Browse Source
This commit is contained in:
Harvey Tindall 2021-05-07 13:22:07 +01:00
parent 99875b9176
commit 2816c6277d
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ts/modules/modal.ts
View File

@ -3,8 +3,12 @@ declare var window: Window;
export class Modal implements Modal { export class Modal implements Modal {
modal: HTMLElement; modal: HTMLElement;
closeButton: HTMLSpanElement; closeButton: HTMLSpanElement;
openEvent: CustomEvent;
closeEvent: CustomEvent;
constructor(modal: HTMLElement, important: boolean = false) { constructor(modal: HTMLElement, important: boolean = false) {
this.modal = modal; 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') const closeButton = this.modal.querySelector('span.modal-close')
if (closeButton !== null) { if (closeButton !== null) {
this.closeButton = closeButton as HTMLSpanElement; this.closeButton = closeButton as HTMLSpanElement;
@ -26,11 +30,21 @@ export class Modal implements Modal {
modal.classList.remove('modal-shown'); modal.classList.remove('modal-shown');
modal.classList.remove('modal-hiding'); modal.classList.remove('modal-hiding');
modal.removeEventListener(window.animationEvent, listenerFunc); modal.removeEventListener(window.animationEvent, listenerFunc);
document.dispatchEvent(this.closeEvent);
}; };
this.modal.addEventListener(window.animationEvent, listenerFunc, false); 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 = () => { show = () => {
this.modal.classList.add('modal-shown'); this.modal.classList.add('modal-shown');
document.dispatchEvent(this.openEvent);
} }
toggle = () => { toggle = () => {
if (this.modal.classList.contains('modal-shown')) { if (this.modal.classList.contains('modal-shown')) {