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

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

pull/845/head
Sebastian Stehle 4 years ago
committed by GitHub
parent
5990416301
commit
fd2b2eb7e2
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 171 additions and 32 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. 30
      backend/src/Squidex/wwwroot/scripts/editor-plain.html
  2. 71
      backend/src/Squidex/wwwroot/scripts/editor-sdk.js
  3. 6
      frontend/src/app/features/content/shared/forms/field-editor.component.html
  4. 2
      frontend/src/app/features/content/shared/forms/field-editor.component.scss
  5. 11
      frontend/src/app/features/content/shared/forms/field-editor.component.ts
  6. 2
      frontend/src/app/features/content/shared/forms/iframe-editor.component.html
  7. 75
      frontend/src/app/features/content/shared/forms/iframe-editor.component.ts

30
backend/src/Squidex/wwwroot/scripts/editor-plain.html
View File

@ -7,17 +7,37 @@
<style> <style>
.editor { .editor {
border: 1px solid #eee; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
height: 500px; height: 500px;
width: 100%; width: 100%;
} }
.btn {
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 15px;
margin-right: 5px;
margin-bottom: 5px;
}
</style> </style>
</head> </head>
<body style="margin: 0px; padding: 0px;"> <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> <textarea name="content" class="editor" id="editor"></textarea>
</div>
<script> <script>
var element = document.getElementById('editor'); var element = document.getElementById('editor');
@ -27,6 +47,14 @@
// Furthermore it sends the current size to the parent. // Furthermore it sends the current size to the parent.
var field = new SquidexFormField(); var field = new SquidexFormField();
document.getElementById('expanded').addEventListener('click', function () {
field.toggleExpanded();
});
document.getElementById('fullscreen').addEventListener('click', function () {
field.toggleFullscreen();
});
field.onValueChanged(function (value) { field.onValueChanged(function (value) {
if (value) { if (value) {
element.value = JSON.stringify(value); element.value = JSON.stringify(value);

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

@ -144,24 +144,26 @@ function SquidexPlugin() {
} }
function SquidexFormField() { function SquidexFormField() {
var initHandler; var context;
var initCalled = false; var currentConfirm;
var disabledHandler; var currentPickAssets;
var disabled = false; var disabled = false;
var fullscreen = false; var disabledHandler;
var fullscreenHandler = false;
var movedHandler;
var valueHandler;
var value;
var languageHandler;
var language;
var formValueHandler;
var formValue; var formValue;
var formValueHandler;
var fullscreen = false;
var fullscreenHandler
var expanded = false;
var expandedHandler;
var index; var index;
var currentConfirm; var initCalled = false;
var currentPickAssets; var initHandler;
var context; var language;
var languageHandler;
var movedHandler;
var timer; var timer;
var value;
var valueHandler;
function raiseDisabled() { function raiseDisabled() {
if (disabledHandler) { if (disabledHandler) {
@ -169,6 +171,12 @@ function SquidexFormField() {
} }
} }
function raiseExpanded() {
if (expandedHandler) {
expandedHandler(expanded);
}
}
function raiseFullscreen() { function raiseFullscreen() {
if (fullscreenHandler) { if (fullscreenHandler) {
fullscreenHandler(fullscreen); fullscreenHandler(fullscreen);
@ -246,6 +254,10 @@ function SquidexFormField() {
fullscreen = event.data.fullscreen; fullscreen = event.data.fullscreen;
raiseFullscreen(); raiseFullscreen();
} else if (type === 'expandedChanged') {
expanded = event.data.expanded;
raiseExpanded();
} else if (type === 'init') { } else if (type === 'init') {
context = event.data.context; context = event.data.context;
@ -324,6 +336,13 @@ function SquidexFormField() {
return fullscreen; return fullscreen;
}, },
/**
* Get the expanded state.
*/
isExpanded: function () {
return expanded;
},
/** /**
* Notifies the control container that the editor has been touched. * 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. * Notifies the control container that the value has been changed.
* *
@ -539,6 +567,21 @@ function SquidexFormField() {
raiseFullscreen(); 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. * Clean the editor SDK.
*/ */

6
frontend/src/app/features/content/shared/forms/field-editor.component.html
View File

@ -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-container" *ngIf="canUnset">
<div class="buttons"> <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> <i class="icon-fullscreen"></i>
</button> </button>
@ -28,6 +28,8 @@
<ng-container *ngIf="field.properties.editorUrl; else noEditor"> <ng-container *ngIf="field.properties.editorUrl; else noEditor">
<sqx-iframe-editor [url]="field.properties.editorUrl" #editor <sqx-iframe-editor [url]="field.properties.editorUrl" #editor
[context]="formContext" [context]="formContext"
[expanded]="isExpanded"
(expandedChange)="toggleExpanded()"
[formControlBinding]="$any(fieldForm)" [formControlBinding]="$any(fieldForm)"
[formValue]="form.valueChanges | async" [formValue]="form.valueChanges | async"
[formIndex]="index" [formIndex]="index"

2
frontend/src/app/features/content/shared/forms/field-editor.component.scss
View File

@ -12,7 +12,7 @@
font-weight: normal; font-weight: normal;
} }
&.fullscreen { &.expanded {
@include absolute(0, 0, 0, 0); @include absolute(0, 0, 0, 0);
background-color: $color-white; background-color: $color-white;
border: 0; border: 0;

11
frontend/src/app/features/content/shared/forms/field-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 { 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 { AbstractControl } from '@angular/forms';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { AbstractContentForm, AppLanguageDto, EditContentForm, FieldDto, hasNoValue$, MathHelper, Types } from '@app/shared'; 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 { export class FieldEditorComponent implements OnChanges {
public readonly uniqueId = MathHelper.guid(); public readonly uniqueId = MathHelper.guid();
@Output()
public expandedChange = new EventEmitter();
@Input() @Input()
public form!: EditContentForm; public form!: EditContentForm;
@ -49,7 +52,7 @@ export class FieldEditorComponent implements OnChanges {
public editor!: ElementRef; public editor!: ElementRef;
public isEmpty?: Observable<boolean>; public isEmpty?: Observable<boolean>;
public isFullscreen = false; public isExpanded = false;
public get field() { public get field() {
return this.formModel.field; return this.formModel.field;
@ -79,8 +82,8 @@ export class FieldEditorComponent implements OnChanges {
} }
} }
public toggleFullscreen() { public toggleExpanded() {
this.isFullscreen = !this.isFullscreen; this.isExpanded = !this.isExpanded;
} }
public unset() { public unset() {

2
frontend/src/app/features/content/shared/forms/iframe-editor.component.html
View File

@ -1,6 +1,8 @@
<div #container> <div #container>
<div #inner [class.fullscreen]="snapshot.isFullscreen">
<iframe #iframe scrolling="no" width="100%" [style.height]="0" [attr.src]="computedUrl | sqxSafeResourceUrl"></iframe> <iframe #iframe scrolling="no" width="100%" [style.height]="0" [attr.src]="computedUrl | sqxSafeResourceUrl"></iframe>
</div> </div>
</div>
<ng-container *sqxModal="assetsDialog"> <ng-container *sqxModal="assetsDialog">
<sqx-assets-selector <sqx-assets-selector

75
frontend/src/app/features/content/shared/forms/iframe-editor.component.ts
View File

@ -5,19 +5,24 @@
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. * 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 { AbstractControl } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DialogModel, DialogService, disabled$, StatefulComponent, Types, value$ } from '@app/framework'; import { DialogModel, DialogService, disabled$, StatefulComponent, Types, value$ } from '@app/framework';
import { AppsState, AssetDto, computeEditorUrl } from '@app/shared'; import { AppsState, AssetDto, computeEditorUrl } from '@app/shared';
interface State {
// True, when the editor is shown as fullscreen.
isFullscreen: boolean;
}
@Component({ @Component({
selector: 'sqx-iframe-editor[context][formField][formIndex][formValue][formControlBinding]', selector: 'sqx-iframe-editor[context][formField][formIndex][formValue][formControlBinding]',
styleUrls: ['./iframe-editor.component.scss'], styleUrls: ['./iframe-editor.component.scss'],
templateUrl: './iframe-editor.component.html', templateUrl: './iframe-editor.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class IFrameEditorComponent extends StatefulComponent<{}> implements OnChanges, OnDestroy { export class IFrameEditorComponent extends StatefulComponent<State> implements OnChanges, OnDestroy {
private value: any; private value: any;
private isInitialized = false; private isInitialized = false;
private isDisabled = false; private isDisabled = false;
@ -26,6 +31,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
@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>;
@Output()
public expandedChange = new EventEmitter();
@Input()
public expanded = false;
@Input() @Input()
public context: any = {}; public context: any = {};
@ -64,11 +81,15 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
private readonly renderer: Renderer2, private readonly renderer: Renderer2,
private readonly router: Router, private readonly router: Router,
) { ) {
super(changeDetector, {}); super(changeDetector, {
isFullscreen: false,
});
} }
public ngOnDestroy() { public ngOnDestroy() {
super.ngOnDestroy(); super.ngOnDestroy();
this.toggleFullscreen(false);
} }
public ngOnChanges(changes: SimpleChanges) { public ngOnChanges(changes: SimpleChanges) {
@ -76,14 +97,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
this.sendFormValue(); this.sendFormValue();
} }
if (changes['language']) {
this.sendLanguage();
}
if (changes['formIndex']) { if (changes['formIndex']) {
this.sendMoved(); this.sendMoved();
} }
if (changes['expanded']) {
this.sendExpanded();
}
if (changes['language']) {
this.sendLanguage();
}
if (changes['formControlBinding']) { if (changes['formControlBinding']) {
this.unsubscribeAll(); this.unsubscribeAll();
@ -112,6 +137,8 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
this.isInitialized = true; this.isInitialized = true;
this.sendInit(); this.sendInit();
this.sendFullscreen();
this.sendExpanded();
this.sendFormValue(); this.sendFormValue();
this.sendLanguage(); this.sendLanguage();
this.sendDisabled(); this.sendDisabled();
@ -125,6 +152,18 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
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 === 'expanded') {
const { mode } = event.data;
if (mode !== this.expanded) {
this.expandedChange.emit();
}
} else if (type === 'valueChanged') { } else if (type === 'valueChanged') {
const { value } = event.data; const { value } = event.data;
@ -206,6 +245,14 @@ export class IFrameEditorComponent extends StatefulComponent<{}> implements OnCh
this.sendMessage('valueChanged', { value: this.value }); 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() { private sendDisabled() {
this.sendMessage('disabled', { isDisabled: this.isDisabled }); 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) { private sendMessage(type: string, payload: any) {
if (!this.iframe?.nativeElement) { if (!this.iframe?.nativeElement) {
return; return;

Write Preview
Loading…
Cancel
Save