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
  32         this.getContext().manager.setModalActive(this.key, this);
  33     }
  34
  35     hide() {
  36         this.getDOMElement().remove();
  37         this.getContext().manager.setModalInactive(this.key);
  38     }
  39
  40     getForm(): EditorForm {
  41         return this.children[0] as EditorForm;
  42     }
  43
  44     protected buildDOM(): HTMLElement {
  45         const closeButton = el('button', {
  46             class: 'editor-modal-close',
  47             type: 'button',
  48             title: this.trans('Close'),
  49         });
  50         closeButton.innerHTML = closeIcon;
  51         closeButton.addEventListener('click', this.hide.bind(this));
  52
  53         const modal = el('div', {class: 'editor-modal editor-form-modal'}, [
  54             el('div', {class: 'editor-modal-header'}, [
  55                 el('div', {class: 'editor-modal-title'}, [this.trans(this.definition.title)]),
  56                 closeButton,
  57             ]),
  58             el('div', {class: 'editor-modal-body'}, [
  59                 this.getForm().getDOMElement(),
  60             ]),
  61         ]);
  62
  63         const wrapper = el('div', {class: 'editor-modal-wrapper'}, [modal]);
  64
  65         wrapper.addEventListener('click', event => {
  66             if (event.target && !modal.contains(event.target as HTMLElement)) {
  67                 this.hide();
  68             }
  69         });
  70
  71         return wrapper;
  72     }
  73 }