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

   1 import {
   2     EditorUiContext,
   3     EditorUiElement,
   4     EditorContainerUiElement,
   5     EditorUiBuilderDefinition,
   6     isUiBuilderDefinition
   7 } from "./core";
   8 import {uniqueId} from "../../../services/util";
   9 import {el} from "../../utils/dom";
  10
  11 export interface EditorFormFieldDefinition {
  12     label: string;
  13     name: string;
  14     type: 'text' | 'select' | 'textarea';
  15 }
  16
  17 export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefinition {
  18     type: 'select',
  19     valuesByLabel: Record<string, string>
  20 }
  21
  22 interface EditorFormTabDefinition {
  23     label: string;
  24     contents: EditorFormFieldDefinition[];
  25 }
  26
  27 export interface EditorFormDefinition {
  28     submitText: string;
  29     action: (formData: FormData, context: EditorUiContext) => Promise<boolean>;
  30     fields: (EditorFormFieldDefinition|EditorUiBuilderDefinition)[];
  31 }
  32
  33 export class EditorFormField extends EditorUiElement {
  34     protected definition: EditorFormFieldDefinition;
  35
  36     constructor(definition: EditorFormFieldDefinition) {
  37         super();
  38         this.definition = definition;
  39     }
  40
  41     setValue(value: string) {
  42         const input = this.getDOMElement().querySelector('input,select,textarea') as HTMLInputElement;
  43         input.value = value;
  44     }
  45
  46     getName(): string {
  47         return this.definition.name;
  48     }
  49
  50     protected buildDOM(): HTMLElement {
  51         const id = `editor-form-field-${this.definition.name}-${Date.now()}`;
  52         let input: HTMLElement;
  53
  54         if (this.definition.type === 'select') {
  55             const options = (this.definition as EditorSelectFormFieldDefinition).valuesByLabel
  56             const labels = Object.keys(options);
  57             const optionElems = labels.map(label => el('option', {value: options[label]}, [this.trans(label)]));
  58             input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems);
  59         } else if (this.definition.type === 'textarea') {
  60             input = el('textarea', {id, name: this.definition.name, class: 'editor-form-field-input'});
  61         } else {
  62             input = el('input', {id, name: this.definition.name, class: 'editor-form-field-input'});
  63         }
  64
  65         return el('div', {class: 'editor-form-field-wrapper'}, [
  66             el('label', {class: 'editor-form-field-label', for: id}, [this.trans(this.definition.label)]),
  67             input,
  68         ]);
  69     }
  70 }
  71
  72 export class EditorForm extends EditorContainerUiElement {
  73     protected definition: EditorFormDefinition;
  74     protected onCancel: null|(() => void) = null;
  75
  76     constructor(definition: EditorFormDefinition) {
  77         let children: (EditorFormField|EditorUiElement)[] = definition.fields.map(fieldDefinition => {
  78             if (isUiBuilderDefinition(fieldDefinition)) {
  79                 return fieldDefinition.build();
  80             }
  81             return new EditorFormField(fieldDefinition)
  82         });
  83
  84         super(children);
  85         this.definition = definition;
  86     }
  87
  88     setValues(values: Record<string, string>) {
  89         for (const name of Object.keys(values)) {
  90             const field = this.getFieldByName(name);
  91             if (field) {
  92                 field.setValue(values[name]);
  93             }
  94         }
  95     }
  96
  97     setOnCancel(callback: () => void) {
  98         this.onCancel = callback;
  99     }
 100
 101     protected getFieldByName(name: string): EditorFormField|null {
 102
 103         const search = (children: EditorUiElement[]): EditorFormField|null => {
 104             for (const child of children) {
 105                 if (child instanceof EditorFormField && child.getName() === name) {
 106                     return child;
 107                 } else if (child instanceof EditorContainerUiElement) {
 108                     const matchingChild = search(child.getChildren());
 109                     if (matchingChild) {
 110                         return matchingChild;
 111                     }
 112                 }
 113             }
 114
 115             return null;
 116         };
 117
 118         return search(this.getChildren());
 119     }
 120
 121     protected buildDOM(): HTMLElement {
 122         const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans('Cancel')]);
 123         const form = el('form', {}, [
 124             ...this.children.map(child => child.getDOMElement()),
 125             el('div', {class: 'editor-form-actions'}, [
 126                 cancelButton,
 127                 el('button', {type: 'submit', class: 'editor-form-action-primary'}, [this.trans(this.definition.submitText)]),
 128             ])
 129         ]);
 130
 131         form.addEventListener('submit', (event) => {
 132             event.preventDefault();
 133             const formData = new FormData(form as HTMLFormElement);
 134             this.definition.action(formData, this.getContext());
 135         });
 136
 137         cancelButton.addEventListener('click', (event) => {
 138             if (this.onCancel) {
 139                 this.onCancel();
 140             }
 141         });
 142
 143         return form;
 144     }
 145 }
 146
 147 export class EditorFormTab extends EditorContainerUiElement {
 148
 149     protected definition: EditorFormTabDefinition;
 150     protected fields: EditorFormField[];
 151     protected id: string;
 152
 153     constructor(definition: EditorFormTabDefinition) {
 154         const fields = definition.contents.map(fieldDef => new EditorFormField(fieldDef));
 155         super(fields);
 156
 157         this.definition = definition;
 158         this.fields = fields;
 159         this.id = uniqueId();
 160     }
 161
 162     public getLabel(): string {
 163         return this.getContext().translate(this.definition.label);
 164     }
 165
 166     public getId(): string {
 167         return this.id;
 168     }
 169
 170     protected buildDOM(): HTMLElement {
 171         return el(
 172             'div',
 173             {
 174                 class: 'editor-form-tab-content',
 175                 role: 'tabpanel',
 176                 id: `editor-tabpanel-${this.id}`,
 177                 'aria-labelledby': `editor-tab-${this.id}`,
 178             },
 179             this.fields.map(f => f.getDOMElement())
 180         );
 181     }
 182 }
 183 export class EditorFormTabs extends EditorContainerUiElement {
 184
 185     protected definitions: EditorFormTabDefinition[] = [];
 186     protected tabs: EditorFormTab[] = [];
 187
 188     constructor(definitions: EditorFormTabDefinition[]) {
 189         const tabs: EditorFormTab[] = definitions.map(d => new EditorFormTab(d));
 190         super(tabs);
 191
 192         this.definitions = definitions;
 193         this.tabs = tabs;
 194     }
 195
 196     protected buildDOM(): HTMLElement {
 197         const controls: HTMLElement[] = [];
 198         const contents: HTMLElement[] = [];
 199
 200         const selectTab = (tabIndex: number) => {
 201             for (let i = 0; i < controls.length; i++) {
 202                 controls[i].setAttribute('aria-selected', (i === tabIndex) ? 'true' : 'false');
 203             }
 204             for (let i = 0; i < contents.length; i++) {
 205                 contents[i].hidden = !(i === tabIndex);
 206             }
 207         };
 208
 209         for (const tab of this.tabs) {
 210             const button = el('button', {
 211                 class: 'editor-form-tab-control',
 212                 type: 'button',
 213                 role: 'tab',
 214                 id: `editor-tab-${tab.getId()}`,
 215                 'aria-controls': `editor-tabpanel-${tab.getId()}`
 216             }, [tab.getLabel()]);
 217             contents.push(tab.getDOMElement());
 218             controls.push(button);
 219
 220             button.addEventListener('click', event => {
 221                 selectTab(controls.indexOf(button));
 222             });
 223         }
 224
 225         selectTab(0);
 226
 227         return el('div', {class: 'editor-form-tab-container'}, [
 228             el('div', {class: 'editor-form-tab-controls'}, controls),
 229             el('div', {class: 'editor-form-tab-contents'}, contents),
 230         ]);
 231     }
 232 }