2024-06-01 23:49:47 +08:00
|
|
|
import {EditorForm, EditorFormDefinition} from "./forms";
|
2024-06-13 02:51:42 +08:00
|
|
|
import {EditorContainerUiElement} from "./core";
|
2024-07-10 03:49:47 +08:00
|
|
|
import closeIcon from "@icons/close.svg";
|
2024-08-04 01:14:01 +08:00
|
|
|
import {el} from "../../utils/dom";
|
2024-06-01 23:49:47 +08:00
|
|
|
|
|
|
|
export interface EditorModalDefinition {
|
|
|
|
title: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface EditorFormModalDefinition extends EditorModalDefinition {
|
|
|
|
form: EditorFormDefinition;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class EditorFormModal extends EditorContainerUiElement {
|
|
|
|
protected definition: EditorFormModalDefinition;
|
|
|
|
|
|
|
|
constructor(definition: EditorFormModalDefinition) {
|
|
|
|
super([new EditorForm(definition.form)]);
|
|
|
|
this.definition = definition;
|
|
|
|
}
|
|
|
|
|
|
|
|
show(defaultValues: Record<string, string>) {
|
|
|
|
const dom = this.getDOMElement();
|
|
|
|
document.body.append(dom);
|
|
|
|
|
|
|
|
const form = this.getForm();
|
|
|
|
form.setValues(defaultValues);
|
|
|
|
form.setOnCancel(this.hide.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
|
|
|
this.getDOMElement().remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
protected getForm(): EditorForm {
|
|
|
|
return this.children[0] as EditorForm;
|
|
|
|
}
|
|
|
|
|
|
|
|
protected buildDOM(): HTMLElement {
|
2024-07-10 03:49:47 +08:00
|
|
|
const closeButton = el('button', {
|
|
|
|
class: 'editor-modal-close',
|
|
|
|
type: 'button',
|
|
|
|
title: this.trans('Close'),
|
|
|
|
});
|
|
|
|
closeButton.innerHTML = closeIcon;
|
2024-06-01 23:49:47 +08:00
|
|
|
closeButton.addEventListener('click', this.hide.bind(this));
|
|
|
|
|
|
|
|
const modal = el('div', {class: 'editor-modal editor-form-modal'}, [
|
|
|
|
el('div', {class: 'editor-modal-header'}, [
|
|
|
|
el('div', {class: 'editor-modal-title'}, [this.trans(this.definition.title)]),
|
|
|
|
closeButton,
|
|
|
|
]),
|
|
|
|
el('div', {class: 'editor-modal-body'}, [
|
|
|
|
this.getForm().getDOMElement(),
|
|
|
|
]),
|
|
|
|
]);
|
|
|
|
|
|
|
|
const wrapper = el('div', {class: 'editor-modal-wrapper'}, [modal]);
|
|
|
|
|
|
|
|
wrapper.addEventListener('click', event => {
|
|
|
|
if (event.target && !modal.contains(event.target as HTMLElement)) {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
}
|
|
|
|
}
|