diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
index 142442f47..cebeebedd 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@@ -219,6 +219,8 @@ function SquidexFormField() {
/*
* Notifies the parent to navigate to the path.
+ *
+ * @params url: string: The url to navigate to.
*/
navigate: function (url) {
if (window.parent) {
@@ -226,8 +228,21 @@ function SquidexFormField() {
}
},
+ /*
+ * Notifies the parent to go to fullscreen mode.
+ *
+ * @params mode: boolean: The fullscreen mode.
+ */
+ fullscreen: function (mode) {
+ if (window.parent) {
+ window.parent.postMessage({ type: 'fullscreen', mode: mode }, '*');
+ }
+ },
+
/**
* Notifies the control container that the value has been changed.
+ *
+ * @params newValue: any: The new field value.
*/
valueChanged: function (newValue) {
value = newValue;
diff --git a/backend/src/Squidex/wwwroot/scripts/editor-simple.html b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
index ef07e44a3..00ee5778c 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-simple.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
@@ -12,13 +12,24 @@
.ck-editor__editable {
min-height: 250px;
}
+
+ #fullscreenButton {
+ position: absolute;
+ z-index: 10000;
+ right: 10px;
+ top: 10px;
+ }
+ Toggle fullscreen
+
diff --git a/frontend/app/framework/angular/forms/editors/iframe-editor.component.html b/frontend/app/framework/angular/forms/editors/iframe-editor.component.html
index 19adae7f7..706adf00c 100644
--- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.html
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.html
@@ -1 +1,6 @@
-
+
+
diff --git a/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss b/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
index ae2678456..105411a21 100644
--- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
@@ -2,4 +2,16 @@ iframe {
background: 0;
border: 0;
overflow: hidden;
+}
+
+.fullscreen {
+ @include fixed(0, 0, 0, 0);
+ background: $panel-light-background;
+ border: 0;
+ border-radius: 0;
+ z-index: 1040;
+
+ iframe {
+ height: 100% !important;
+ }
}
\ No newline at end of file
diff --git a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
index f0c9e7ea2..0e3b696d5 100644
--- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
@@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
*/
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Router } from '@angular/router';
import { StatefulControlComponent, Types } from '@app/framework/internal';
@@ -14,6 +14,11 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IFrameEditorComponent), multi: true
};
+interface State {
+ // True, when the editor is shown as fullscreen.
+ isFullscreen: boolean;
+}
+
@Component({
selector: 'sqx-iframe-editor',
styleUrls: ['./iframe-editor.component.scss'],
@@ -23,7 +28,7 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class IFrameEditorComponent extends StatefulControlComponent implements OnChanges, AfterViewInit {
+export class IFrameEditorComponent extends StatefulControlComponent implements OnChanges, OnDestroy, AfterViewInit {
private value: any;
private isDisabled = false;
private isInitialized = false;
@@ -31,6 +36,12 @@ export class IFrameEditorComponent extends StatefulControlComponent im
@ViewChild('iframe', { static: false })
public iframe: ElementRef;
+ @ViewChild('container', { static: false })
+ public container: ElementRef;
+
+ @ViewChild('inner', { static: false })
+ public inner: ElementRef;
+
@Input()
public context: any = {};
@@ -40,11 +51,19 @@ export class IFrameEditorComponent extends StatefulControlComponent im
@Input()
public url: string;
+ public fullscreen: boolean;
+
constructor(changeDetector: ChangeDetectorRef,
private readonly renderer: Renderer2,
private readonly router: Router
) {
- super(changeDetector, {});
+ super(changeDetector, {
+ isFullscreen: false
+ });
+ }
+
+ public ngOnDestroy() {
+ this.toggleFullscreen(false);
}
public ngOnChanges(changes: SimpleChanges) {
@@ -81,11 +100,17 @@ export class IFrameEditorComponent extends StatefulControlComponent im
} else if (type === 'resize') {
const { height } = event.data;
- this.iframe.nativeElement.height = height + 'px';
+ this.renderer.setStyle(this.iframe.nativeElement, 'height', height + 'px');
} else if (type === 'navigate') {
const { url } = event.data;
this.router.navigateByUrl(url);
+ } else if (type === 'fullscreen') {
+ const { mode } = event.data;
+
+ if (mode !== this.snapshot.isFullscreen) {
+ this.toggleFullscreen(mode);
+ }
} else if (type === 'valueChanged') {
const { value } = event.data;
@@ -97,6 +122,8 @@ export class IFrameEditorComponent extends StatefulControlComponent im
} else if (type === 'touched') {
this.callTouched();
}
+
+ this.detectChanges();
}
}));
}
@@ -129,6 +156,18 @@ export class IFrameEditorComponent extends StatefulControlComponent im
this.sendMessage('formValueChanged', { formValue: this.formValue });
}
+ private toggleFullscreen(isFullscreen: boolean) {
+ let target = this.container.nativeElement;
+
+ if (isFullscreen) {
+ target = document.body;
+ }
+
+ this.renderer.appendChild(target, this.inner.nativeElement);
+
+ this.next(s => ({ ...s, isFullscreen }));
+ }
+
private sendMessage(type: string, payload: any) {
if (!this.iframe) {
return;
diff --git a/frontend/app/shared/components/forms/markdown-editor.component.ts b/frontend/app/shared/components/forms/markdown-editor.component.ts
index 286b4bd23..3faaf8edb 100644
--- a/frontend/app/shared/components/forms/markdown-editor.component.ts
+++ b/frontend/app/shared/components/forms/markdown-editor.component.ts
@@ -18,7 +18,7 @@ export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
interface State {
// True, when the editor is shown as fullscreen.
- isFullscreen: false;
+ isFullscreen: boolean;
}
@Component({
@@ -187,15 +187,7 @@ export class MarkdownEditorComponent extends StatefulControlComponent {
const isFullscreen = this.simplemde.isFullscreenActive();
- let target = this.container.nativeElement;
-
- if (isFullscreen) {
- target = document.body;
- }
-
- this.renderer.appendChild(target, this.inner.nativeElement);
-
- this.next(s => ({ ...s, isFullscreen }));
+ this.toggleFullscreen(isFullscreen);
});
this.simplemde.codemirror.on('blur', () => {
@@ -277,4 +269,16 @@ export class MarkdownEditorComponent extends StatefulControlComponent ({ ...s, isFullscreen }));
+ }
}
\ No newline at end of file