webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Lexical: Created core modal functionality

Browse Source
This commit is contained in:
Dan Brown
2024-06-01 16:49:47 +01:00
parent ae98745439
commit 7c504a10a8
8 changed files with 222 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/wysiwyg/ui/framework/forms.ts
View File

@ -15,9 +15,7 @@ export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefiniti
export interface EditorFormDefinition {
submitText: string;
cancelText: string;
action: (formData: FormData, context: EditorUiContext) => boolean;
cancel: () => void;
fields: EditorFormFieldDefinition[];
}
@ -29,6 +27,15 @@ export class EditorFormField extends EditorUiElement {
this.definition = definition;
}
setValue(value: string) {
const input = this.getDOMElement().querySelector('input,select') as HTMLInputElement;
input.value = value;
}
getName(): string {
return this.definition.name;
}
protected buildDOM(): HTMLElement {
const id = `editor-form-field-${this.definition.name}-${Date.now()}`;
let input: HTMLElement;
@ -51,14 +58,38 @@ export class EditorFormField extends EditorUiElement {
export class EditorForm extends EditorContainerUiElement {
protected definition: EditorFormDefinition;
protected onCancel: null|(() => void) = null;
constructor(definition: EditorFormDefinition) {
super(definition.fields.map(fieldDefinition => new EditorFormField(fieldDefinition)));
this.definition = definition;
}
setValues(values: Record<string, string>) {
for (const name of Object.keys(values)) {
const field = this.getFieldByName(name);
if (field) {
field.setValue(values[name]);
}
}
}
setOnCancel(callback: () => void) {
this.onCancel = callback;
}
protected getFieldByName(name: string): EditorFormField|null {
for (const child of this.children as EditorFormField[]) {
if (child.getName() === name) {
return child;
}
}
return null;
}
protected buildDOM(): HTMLElement {
const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans(this.definition.cancelText)]);
const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans('Cancel')]);
const form = el('form', {}, [
...this.children.map(child => child.getDOMElement()),
el('div', {class: 'editor-form-actions'}, [
@ -74,7 +105,9 @@ export class EditorForm extends EditorContainerUiElement {
});
cancelButton.addEventListener('click', (event) => {
this.definition.cancel();
if (this.onCancel) {
this.onCancel();
}
});
return form;