ngx-doc-viewer
Version:
Angular document viewer.
123 lines (118 loc) • 4.57 kB
JavaScript
import { __decorate } from 'tslib';
import { EventEmitter, NgZone, Output, Input, Component, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { take } from 'rxjs/operators';
import { interval } from 'rxjs';
import { CommonModule } from '@angular/common';
let NgxDocViewerComponent = class NgxDocViewerComponent {
constructor(domSanitizer, ngZone) {
this.domSanitizer = domSanitizer;
this.ngZone = ngZone;
this.fullUrl = null;
this.checkIFrameSubscription = null;
this.configuredViewer = 'google';
this.loaded = new EventEmitter();
this.url = '';
this.googleCheckInterval = 3000;
}
set viewer(viewer) {
const v = viewer.toLowerCase().trim();
if (v !== 'google' && v !== 'office') {
console.error(`Unsupported viewer: '${viewer}'. Supported viewers: google, office`);
}
this.configuredViewer = v;
}
ngOnDestroy() {
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
}
ngOnChanges(changes) {
if ((changes.url && changes.url.currentValue !== changes.url.previousValue) ||
changes.viewer && changes.viewer.currentValue !== changes.viewer.previousValue) {
const u = this.url.indexOf('/') ? encodeURIComponent(this.url) : this.url;
this.fullUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.configuredViewer === 'google' ?
`https://docs.google.com/gview?url=${u}&embedded=true` :
`https://view.officeapps.live.com/op/embed.aspx?src=${u}`);
// see: https://stackoverflow.com/questions/40414039/google-docs-viewer-returning-204-responses-no-longer-working-alternatives
// hack to reload iframe if it's not loaded.
// would maybe be better to use view.officeapps.live.com but seems not to work with sas token.
if (this.configuredViewer === 'google') {
this.ngZone.runOutsideAngular(() => {
let iframe = document.querySelector('iframe');
this.checkIFrame(iframe);
// if it's not loaded after the googleIntervalCheck, then open load again.
this.checkIFrameSubscription = interval(this.googleCheckInterval)
.pipe(take(Math.round(this.googleCheckInterval === 0 ? 0 : 20000 / this.googleCheckInterval)))
.subscribe(() => {
if (iframe == null) {
iframe = document.querySelector('iframe');
this.checkIFrame(iframe);
}
this.reloadIFrame(iframe);
});
});
}
}
}
checkIFrame(iframe) {
if (iframe) {
iframe.onload = () => {
this.loaded.emit(null);
if (this.checkIFrameSubscription) {
this.checkIFrameSubscription.unsubscribe();
}
};
}
}
reloadIFrame(iframe) {
if (iframe) {
console.log('reloading..');
iframe.src = iframe.src;
}
}
};
NgxDocViewerComponent.ctorParameters = () => [
{ type: DomSanitizer },
{ type: NgZone }
];
__decorate([
Output()
], NgxDocViewerComponent.prototype, "loaded", void 0);
__decorate([
Input()
], NgxDocViewerComponent.prototype, "url", void 0);
__decorate([
Input()
], NgxDocViewerComponent.prototype, "googleCheckInterval", void 0);
__decorate([
Input()
], NgxDocViewerComponent.prototype, "viewer", null);
NgxDocViewerComponent = __decorate([
Component({
selector: 'ngx-doc-viewer',
template: `<iframe id="iframe" *ngIf="fullUrl" frameBorder="0" [src]="fullUrl"></iframe> `,
styles: [`:host {
display: block;
}
iframe {
width: 100%;
height: 100%;
}
`]
})
], NgxDocViewerComponent);
let NgxDocViewerModule = class NgxDocViewerModule {
};
NgxDocViewerModule = __decorate([
NgModule({
imports: [CommonModule],
declarations: [NgxDocViewerComponent],
exports: [NgxDocViewerComponent]
})
], NgxDocViewerModule);
/**
* Generated bundle index. Do not edit.
*/
export { NgxDocViewerComponent, NgxDocViewerModule };
//# sourceMappingURL=ngx-doc-viewer.js.map