diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.html b/src/Squidex/app/features/content/pages/content/content-field.component.html index a6098056f..c43e3aa8e 100644 --- a/src/Squidex/app/features/content/pages/content/content-field.component.html +++ b/src/Squidex/app/features/content/pages/content/content-field.component.html @@ -21,6 +21,7 @@ { @Input() public form: EditContentForm; + @Input() + public formContext: any; + @Input() public field: RootFieldDto; diff --git a/src/Squidex/app/features/content/shared/array-item.component.html b/src/Squidex/app/features/content/shared/array-item.component.html index 5f1b4f23d..597030121 100644 --- a/src/Squidex/app/features/content/shared/array-item.component.html +++ b/src/Squidex/app/features/content/shared/array-item.component.html @@ -40,6 +40,7 @@
- + + @@ -20,6 +24,7 @@ diff --git a/src/Squidex/app/features/content/shared/field-editor.component.ts b/src/Squidex/app/features/content/shared/field-editor.component.ts index 69e129549..f534ad7d7 100644 --- a/src/Squidex/app/features/content/shared/field-editor.component.ts +++ b/src/Squidex/app/features/content/shared/field-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { Component, Input, OnChanges } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { FormControl } from '@angular/forms'; import { @@ -20,10 +20,13 @@ import { styleUrls: ['./field-editor.component.scss'], templateUrl: './field-editor.component.html' }) -export class FieldEditorComponent implements OnChanges { +export class FieldEditorComponent { @Input() public form: EditContentForm; + @Input() + public formContext: any; + @Input() public field: FieldDto; @@ -43,10 +46,4 @@ export class FieldEditorComponent implements OnChanges { public displaySuffix: string; public uniqueId = MathHelper.guid(); - - public ngOnChanges() { - let a = 0; - a++; - console.log(a); - } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts index f316e9ece..5eb1115cc 100644 --- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts @@ -5,7 +5,7 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { ExternalControlComponent, Types } from '@app/framework/internal'; @@ -29,6 +29,12 @@ export class IFrameEditorComponent extends ExternalControlComponent impleme @ViewChild('iframe') public iframe: ElementRef; + @Input() + public context: any = {}; + + @Input() + public formValue: any; + @Input() public url: string; @@ -38,8 +44,14 @@ export class IFrameEditorComponent extends ExternalControlComponent impleme super(changeDetector); } - public ngOnChanges() { - this.iframe.nativeElement.src = this.url; + public ngOnChanges(changes: SimpleChanges) { + if (changes['url']) { + this.iframe.nativeElement.src = this.url; + } + + if (changes['formValue'] && this.formValue) { + this.sendFormValue(); + } } public ngOnInit(): void { @@ -51,8 +63,10 @@ export class IFrameEditorComponent extends ExternalControlComponent impleme if (type === 'started') { this.isInitialized = true; - this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled }); - this.sendMessage({ type: 'valueChanged', value: this.value }); + this.sendMessage('init', { context: this.context || {} }); + this.sendFormValue(); + this.sendDisabled(); + this.sendValue(); } else if (type === 'resize') { const { height } = event.data; @@ -75,19 +89,33 @@ export class IFrameEditorComponent extends ExternalControlComponent impleme public writeValue(obj: any) { this.value = obj; - this.sendMessage({ type: 'valueChanged', value: this.value }); + this.sendValue(); } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled }); + this.sendDisabled(); } - private sendMessage(message: any) { + private sendValue() { + this.sendMessage('valueChanged', { value: this.value }); + } + + private sendDisabled() { + this.sendMessage('disabled', { isDisabled: this.isDisabled }); + } + + private sendFormValue() { + this.sendMessage('formValueChanged', { formValue: this.formValue }); + } + + private sendMessage(type: string, payload: any) { const iframe = this.iframe.nativeElement; if (this.isInitialized && iframe.contentWindow && Types.isFunction(iframe.contentWindow.postMessage)) { + const message = { type, ...payload }; + iframe.contentWindow.postMessage(message, '*'); } } diff --git a/src/Squidex/app/shared/state/contents.forms.ts b/src/Squidex/app/shared/state/contents.forms.ts index 9dc4f9898..d37732d70 100644 --- a/src/Squidex/app/shared/state/contents.forms.ts +++ b/src/Squidex/app/shared/state/contents.forms.ts @@ -15,7 +15,8 @@ import { formControls, ImmutableArray, Types, - ValidatorsEx + ValidatorsEx, + value$ } from '@app/framework'; import { AppLanguageDto } from './../services/app-languages.service'; @@ -320,6 +321,9 @@ export class FieldDefaultValue implements FieldPropertiesVisitor { } export class EditContentForm extends Form { + public value = + value$(this.form); + constructor( private readonly schema: SchemaDetailsDto, private readonly languages: ImmutableArray diff --git a/src/Squidex/wwwroot/scripts/editor-sdk.js b/src/Squidex/wwwroot/scripts/editor-sdk.js index ff17d8c23..b7bf83aff 100644 --- a/src/Squidex/wwwroot/scripts/editor-sdk.js +++ b/src/Squidex/wwwroot/scripts/editor-sdk.js @@ -1,26 +1,62 @@ function SquidexFormField() { + var initHandler; + var initCalled = false; var disabledHandler; var disabled; var valueHandler; var value; + var formValueHandler; + var formValue; + var context; var timer; var height = document.body.offsetHeight; + function raiseDisabled() { + if (disabledHandler) { + disabledHandler(disabled); + } + } + + function raiseValueChanged() { + if (valueHandler) { + valueHandler(value); + } + } + + function raiseFormValueChanged() { + if (formValueHandler && formValue) { + formValueHandler(formValue); + } + } + + function raiseInit() { + if (initHandler && !initCalled && context) { + initHandler(context); + initCalled = true; + } + } + function eventListener(event) { if (event.source !== window) { - if (event.data.type === 'disabled') { + var type = event.data.type; + + if (type === 'disabled') { disabled = event.data.isDisabled; - if (disabledHandler) { - disabledHandler(disabled); - } - } else if (event.data.type === 'valueChanged') { - var value = event.data.value; + raiseDisabled(); + } else if (type === 'valueChanged') { + value = event.data.value; + + raiseValueChanged(); + } else if (type === 'formValueChanged') { + formValue = event.data.formValue; + + raiseFormValueChanged(); + } else if (type === 'init') { + context = event.data.context; - if (valueHandler) { - valueHandler(value); - } + raiseInit(); } } } @@ -44,6 +80,27 @@ function SquidexFormField() { }, 500); var editor = { + /** + * Get the current value. + */ + getValue: function () { + return value; + }, + + /** + * Get the current value. + */ + getContext: function () { + return context; + }, + + /** + * Get the current form value. + */ + getFormValue: function () { + return formValue; + }, + /** * Notifies the control container that the editor has been touched. */ @@ -62,26 +119,40 @@ function SquidexFormField() { } }, + /** + * Register the init handler. + */ + onInit: function (callback) { + initHandler = callback; + + raiseInit(); + }, + /** * Register the disabled handler. */ onDisabled: function (callback) { disabledHandler = callback; - if (callback) { - callback(disabled); - } + raiseDisabled(); }, /** - * Register the disabled handler. + * Register the value changed handler. */ onValueChanged: function (callback) { valueHandler = callback; - if (callback) { - callback(value); - } + raiseValueChanged(); + }, + + /** + * Register the form value changed handler. + */ + onFormValueChanged: function (callback) { + formValueHandler = callback; + + raiseFormValueChanged(); }, /**