42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import {useEvent} from "../../../core/useEvent";
|
||
|
||
export class Dialog {
|
||
constructor({content = '', className = '', onClose = null} = {}) {
|
||
this.onClose = onClose;
|
||
this.dialog = document.createElement('dialog');
|
||
this.dialog.className = className;
|
||
this.dialog.innerHTML = `
|
||
<form method="dialog" class="${className}-content">
|
||
${content}
|
||
<button class="${className}-close" value="close">×</button>
|
||
</form>
|
||
`;
|
||
|
||
useEvent(this.dialog, 'click', (e) => {
|
||
const isOutside = !e.target.closest(className+'-content');
|
||
if (isOutside) this.close();
|
||
})
|
||
|
||
useEvent(this.dialog, 'cancel', (e) => {
|
||
e.preventDefault();
|
||
this.close();
|
||
})
|
||
|
||
}
|
||
|
||
open()
|
||
{
|
||
document.body.appendChild(this.dialog);
|
||
this.dialog.showModal?.() || this.dialog.setAttribute('open', '');
|
||
document.documentElement.dataset[`${this.dialog.className}Open`] = 'true';
|
||
}
|
||
|
||
close()
|
||
{
|
||
this.dialog.close?.() || this.dialog.removeAttribute('open');
|
||
this.dialog.remove();
|
||
delete document.documentElement.dataset[`${this.dialog.className}Open`];
|
||
this.onClose?.();
|
||
}
|
||
}
|