ngx-doc-viewer/fesm5/ngx-doc-viewer.js

Angular document viewer.

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';

var NgxDocViewerComponent = /** @class */ (function () {
    function NgxDocViewerComponent(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;
    }
    Object.defineProperty(NgxDocViewerComponent.prototype, "viewer", {
        set: function (viewer) {
            var v = viewer.toLowerCase().trim();
            if (v !== 'google' && v !== 'office') {
                console.error("Unsupported viewer: '" + viewer + "'. Supported viewers: google, office");
            }
            this.configuredViewer = v;
        },
        enumerable: true,
        configurable: true
    });
    NgxDocViewerComponent.prototype.ngOnDestroy = function () {
        if (this.checkIFrameSubscription) {
            this.checkIFrameSubscription.unsubscribe();
        }
    };
    NgxDocViewerComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if ((changes.url && changes.url.currentValue !== changes.url.previousValue) ||
            changes.viewer && changes.viewer.currentValue !== changes.viewer.previousValue) {
            var 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(function () {
                    var 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(function () {
                        if (iframe == null) {
                            iframe = document.querySelector('iframe');
                            _this.checkIFrame(iframe);
                        }
                        _this.reloadIFrame(iframe);
                    });
                });
            }
        }
    };
    NgxDocViewerComponent.prototype.checkIFrame = function (iframe) {
        var _this = this;
        if (iframe) {
            iframe.onload = function () {
                _this.loaded.emit(null);
                if (_this.checkIFrameSubscription) {
                    _this.checkIFrameSubscription.unsubscribe();
                }
            };
        }
    };
    NgxDocViewerComponent.prototype.reloadIFrame = function (iframe) {
        if (iframe) {
            console.log('reloading..');
            iframe.src = iframe.src;
        }
    };
    NgxDocViewerComponent.ctorParameters = function () { return [
        { 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 {\n        display: block;\n    }\n    iframe {\n        width: 100%;\n        height: 100%;\n    }\n    "]
        })
    ], NgxDocViewerComponent);
    return NgxDocViewerComponent;
}());

var NgxDocViewerModule = /** @class */ (function () {
    function NgxDocViewerModule() {
    }
    NgxDocViewerModule = __decorate([
        NgModule({
            imports: [CommonModule],
            declarations: [NgxDocViewerComponent],
            exports: [NgxDocViewerComponent]
        })
    ], NgxDocViewerModule);
    return NgxDocViewerModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { NgxDocViewerComponent, NgxDocViewerModule };
//# sourceMappingURL=ngx-doc-viewer.js.map