-
Notifications
You must be signed in to change notification settings - Fork 949
/
live-example-block.component.ts
84 lines (72 loc) · 2.22 KB
/
live-example-block.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import {
Component,
ElementRef,
Input,
OnInit,
OnDestroy,
ViewChild,
ChangeDetectionStrategy,
ChangeDetectorRef,
HostBinding,
Output,
EventEmitter,
AfterViewInit,
} from '@angular/core';
import { Location } from '@angular/common';
import { takeWhile } from 'rxjs/operators';
import { NgdAnalytics, NgdIframeCommunicatorService } from '../../../@theme/services';
import { NgdExampleView } from '../../enum.example-view';
@Component({
selector: 'ngd-live-example-block',
styleUrls: ['./live-example-block.component.scss'],
templateUrl: './live-example-block.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('iframe', { static: false }) iframe: ElementRef;
@Input() content: any;
@Input() hasViewSwitch: boolean = false;
@Output() changeView = new EventEmitter<NgdExampleView>();
@HostBinding('class.theme-default')
private get isDefault() {
return this.currentTheme === 'default';
}
iframeHeight = 0;
alive: boolean = true;
currentTheme: string = 'default';
loading = true;
get url(): string {
return this.location.prepareExternalUrl(this.content.url);
}
get iframeWindow(): Window {
return this.iframe.nativeElement.contentWindow;
}
constructor(private changeDetection: ChangeDetectorRef,
private location: Location,
private analytics: NgdAnalytics,
private communicator: NgdIframeCommunicatorService) {
}
ngOnInit() {
this.communicator.receive(this.content.id)
.pipe(takeWhile(() => this.alive))
.subscribe(it => {
this.iframeHeight = it.height;
this.loading = false;
this.changeDetection.detectChanges();
});
}
ngAfterViewInit() {
// we cannot set src using angular binding
// as it will trigger change detection and reload iframe
// which in its turn will send a new height
// and we would need to set the height and trigger change detection again
// resulting in infinite loop
this.iframe.nativeElement.src = this.url;
}
ngOnDestroy() {
this.alive = false;
}
switchToInlineVew() {
this.changeView.emit(NgdExampleView.INLINE);
}
}