Fullscreen mode for editor.

5 years ago · 99d88700c0
6 changed files with 108 additions and 15 deletions
--- 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;
--- 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;
+        }
    </style>
 </head>

 <body>
+    <a href="#" id="fullscreenButton">Toggle fullscreen</a>
+
    <textarea name="content" id="editor"></textarea>

    <script>
+        var fullscreen = false;
+
        var element = document.getElementById('editor');

        ClassicEditor
@ -57,6 +68,13 @@
                        field.touched();
                    }
                });
+
+                document.getElementById('fullscreenButton')
+                    .addEventListener('click', function () {
+                        fullscreen = !fullscreen;
+
+                        field.fullscreen(fullscreen);
+                    });
            });
    </script>
 </body>
--- 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 @@
-<iframe #iframe scrolling="no" width="100%"></iframe>
+<div #container>
+    <div #inner [class.fullscreen]="snapshot.isFullscreen">
+        <iframe #iframe scrolling="no" width="100%"></iframe>
+    </div>
+</div>
+
--- 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;
+    }
 }
--- 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<any, any> implements OnChanges, AfterViewInit {
+export class IFrameEditorComponent extends StatefulControlComponent<State, any> implements OnChanges, OnDestroy, AfterViewInit {
    private value: any;
    private isDisabled = false;
    private isInitialized = false;
@ -31,6 +36,12 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
    @ViewChild('iframe', { static: false })
    public iframe: ElementRef<HTMLIFrameElement>;

+    @ViewChild('container', { static: false })
+    public container: ElementRef<HTMLElement>;
+
+    @ViewChild('inner', { static: false })
+    public inner: ElementRef<HTMLElement>;
+
    @Input()
    public context: any = {};

@ -40,11 +51,19 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> 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<any, any> 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<any, any> im
                    } else if (type === 'touched') {
                        this.callTouched();
                    }
+
+                    this.detectChanges();
                }
            }));
    }
@ -129,6 +156,18 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> 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;
--- 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<State, str
            this.simplemde.codemirror.on('refresh', () => {
                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<State, str
                }
            });
    }
+
+    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 }));
+    }
 }