From 109a0aaa0340979e91907a5c93907d339d71b98f Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 14 Oct 2020 13:07:54 +0200
Subject: [PATCH] Fixes for fullscreen mode.

---
 .../src/Squidex/wwwroot/scripts/editor-sdk.js | 25 +++++++++++++--
 .../wwwroot/scripts/editor-simple.html        | 32 ++++++++++++++++---
 .../forms/editors/iframe-editor.component.ts  |  9 +++++-
 3 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
index cebeebedd..baa25ec4e 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@@ -124,6 +124,8 @@ function SquidexFormField() {
     var initCalled = false;
     var disabledHandler;
     var disabled = false;
+    var fullscreen = false;
+    var fullscreenHandler = false;
     var valueHandler;
     var value;
     var formValueHandler;
@@ -149,6 +151,12 @@ function SquidexFormField() {
         }
     }
 
+    function raiseFullscreen() {
+        if (fullscreenHandler) {
+            fullscreenHandler(fullscreen);
+        }
+    }
+
     function raiseInit() {
         if (initHandler && !initCalled && context) {
             initHandler(context);
@@ -174,6 +182,10 @@ function SquidexFormField() {
                 formValue = event.data.formValue;
 
                 raiseFormValueChanged();
+            } else if (type === 'fullscreenChanged') {
+                fullscreen = event.data.fullscreen;
+
+                raiseFullscreen();
             } else if (type === 'init') {
                 context = event.data.context;
 
@@ -233,9 +245,9 @@ function SquidexFormField() {
          *
          * @params mode: boolean: The fullscreen mode.
          */
-        fullscreen: function (mode) {
+        toggleFullscreen: function () {
             if (window.parent) {
-                window.parent.postMessage({ type: 'fullscreen', mode: mode }, '*');
+                window.parent.postMessage({ type: 'fullscreen', mode: !fullscreen }, '*');
             }
         },
 
@@ -287,6 +299,15 @@ function SquidexFormField() {
 
             raiseFormValueChanged();
         },
+        
+        /**
+         * Register the fullscreen changed handler.
+         */
+        onFullscreen: function (callback) {
+            fullscreenHandler = callback;
+
+            raiseFullscreen();
+        },
 
         /**
          * Clean the editor SDK.
diff --git a/backend/src/Squidex/wwwroot/scripts/editor-simple.html b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
index 00ee5778c..a63869b46 100644
--- a/backend/src/Squidex/wwwroot/scripts/editor-simple.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-simple.html
@@ -13,6 +13,24 @@
             min-height: 250px;
         }
 
+        .fullscreen {
+            height: 100vh;
+        }
+
+        .fullscreen .ck-editor {
+            position: fixed !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1000;
+        }
+
+        .fullscreen .ck-editor .ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline,
+        .fullscreen .ck-editor .ck.ck-editor__main {
+            height: 100%;
+        }
+
         #fullscreenButton {
             position: absolute;
             z-index: 10000;
@@ -28,8 +46,6 @@
     <textarea name="content" id="editor"></textarea>
 
     <script>
-        var fullscreen = false;
-
         var element = document.getElementById('editor');
 
         ClassicEditor
@@ -55,6 +71,14 @@
                     editor.set('isReadOnly', disabled);
                 });
 
+                field.onFullscreen(function (fullscreen) {
+                    if (fullscreen) {
+                        document.body.classList.add('fullscreen');
+                    } else {
+                        document.body.classList.remove('fullscreen');
+                    }
+                });
+
                 editor.model.document.on('change', function () {
                     var data = editor.getData();
 
@@ -71,9 +95,7 @@
 
                 document.getElementById('fullscreenButton')
                     .addEventListener('click', function () {
-                        fullscreen = !fullscreen;
-
-                        field.fullscreen(fullscreen);
+                        field.toggleFullscreen();
                     });
             });
     </script>
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 0e3b696d5..b3fa7063a 100644
--- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
+++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
@@ -94,6 +94,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
                         this.isInitialized = true;
 
                         this.sendInit();
+                        this.sendFullscreen();
                         this.sendFormValue();
                         this.sendDisabled();
                         this.sendValue();
@@ -148,6 +149,10 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
         this.sendMessage('valueChanged', { value: this.value });
     }
 
+    private sendFullscreen() {
+        this.sendMessage('fullscreenChanged', { fullscreen: this.snapshot.isFullscreen });
+    }
+
     private sendDisabled() {
         this.sendMessage('disabled', { isDisabled: this.isDisabled });
     }
@@ -157,6 +162,8 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
     }
 
     private toggleFullscreen(isFullscreen: boolean) {
+        this.next(s => ({ ...s, isFullscreen }));
+
         let target = this.container.nativeElement;
 
         if (isFullscreen) {
@@ -165,7 +172,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
 
         this.renderer.appendChild(target, this.inner.nativeElement);
 
-        this.next(s => ({ ...s, isFullscreen }));
+        this.sendFullscreen();
     }
 
     private sendMessage(type: string, payload: any) {