BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/modals.ts

   1 import {EditorForm, EditorFormDefinition} from "./forms";
   2 import {EditorContainerUiElement} from "./core";
   3 import closeIcon from "@icons/close.svg";
   4 import {el} from "../../utils/dom";
   5
   6 export interface EditorModalDefinition {
   7     title: string;
   8 }
   9
  10 export interface EditorFormModalDefinition extends EditorModalDefinition {
  11     form: EditorFormDefinition;
  12 }
  13
  14 export class EditorFormModal extends EditorContainerUiElement {
  15     protected definition: EditorFormModalDefinition;
  16     protected key: string;
  17
  18     constructor(definition: EditorFormModalDefinition, key: string) {
  19         super([new EditorForm(definition.form)]);
  20         this.definition = definition;
  21         this.key = key;
  22     }
  23
  24     show(defaultValues: Record<string, string>) {
  25         const dom = this.getDOMElement();
  26         document.body.append(dom);
  27
  28         const form = this.getForm();
  29         form.setValues(defaultValues);
  30         form.setOnCancel(this.hide.bind(this));
  31         form.setOnSuccessfulSubmit(this.hide.bind(this));
  32
  33         this.getContext().manager.setModalActive(this.key, this);
  34     }
  35
  36     hide() {
  37         this.getDOMElement().remove();
  38         this.getContext().manager.setModalInactive(this.key);
  39     }
  40
  41     getForm(): EditorForm {
  42         return this.children[0] as EditorForm;
  43     }
  44
  45     protected buildDOM(): HTMLElement {
  46         const closeButton = el('button', {
  47             class: 'editor-modal-close',
  48             type: 'button',
  49             title: this.trans('Close'),
  50         });
  51         closeButton.innerHTML = closeIcon;
  52         closeButton.addEventListener('click', this.hide.bind(this));
  53
  54         const modal = el('div', {class: 'editor-modal editor-form-modal'}, [
  55             el('div', {class: 'editor-modal-header'}, [
  56                 el('div', {class: 'editor-modal-title'}, [this.trans(this.definition.title)]),
  57                 closeButton,
  58             ]),
  59             el('div', {class: 'editor-modal-body'}, [
  60                 this.getForm().getDOMElement(),
  61             ]),
  62         ]);
  63
  64         const wrapper = el('div', {class: 'editor-modal-wrapper'}, [modal]);
  65
  66         wrapper.addEventListener('click', event => {
  67             if (event.target && !modal.contains(event.target as HTMLElement)) {
  68                 this.hide();
  69             }
  70         });
  71
  72         return wrapper;
  73     }
  74 }