mirror of https://github.com/Squidex/squidex.git
Sebastian
8 years ago
21 changed files with 360 additions and 185 deletions
@ -0,0 +1 @@ |
|||||
|
<iframe #iframe scrolling="no" [attr.src]="sanitizedUrl()" width="100%"></iframe> |
||||
@ -0,0 +1,8 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
iframe { |
||||
|
border: 0; |
||||
|
background: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
@ -0,0 +1,111 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, Renderer, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
|
||||
|
export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
||||
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IFrameEditorComponent), multi: true |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-iframe-editor', |
||||
|
styleUrls: ['./iframe-editor.component.scss'], |
||||
|
templateUrl: './iframe-editor.component.html', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR] |
||||
|
}) |
||||
|
export class IFrameEditorComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy { |
||||
|
private windowMessageListener: Function; |
||||
|
private callChange = (v: any) => { /* NOOP */ }; |
||||
|
private callTouched = () => { /* NOOP */ }; |
||||
|
private value: string; |
||||
|
private isDisabled = false; |
||||
|
private isInitialized = false; |
||||
|
private plugin: HTMLIFrameElement; |
||||
|
|
||||
|
@ViewChild('iframe') |
||||
|
public iframe: ElementRef; |
||||
|
|
||||
|
@Input() |
||||
|
public url: string; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly sanitizer: DomSanitizer, |
||||
|
private readonly renderer: Renderer |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.windowMessageListener(); |
||||
|
} |
||||
|
|
||||
|
public ngAfterViewInit() { |
||||
|
this.plugin = this.iframe.nativeElement; |
||||
|
} |
||||
|
|
||||
|
public ngOnInit(): void { |
||||
|
this.windowMessageListener = |
||||
|
this.renderer.listenGlobal('window', 'message', (event: MessageEvent) => { |
||||
|
if (event.source === this.plugin.contentWindow) { |
||||
|
const { type } = event.data; |
||||
|
|
||||
|
if (type === 'started') { |
||||
|
this.isInitialized = true; |
||||
|
|
||||
|
if (this.plugin.contentWindow) { |
||||
|
this.plugin.contentWindow.postMessage({ type: 'disabled', disabled: this.isDisabled }, '*'); |
||||
|
this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*'); |
||||
|
} |
||||
|
} else if (type === 'resize') { |
||||
|
const { height } = event.data; |
||||
|
|
||||
|
this.plugin.height = height + 'px'; |
||||
|
} else if (type === 'valueChanged') { |
||||
|
const { value } = event.data; |
||||
|
|
||||
|
if (this.value !== value) { |
||||
|
this.value = value; |
||||
|
|
||||
|
this.callChange(value); |
||||
|
} |
||||
|
} else if (type === 'touched') { |
||||
|
this.callTouched(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public sanitizedUrl() { |
||||
|
return this.sanitizer.bypassSecurityTrustResourceUrl(this.url); |
||||
|
} |
||||
|
|
||||
|
public writeValue(value: string) { |
||||
|
this.value = value; |
||||
|
|
||||
|
if (this.isInitialized && this.plugin.contentWindow) { |
||||
|
this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean): void { |
||||
|
this.isDisabled = isDisabled; |
||||
|
|
||||
|
if (this.isInitialized && this.plugin.contentWindow) { |
||||
|
this.plugin.contentWindow.postMessage({ type: 'disabled', disabled: this.isDisabled }, '*'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public registerOnChange(fn: any) { |
||||
|
this.callChange = fn; |
||||
|
} |
||||
|
|
||||
|
public registerOnTouched(fn: any) { |
||||
|
this.callTouched = fn; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue