tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fullscreen mode for editor.

pull/588/head
Sebastian 5 years ago
parent
f5599327d7
commit
99d88700c0
6 changed files with 108 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      backend/src/Squidex/wwwroot/scripts/editor-sdk.js
  2. 18
      backend/src/Squidex/wwwroot/scripts/editor-simple.html
  3. 7
      frontend/app/framework/angular/forms/editors/iframe-editor.component.html
  4. 12
      frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
  5. 47
      frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
  6. 24
      frontend/app/shared/components/forms/markdown-editor.component.ts

15
backend/src/Squidex/wwwroot/scripts/editor-sdk.js
View File

@ -219,6 +219,8 @@ function SquidexFormField() {
/* /*
* Notifies the parent to navigate to the path. * Notifies the parent to navigate to the path.
*
* @params url: string: The url to navigate to.
*/ */
navigate: function (url) { navigate: function (url) {
if (window.parent) { 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. * Notifies the control container that the value has been changed.
*
* @params newValue: any: The new field value.
*/ */
valueChanged: function (newValue) { valueChanged: function (newValue) {
value = newValue; value = newValue;

18
backend/src/Squidex/wwwroot/scripts/editor-simple.html
View File

@ -12,13 +12,24 @@
.ck-editor__editable { .ck-editor__editable {
min-height: 250px; min-height: 250px;
} }
#fullscreenButton {
position: absolute;
z-index: 10000;
right: 10px;
top: 10px;
}
</style> </style>
</head> </head>
<body> <body>
<a href="#" id="fullscreenButton">Toggle fullscreen</a>
<textarea name="content" id="editor"></textarea> <textarea name="content" id="editor"></textarea>
<script> <script>
var fullscreen = false;
var element = document.getElementById('editor'); var element = document.getElementById('editor');
ClassicEditor ClassicEditor
@ -57,6 +68,13 @@
field.touched(); field.touched();
} }
}); });
document.getElementById('fullscreenButton')
.addEventListener('click', function () {
fullscreen = !fullscreen;
field.fullscreen(fullscreen);
});
}); });
</script> </script>
</body> </body>

7
frontend/app/framework/angular/forms/editors/iframe-editor.component.html
View File

@ -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>

12
frontend/app/framework/angular/forms/editors/iframe-editor.component.scss
View File

@ -2,4 +2,16 @@ iframe {
background: 0; background: 0;
border: 0; border: 0;
overflow: hidden; 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;
}
} }

47
frontend/app/framework/angular/forms/editors/iframe-editor.component.ts
View File

@ -5,7 +5,7 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. * 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 { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { StatefulControlComponent, Types } from '@app/framework/internal'; 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 provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IFrameEditorComponent), multi: true
}; };
interface State {
// True, when the editor is shown as fullscreen.
isFullscreen: boolean;
}
@Component({ @Component({
selector: 'sqx-iframe-editor', selector: 'sqx-iframe-editor',
styleUrls: ['./iframe-editor.component.scss'], styleUrls: ['./iframe-editor.component.scss'],
@ -23,7 +28,7 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
], ],
changeDetection: ChangeDetectionStrategy.OnPush 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 value: any;
private isDisabled = false; private isDisabled = false;
private isInitialized = false; private isInitialized = false;
@ -31,6 +36,12 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
@ViewChild('iframe', { static: false }) @ViewChild('iframe', { static: false })
public iframe: ElementRef<HTMLIFrameElement>; public iframe: ElementRef<HTMLIFrameElement>;
@ViewChild('container', { static: false })
public container: ElementRef<HTMLElement>;
@ViewChild('inner', { static: false })
public inner: ElementRef<HTMLElement>;
@Input() @Input()
public context: any = {}; public context: any = {};
@ -40,11 +51,19 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
@Input() @Input()
public url: string; public url: string;
public fullscreen: boolean;
constructor(changeDetector: ChangeDetectorRef, constructor(changeDetector: ChangeDetectorRef,
private readonly renderer: Renderer2, private readonly renderer: Renderer2,
private readonly router: Router private readonly router: Router
) { ) {
super(changeDetector, {}); super(changeDetector, {
isFullscreen: false
});
}
public ngOnDestroy() {
this.toggleFullscreen(false);
} }
public ngOnChanges(changes: SimpleChanges) { public ngOnChanges(changes: SimpleChanges) {
@ -81,11 +100,17 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
} else if (type === 'resize') { } else if (type === 'resize') {
const { height } = event.data; const { height } = event.data;
this.iframe.nativeElement.height = height + 'px'; this.renderer.setStyle(this.iframe.nativeElement, 'height', height + 'px');
} else if (type === 'navigate') { } else if (type === 'navigate') {
const { url } = event.data; const { url } = event.data;
this.router.navigateByUrl(url); this.router.navigateByUrl(url);
} else if (type === 'fullscreen') {
const { mode } = event.data;
if (mode !== this.snapshot.isFullscreen) {
this.toggleFullscreen(mode);
}
} else if (type === 'valueChanged') { } else if (type === 'valueChanged') {
const { value } = event.data; const { value } = event.data;
@ -97,6 +122,8 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
} else if (type === 'touched') { } else if (type === 'touched') {
this.callTouched(); this.callTouched();
} }
this.detectChanges();
} }
})); }));
} }
@ -129,6 +156,18 @@ export class IFrameEditorComponent extends StatefulControlComponent<any, any> im
this.sendMessage('formValueChanged', { formValue: this.formValue }); 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) { private sendMessage(type: string, payload: any) {
if (!this.iframe) { if (!this.iframe) {
return; return;

24
frontend/app/shared/components/forms/markdown-editor.component.ts
View File

@ -18,7 +18,7 @@ export const SQX_MARKDOWN_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
interface State { interface State {
// True, when the editor is shown as fullscreen. // True, when the editor is shown as fullscreen.
isFullscreen: false; isFullscreen: boolean;
} }
@Component({ @Component({
@ -187,15 +187,7 @@ export class MarkdownEditorComponent extends StatefulControlComponent<State, str
this.simplemde.codemirror.on('refresh', () => { this.simplemde.codemirror.on('refresh', () => {
const isFullscreen = this.simplemde.isFullscreenActive(); const isFullscreen = this.simplemde.isFullscreenActive();
let target = this.container.nativeElement; this.toggleFullscreen(isFullscreen);
if (isFullscreen) {
target = document.body;
}
this.renderer.appendChild(target, this.inner.nativeElement);
this.next(s => ({ ...s, isFullscreen }));
}); });
this.simplemde.codemirror.on('blur', () => { 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 }));
}
} }
Write Preview
Loading…
Cancel
Save