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

   1 import {EditorForm, EditorFormDefinition} from "./forms";
   2 import {el} from "../../helpers";
   3 import {EditorContainerUiElement} from "./core";
   4
   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
  17     constructor(definition: EditorFormModalDefinition) {
  18         super([new EditorForm(definition.form)]);
  19         this.definition = definition;
  20     }
  21
  22     show(defaultValues: Record<string, string>) {
  23         const dom = this.getDOMElement();
  24         document.body.append(dom);
  25
  26         const form = this.getForm();
  27         form.setValues(defaultValues);
  28         form.setOnCancel(this.hide.bind(this));
  29     }
  30
  31     hide() {
  32         this.getDOMElement().remove();
  33     }
  34
  35     protected getForm(): EditorForm {
  36         return this.children[0] as EditorForm;
  37     }
  38
  39     protected buildDOM(): HTMLElement {
  40         const closeButton = el('button', {class: 'editor-modal-close', type: 'button', title: this.trans('Close')}, ['x']);
  41         closeButton.addEventListener('click', this.hide.bind(this));
  42
  43         const modal = el('div', {class: 'editor-modal editor-form-modal'}, [
  44             el('div', {class: 'editor-modal-header'}, [
  45                 el('div', {class: 'editor-modal-title'}, [this.trans(this.definition.title)]),
  46                 closeButton,
  47             ]),
  48             el('div', {class: 'editor-modal-body'}, [
  49                 this.getForm().getDOMElement(),
  50             ]),
  51         ]);
  52
  53         const wrapper = el('div', {class: 'editor-modal-wrapper'}, [modal]);
  54
  55         wrapper.addEventListener('click', event => {
  56             if (event.target && !modal.contains(event.target as HTMLElement)) {
  57                 this.hide();
  58             }
  59         });
  60
  61         return wrapper;
  62     }
  63 }