From b9283004558e25b6f80c4b1d4a6f8f5331645950 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Fri, 22 Feb 2019 15:34:05 +0100 Subject: [PATCH] Fixed for iframe. --- .../angular/forms/control-errors.component.ts | 2 +- .../forms/iframe-editor.component.html | 2 +- .../angular/forms/iframe-editor.component.ts | 41 ++++++++----------- .../angular/modals/modal-target.directive.ts | 2 +- .../modals/onboarding-tooltip.component.ts | 4 +- .../framework/angular/stateful.component.ts | 19 +++++++-- 6 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/Squidex/app/framework/angular/forms/control-errors.component.ts b/src/Squidex/app/framework/angular/forms/control-errors.component.ts index 3a347ad062..a23a2c19cf 100644 --- a/src/Squidex/app/framework/angular/forms/control-errors.component.ts +++ b/src/Squidex/app/framework/angular/forms/control-errors.component.ts @@ -86,7 +86,7 @@ export class ControlErrorsComponent extends StatefulComponent implements } if (this.control !== control) { - this.ngOnDestroy(); + this.unsubscribeAll(); this.control = control; diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.html b/src/Squidex/app/framework/angular/forms/iframe-editor.component.html index 41a07a468f..19adae7f78 100644 --- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.html +++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.html @@ -1 +1 @@ - + diff --git a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts index 0a19695d5d..f316e9ece5 100644 --- a/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts +++ b/src/Squidex/app/framework/angular/forms/iframe-editor.component.ts @@ -5,9 +5,8 @@ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. */ -import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, forwardRef, Input, OnChanges, OnInit, Renderer2, ViewChild } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { ExternalControlComponent, Types } from '@app/framework/internal'; @@ -22,50 +21,42 @@ export const SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR: any = { providers: [SQX_IFRAME_EDITOR_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush }) -export class IFrameEditorComponent extends ExternalControlComponent implements AfterViewInit, OnInit { +export class IFrameEditorComponent extends ExternalControlComponent implements OnChanges, OnInit { private value: any; private isDisabled = false; private isInitialized = false; - private plugin: HTMLIFrameElement; @ViewChild('iframe') public iframe: ElementRef; @Input() - public set url(value: string) { - this.sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(value); - } - - public sanitizedUrl: SafeResourceUrl; + public url: string; constructor(changeDetector: ChangeDetectorRef, - private readonly sanitizer: DomSanitizer, private readonly renderer: Renderer2 ) { super(changeDetector); } - public ngAfterViewInit() { - this.plugin = this.iframe.nativeElement; + public ngOnChanges() { + this.iframe.nativeElement.src = this.url; } public ngOnInit(): void { this.own( this.renderer.listen('window', 'message', (event: MessageEvent) => { - if (event.source === this.plugin.contentWindow) { + if (event.source === this.iframe.nativeElement.contentWindow) { const { type } = event.data; if (type === 'started') { this.isInitialized = true; - if (this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) { - this.plugin.contentWindow.postMessage({ type: 'disabled', isDisabled: this.isDisabled }, '*'); - this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*'); - } + this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled }); + this.sendMessage({ type: 'valueChanged', value: this.value }); } else if (type === 'resize') { const { height } = event.data; - this.plugin.height = height + 'px'; + this.iframe.nativeElement.height = height + 'px'; } else if (type === 'valueChanged') { const { value } = event.data; @@ -84,16 +75,20 @@ export class IFrameEditorComponent extends ExternalControlComponent impleme public writeValue(obj: any) { this.value = obj; - if (this.isInitialized && this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) { - this.plugin.contentWindow.postMessage({ type: 'valueChanged', value: this.value }, '*'); - } + this.sendMessage({ type: 'valueChanged', value: this.value }); } public setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; - if (this.isInitialized && this.plugin.contentWindow && Types.isFunction(this.plugin.contentWindow.postMessage)) { - this.plugin.contentWindow.postMessage({ type: 'disabled', isDisabled: this.isDisabled }, '*'); + this.sendMessage({ type: 'disabled', isDisabled: this.isDisabled }); + } + + private sendMessage(message: any) { + const iframe = this.iframe.nativeElement; + + if (this.isInitialized && iframe.contentWindow && Types.isFunction(iframe.contentWindow.postMessage)) { + iframe.contentWindow.postMessage(message, '*'); } } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/modals/modal-target.directive.ts b/src/Squidex/app/framework/angular/modals/modal-target.directive.ts index 69111ca4e8..428ae47c48 100644 --- a/src/Squidex/app/framework/angular/modals/modal-target.directive.ts +++ b/src/Squidex/app/framework/angular/modals/modal-target.directive.ts @@ -20,7 +20,7 @@ export class ModalTargetDirective extends ResourceOwner implements AfterViewInit @Input('sqxModalTarget') public set target(element: any) { if (element !== this.targetElement) { - this.ngOnDestroy(); + this.unsubscribeAll(); this.targetElement = element; diff --git a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts index 98fc8ee3f8..5894307ea4 100644 --- a/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts +++ b/src/Squidex/app/framework/angular/modals/onboarding-tooltip.component.ts @@ -100,12 +100,12 @@ export class OnboardingTooltipComponent extends StatefulComponent implements OnD public hideThis() { this.onboardingService.disable(this.helpId); - this.ngOnDestroy(); + this.unsubscribeAll(); } public hideAll() { this.onboardingService.disableAll(); - this.ngOnDestroy(); + this.unsubscribeAll(); } } \ No newline at end of file diff --git a/src/Squidex/app/framework/angular/stateful.component.ts b/src/Squidex/app/framework/angular/stateful.component.ts index b94de62c51..b3ba9f3c71 100644 --- a/src/Squidex/app/framework/angular/stateful.component.ts +++ b/src/Squidex/app/framework/angular/stateful.component.ts @@ -32,6 +32,10 @@ export class ResourceOwner implements OnDestroy { } public ngOnDestroy() { + this.unsubscribeAll(); + } + + public unsubscribeAll() { try { for (let subscription of this.subscriptions) { if (Types.isFunction(subscription)) { @@ -48,6 +52,7 @@ export class ResourceOwner implements OnDestroy { export abstract class StatefulComponent extends State implements OnDestroy { private readonly subscriptions = new ResourceOwner(); + private subscription: Subscription; constructor( private readonly changeDetector: ChangeDetectorRef, @@ -55,17 +60,23 @@ export abstract class StatefulComponent extends State implements OnD ) { super(state); - this.own( + this.subscription = this.changes.pipe(skip(1)).subscribe(() => { this.changeDetector.detectChanges(); - })); + }); } public ngOnDestroy() { - this.subscriptions.ngOnDestroy(); + this.subscription.unsubscribe(); + + this.unsubscribeAll(); + } + + protected unsubscribeAll() { + this.subscriptions.unsubscribeAll(); } - public detectChanges() { + protected detectChanges() { this.changeDetector.detectChanges(); }