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
  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', {
  41             class: 'editor-modal-close',
  42             type: 'button',
  43             title: this.trans('Close'),
  44         });
  45         closeButton.innerHTML = closeIcon;
  46         closeButton.addEventListener('click', this.hide.bind(this));
  47
  48         const modal = el('div', {class: 'editor-modal editor-form-modal'}, [
  49             el('div', {class: 'editor-modal-header'}, [
  50                 el('div', {class: 'editor-modal-title'}, [this.trans(this.definition.title)]),
  51                 closeButton,
  52             ]),
  53             el('div', {class: 'editor-modal-body'}, [
  54                 this.getForm().getDOMElement(),
  55             ]),
  56         ]);
  57
  58         const wrapper = el('div', {class: 'editor-modal-wrapper'}, [modal]);
  59
  60         wrapper.addEventListener('click', event => {
  61             if (event.target && !modal.contains(event.target as HTMLElement)) {
  62                 this.hide();
  63             }
  64         });
  65
  66         return wrapper;
  67     }
  68 }