Bring back fullscreen mode and add expansed mode. (#843)

4 years ago · fd2b2eb7e2
7 changed files with 171 additions and 32 deletions
--- a/backend/src/Squidex/wwwroot/scripts/editor-plain.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-plain.html
@ -7,17 +7,37 @@
 	
    <style>
        .editor {
-            border: 1px solid #eee;
+            border: 1px solid #ddd;
            border-radius: 4px;
            height: 500px;
 			width: 100%;
        }
+
+        .btn {
+			background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+			padding: 8px 15px;
+			margin-right: 5px;
+			margin-bottom: 5px;
+        }
    </style>

 </head>

 <body style="margin: 0px; padding: 0px;">
+	<div>
+		<button class="btn" id="expanded">
+			Toggle Expanded
+		</button>
+		<button class="btn" id="fullscreen">
+			Toggle Fullscreen
+		</button>
+	</div>
+
+	<div>
 		<textarea name="content" class="editor" id="editor"></textarea>
+	</div>

 	<script>
 		var element = document.getElementById('editor');
@ -27,6 +47,14 @@
        // Furthermore it sends the current size to the parent.
 		var field = new SquidexFormField();

+		document.getElementById('expanded').addEventListener('click', function () {
+			field.toggleExpanded();
+        });
+
+        document.getElementById('fullscreen').addEventListener('click', function () {
+            field.toggleFullscreen();
+        });
+		
 		field.onValueChanged(function (value) {
 			if (value) {
 				element.value = JSON.stringify(value);
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@ -144,24 +144,26 @@ function SquidexPlugin() {
 }

 function SquidexFormField() {
-    var initHandler;
-    var initCalled = false;
-    var disabledHandler;
+    var context;
+    var currentConfirm;
+    var currentPickAssets;
    var disabled = false;
-    var fullscreen = false;
-    var fullscreenHandler = false;
-    var movedHandler;
-    var valueHandler;
-    var value;
-    var languageHandler;
-    var language;
-    var formValueHandler;
+    var disabledHandler;
    var formValue;
+    var formValueHandler;
+    var fullscreen = false;
+    var fullscreenHandler
+    var expanded = false;
+    var expandedHandler;
    var index;
-    var currentConfirm;
-    var currentPickAssets;
-    var context;
+    var initCalled = false;
+    var initHandler;
+    var language;
+    var languageHandler;
+    var movedHandler;
    var timer;
+    var value;
+    var valueHandler;

    function raiseDisabled() {
        if (disabledHandler) {
@ -169,6 +171,12 @@ function SquidexFormField() {
        }
    }

+    function raiseExpanded() {
+        if (expandedHandler) {
+            expandedHandler(expanded);
+        }
+    }
+
    function raiseFullscreen() {
        if (fullscreenHandler) {
            fullscreenHandler(fullscreen);
@ -246,6 +254,10 @@ function SquidexFormField() {
                fullscreen = event.data.fullscreen;

                raiseFullscreen();
+            } else if (type === 'expandedChanged') {
+                expanded = event.data.expanded;
+
+                raiseExpanded();
            } else if (type === 'init') {
                context = event.data.context;

@ -324,6 +336,13 @@ function SquidexFormField() {
            return fullscreen;
        },

+        /**
+         * Get the expanded state.
+         */
+        isExpanded: function () {
+            return expanded;
+        },
+
        /**
         * Notifies the control container that the editor has been touched.
         */
@ -353,6 +372,15 @@ function SquidexFormField() {
            }
        },

+        /**
+         * Notifies the parent to go to expanded mode.
+         */
+        toggleExpanded: function () {
+            if (window.parent) {
+                window.parent.postMessage({ type: 'expanded', mode: !expanded }, '*');
+            }
+        },
+
        /**
         * Notifies the control container that the value has been changed.
         *
@ -539,6 +567,21 @@ function SquidexFormField() {
            raiseFullscreen();
        },

+        /**
+         * Register an function that is called whenever the expanded mode has changed.
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
+         */
+        onExpanded: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
+            expandedHandler = callback;
+
+            raiseExpanded();
+        },
+
        /**
         * Clean the editor SDK.
         */
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.html
@ -1,7 +1,7 @@
-<div class="field" [class.fullscreen]="isFullscreen" *ngIf="formModel">
+<div class="field" [class.expanded]="isExpanded" *ngIf="formModel">
    <div class="buttons-container" *ngIf="canUnset">
        <div class="buttons">
-            <button type="button" class="btn btn-sm btn-outline-secondary force" (click)="toggleFullscreen()">
+            <button type="button" class="btn btn-sm btn-outline-secondary force" (click)="toggleExpanded()">
                <i class="icon-fullscreen"></i>
            </button>
    
@ -28,6 +28,8 @@
 		<ng-container *ngIf="field.properties.editorUrl; else noEditor">
            <sqx-iframe-editor [url]="field.properties.editorUrl" #editor
                [context]="formContext"
+                [expanded]="isExpanded"
+                (expandedChange)="toggleExpanded()"
                [formControlBinding]="$any(fieldForm)"
                [formValue]="form.valueChanges | async"
                [formIndex]="index"
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.scss
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.scss
@ -12,7 +12,7 @@
        font-weight: normal;
    }

-    &.fullscreen {
+    &.expanded {
        @include absolute(0, 0, 0, 0);
        background-color: $color-white;
        border: 0;
--- a/frontend/src/app/features/content/shared/forms/field-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/field-editor.component.ts
@ -5,7 +5,7 @@
 * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
 */

-import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, hasNoValue$, MathHelper, Types } from '@app/shared';
@ -18,6 +18,9 @@ import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, hasNoVa
 export class FieldEditorComponent implements OnChanges {
    public readonly uniqueId = MathHelper.guid();

+    @Output()
+    public expandedChange = new EventEmitter();
+
    @Input()
    public form!: EditContentForm;

@ -49,7 +52,7 @@ export class FieldEditorComponent implements OnChanges {
    public editor!: ElementRef;

    public isEmpty?: Observable<boolean>;
-    public isFullscreen = false;
+    public isExpanded = false;

    public get field() {
        return this.formModel.field;
@ -79,8 +82,8 @@ export class FieldEditorComponent implements OnChanges {
        }
    }

-    public toggleFullscreen() {
-        this.isFullscreen = !this.isFullscreen;
+    public toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
    }

    public unset() {
--- a/frontend/src/app/features/content/shared/forms/iframe-editor.component.html
+++ b/frontend/src/app/features/content/shared/forms/iframe-editor.component.html
@ -1,6 +1,8 @@
 <div #container>
+    <div #inner [class.fullscreen]="snapshot.isFullscreen">
        <iframe #iframe scrolling="no" width="100%" [style.height]="0" [attr.src]="computedUrl | sqxSafeResourceUrl"></iframe>
    </div>
+</div>

 <ng-container *sqxModal="assetsDialog">
    <sqx-assets-selector
--- a/frontend/src/app/features/content/shared/forms/iframe-editor.component.ts
+++ b/frontend/src/app/features/content/shared/forms/iframe-editor.component.ts
@ -5,19 +5,24 @@
 * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
 */

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, Output, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { DialogModel, DialogService, disabled$, StatefulComponent, Types, value$ } from '@app/framework';
 import { AppsState, AssetDto, computeEditorUrl } from '@app/shared';

+interface State {
+    // True, when the editor is shown as fullscreen.
+    isFullscreen: boolean;
+}
+
@Component({
    selector: 'sqx-iframe-editor[context][formField][formIndex][formValue][formControlBinding]',
    styleUrls: ['./iframe-editor.component.scss'],
    templateUrl: './iframe-editor.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class IFrameEditorComponent extends StatefulComponent<{}> implements OnChanges, OnDestroy {
+export class IFrameEditorComponent extends StatefulComponent<State> implements OnChanges, OnDestroy {
    private value: any;
    private isInitialized = false;
    private isDisabled = false;
@ -26,6 +31,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
    @ViewChild('iframe', { static: false })
    public iframe!: ElementRef<HTMLIFrameElement>;

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

@ -64,11 +81,15 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
        private readonly renderer: Renderer2,
        private readonly router: Router,
    ) {
-        super(changeDetector, {});
+        super(changeDetector, {
+            isFullscreen: false,
+        });
    }

    public ngOnDestroy() {
        super.ngOnDestroy();
+
+        this.toggleFullscreen(false);
    }

    public ngOnChanges(changes: SimpleChanges) {
@ -76,14 +97,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
            this.sendFormValue();
        }

-        if (changes['language']) {
-            this.sendLanguage();
-        }
-
        if (changes['formIndex']) {
            this.sendMoved();
        }

+        if (changes['expanded']) {
+            this.sendExpanded();
+        }
+
+        if (changes['language']) {
+            this.sendLanguage();
+        }
+
        if (changes['formControlBinding']) {
            this.unsubscribeAll();

@ -112,6 +137,8 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
                this.isInitialized = true;

                this.sendInit();
+                this.sendFullscreen();
+                this.sendExpanded();
                this.sendFormValue();
                this.sendLanguage();
                this.sendDisabled();
@ -125,6 +152,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
                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 === 'expanded') {
+                const { mode } = event.data;
+
+                if (mode !== this.expanded) {
+                    this.expandedChange.emit();
+                }
            } else if (type === 'valueChanged') {
                const { value } = event.data;

@ -206,6 +245,14 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
        this.sendMessage('valueChanged', { value: this.value });
    }

+    private sendFullscreen() {
+        this.sendMessage('fullscreenChanged', { fullscreen: this.snapshot.isFullscreen });
+    }
+
+    private sendExpanded() {
+        this.sendMessage('expandedChanged', { expanded: this.expanded });
+    }
+
    private sendDisabled() {
        this.sendMessage('disabled', { isDisabled: this.isDisabled });
    }
@ -228,6 +275,20 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
        }
    }

+    private toggleFullscreen(isFullscreen: boolean) {
+        this.next({ isFullscreen });
+
+        let target = this.container.nativeElement;
+
+        if (isFullscreen) {
+            target = document.body;
+        }
+
+        this.renderer.appendChild(target, this.inner.nativeElement);
+
+        this.sendFullscreen();
+    }
+
    private sendMessage(type: string, payload: any) {
        if (!this.iframe?.nativeElement) {
            return;