ems-web-app-page-viewer
Version:
This angular.io module is a simple page renderer for apps developed by Educational Media Solutions.
77 lines • 11.6 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { delay, getparams } from "ems-web-app-utils";
import * as i0 from "@angular/core";
import * as i1 from "./page-viewer.service";
import * as i2 from "@angular/platform-browser";
import * as i3 from "@angular/common";
export class PageViewerComponent {
constructor(service, sanitizer) {
this.service = service;
this.sanitizer = sanitizer;
this.transitioning = false;
this.onChange = new EventEmitter();
this.history = false;
this.requestedPage = null;
this.currentPage = null;
this.timeout = 0;
this.speed = 250;
this.initializePageViewer = () => {
if (getparams("page")) {
clearTimeout(this.timeout);
this.service.setCurrentPage(getparams("page"));
}
};
}
ngOnInit() {
this.service.storeWebHistory = this.history;
this.google = window["gtag"] ?? undefined;
this.service.page.subscribe((page) => {
clearTimeout(this.timeout);
this.requestedPage = page;
this.transitioning = true;
this.timeout = delay(() => this.changePage(page), this.speed);
});
window.addEventListener('popstate', (e) => {
const page = e.state?.page;
if (page === this.currentPage)
return;
this.service.setCurrentPage(page, this.service.model["previousPageData"], true);
});
}
ngAfterViewInit() {
delay(this.initializePageViewer);
}
changePage(page) {
this.currentPage = null;
delay(() => {
this.currentPage = page;
this.currentTemplate = this.service.manifest[page ?? ""]?.template;
this.track();
});
delay(() => {
this.transitioning = false;
this.onChange.emit(this.currentPage);
}, 1);
}
track() {
if (!this.google || !this.currentPage)
return;
this.google('event', 'page_view', { page_title: this.currentPage, page_location: `${window.location.origin}/pages/${this.currentPage}` });
}
}
PageViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerComponent, deps: [{ token: i1.PageViewerService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
PageViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PageViewerComponent, selector: "page-viewer", inputs: { history: "history" }, outputs: { onChange: "change" }, host: { properties: { "class.transitioning": "this.transitioning" } }, ngImport: i0, template: `<ng-container *ngIf="currentTemplate"><ng-container *ngTemplateOutlet="currentTemplate"></ng-container></ng-container><ng-content></ng-content><div class="style-container" [innerHtml]="styles"></div>`, isInline: true, styles: [":host{transition:opacity .25s;transition-property:opacity;display:flex;flex-direction:column;flex:1 1 auto;width:100%;overflow:auto}:host.transitioning{transition-property:opacity;opacity:0;transition:opacity .25s;pointer-events:none}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerComponent, decorators: [{
type: Component,
args: [{ selector: 'page-viewer', template: `<ng-container *ngIf="currentTemplate"><ng-container *ngTemplateOutlet="currentTemplate"></ng-container></ng-container><ng-content></ng-content><div class="style-container" [innerHtml]="styles"></div>`, styles: [":host{transition:opacity .25s;transition-property:opacity;display:flex;flex-direction:column;flex:1 1 auto;width:100%;overflow:auto}:host.transitioning{transition-property:opacity;opacity:0;transition:opacity .25s;pointer-events:none}\n"] }]
}], ctorParameters: function () { return [{ type: i1.PageViewerService }, { type: i2.DomSanitizer }]; }, propDecorators: { transitioning: [{
type: HostBinding,
args: ["class.transitioning"]
}], onChange: [{
type: Output,
args: ["change"]
}], history: [{
type: Input,
args: ["history"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS12aWV3ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9wYWdlLXZpZXdlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBaUIsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFrQyxNQUFNLGVBQWUsQ0FBQztBQUduSSxPQUFPLEVBQVMsS0FBSyxFQUFFLFNBQVMsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7OztBQVM1RCxNQUFNLE9BQU8sbUJBQW1CO0lBYzlCLFlBQXNCLE9BQTBCLEVBQVksU0FBdUI7UUFBN0QsWUFBTyxHQUFQLE9BQU8sQ0FBbUI7UUFBWSxjQUFTLEdBQVQsU0FBUyxDQUFjO1FBYi9DLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBQ2pELGFBQVEsR0FBOEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUN6RCxZQUFPLEdBQVksS0FBSyxDQUFDO1FBRXBDLGtCQUFhLEdBQWtCLElBQUksQ0FBQztRQUNwQyxnQkFBVyxHQUFrQixJQUFJLENBQUM7UUFLL0IsWUFBTyxHQUFXLENBQUMsQ0FBQztRQUNwQixVQUFLLEdBQVcsR0FBRyxDQUFDO1FBNEJwQix5QkFBb0IsR0FBRyxHQUFHLEVBQUU7WUFDcEMsSUFBRyxTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7Z0JBQ3BCLFlBQVksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7Z0JBQzNCLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO2FBQ2hEO1FBQ0gsQ0FBQyxDQUFBO0lBN0JELENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUM1QyxJQUFJLENBQUMsTUFBTSxHQUFJLE1BQWMsQ0FBQyxNQUFNLENBQUMsSUFBSSxTQUFTLENBQUM7UUFFbkQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBbUIsRUFBRSxFQUFFO1lBQ2xELFlBQVksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDM0IsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7WUFDMUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDaEUsQ0FBQyxDQUFDLENBQUM7UUFFSCxNQUFNLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBZ0IsRUFBRSxFQUFFO1lBQ3ZELE1BQU0sSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsSUFBYyxDQUFDO1lBQ3JDLElBQUcsSUFBSSxLQUFLLElBQUksQ0FBQyxXQUFXO2dCQUFFLE9BQU87WUFDckMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLGtCQUFrQixDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDbEYsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZTtRQUNiLEtBQUssQ0FBQyxJQUFJLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBU1MsVUFBVSxDQUFDLElBQW1CO1FBQ3RDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLEtBQUssQ0FBQyxHQUFHLEVBQUU7WUFDVCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUN4QixJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksSUFBSSxFQUFFLENBQUMsRUFBRSxRQUFRLENBQUM7WUFDbkUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2YsQ0FBQyxDQUFDLENBQUM7UUFDSCxLQUFLLENBQUMsR0FBRyxFQUFFO1lBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7WUFDM0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3ZDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNSLENBQUM7SUFFUyxLQUFLO1FBQ2IsSUFBRyxDQUFDLElBQUksQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVztZQUFFLE9BQU87UUFDN0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLEVBQUUsVUFBVSxFQUFFLElBQUksQ0FBQyxXQUFXLEVBQUUsYUFBYSxFQUFFLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxNQUFNLFVBQVUsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFDLENBQUMsQ0FBQTtJQUMxSSxDQUFDOztnSEEvRFUsbUJBQW1CO29HQUFuQixtQkFBbUIsMkxBSHBCLHlNQUF5TTsyRkFHeE0sbUJBQW1CO2tCQUwvQixTQUFTOytCQUNFLGFBQWEsWUFDYix5TUFBeU07bUlBSS9LLGFBQWE7c0JBQWhELFdBQVc7dUJBQUMscUJBQXFCO2dCQUNoQixRQUFRO3NCQUF6QixNQUFNO3VCQUFDLFFBQVE7Z0JBQ0UsT0FBTztzQkFBeEIsS0FBSzt1QkFBQyxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBBZnRlclZpZXdJbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBUZW1wbGF0ZVJlZiwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZUh0bWwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IFBhZ2VWaWV3ZXJTZXJ2aWNlIH0gZnJvbSBcIi4vcGFnZS12aWV3ZXIuc2VydmljZVwiO1xuaW1wb3J0IHsgdHJhY2UsIGRlbGF5LCBnZXRwYXJhbXMgfSBmcm9tIFwiZW1zLXdlYi1hcHAtdXRpbHNcIjtcblxuZGVjbGFyZSBjb25zdCBndGFnOmFueTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGFnZS12aWV3ZXInLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250YWluZXIgKm5nSWY9XCJjdXJyZW50VGVtcGxhdGVcIj48bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY3VycmVudFRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+PC9uZy1jb250YWluZXI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PjxkaXYgY2xhc3M9XCJzdHlsZS1jb250YWluZXJcIiBbaW5uZXJIdG1sXT1cInN0eWxlc1wiPjwvZGl2PmAsXG4gIHN0eWxlVXJsczogW1wiLi9wYWdlLXZpZXdlci5jb21wb25lbnQubGVzc1wiXVxufSlcbmV4cG9ydCBjbGFzcyBQYWdlVmlld2VyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBIb3N0QmluZGluZyhcImNsYXNzLnRyYW5zaXRpb25pbmdcIikgdHJhbnNpdGlvbmluZzogYm9vbGVhbiA9IGZhbHNlO1xuICBAT3V0cHV0KFwiY2hhbmdlXCIpIG9uQ2hhbmdlOiBFdmVudEVtaXR0ZXI8c3RyaW5nfG51bGw+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBASW5wdXQoXCJoaXN0b3J5XCIpIGhpc3Rvcnk6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwdWJsaWMgcmVxdWVzdGVkUGFnZTogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIHB1YmxpYyBjdXJyZW50UGFnZTogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIHB1YmxpYyBjdXJyZW50VGVtcGxhdGUhOiBUZW1wbGF0ZVJlZjxhbnk+O1xuICBwdWJsaWMgc3R5bGVzITogU2FmZUh0bWw7XG4gIHB1YmxpYyBnb29nbGU/OiBhbnk7XG5cbiAgcHJvdGVjdGVkIHRpbWVvdXQ6IG51bWJlciA9IDA7XG4gIHByb3RlY3RlZCBzcGVlZDogbnVtYmVyID0gMjUwO1xuICBcbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIHNlcnZpY2U6IFBhZ2VWaWV3ZXJTZXJ2aWNlLCBwcm90ZWN0ZWQgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHtcblxuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5zZXJ2aWNlLnN0b3JlV2ViSGlzdG9yeSA9IHRoaXMuaGlzdG9yeTtcbiAgICB0aGlzLmdvb2dsZSA9ICh3aW5kb3cgYXMgYW55KVtcImd0YWdcIl0gPz8gdW5kZWZpbmVkO1xuXG4gICAgdGhpcy5zZXJ2aWNlLnBhZ2Uuc3Vic2NyaWJlKChwYWdlOiBzdHJpbmcgfCBudWxsKSA9PiB7XG4gICAgICBjbGVhclRpbWVvdXQodGhpcy50aW1lb3V0KTtcbiAgICAgIHRoaXMucmVxdWVzdGVkUGFnZSA9IHBhZ2U7XG4gICAgICB0aGlzLnRyYW5zaXRpb25pbmcgPSB0cnVlO1xuICAgICAgdGhpcy50aW1lb3V0ID0gZGVsYXkoKCkgPT4gdGhpcy5jaGFuZ2VQYWdlKHBhZ2UpLCB0aGlzLnNwZWVkKTtcbiAgICB9KTtcblxuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdwb3BzdGF0ZScsIChlOiBQb3BTdGF0ZUV2ZW50KSA9PiB7XG4gICAgICBjb25zdCBwYWdlID0gZS5zdGF0ZT8ucGFnZSBhcyBzdHJpbmc7XG4gICAgICBpZihwYWdlID09PSB0aGlzLmN1cnJlbnRQYWdlKSByZXR1cm47XG4gICAgICB0aGlzLnNlcnZpY2Uuc2V0Q3VycmVudFBhZ2UocGFnZSwgdGhpcy5zZXJ2aWNlLm1vZGVsW1wicHJldmlvdXNQYWdlRGF0YVwiXSwgdHJ1ZSk7XG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgZGVsYXkodGhpcy5pbml0aWFsaXplUGFnZVZpZXdlcik7XG4gIH1cblxuICBwcm90ZWN0ZWQgaW5pdGlhbGl6ZVBhZ2VWaWV3ZXIgPSAoKSA9PiB7XG4gICAgaWYoZ2V0cGFyYW1zKFwicGFnZVwiKSkge1xuICAgICAgY2xlYXJUaW1lb3V0KHRoaXMudGltZW91dCk7XG4gICAgICB0aGlzLnNlcnZpY2Uuc2V0Q3VycmVudFBhZ2UoZ2V0cGFyYW1zKFwicGFnZVwiKSk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIGNoYW5nZVBhZ2UocGFnZTogc3RyaW5nIHwgbnVsbCkge1xuICAgIHRoaXMuY3VycmVudFBhZ2UgPSBudWxsO1xuICAgIGRlbGF5KCgpID0+IHtcbiAgICAgIHRoaXMuY3VycmVudFBhZ2UgPSBwYWdlOyBcbiAgICAgIHRoaXMuY3VycmVudFRlbXBsYXRlID0gdGhpcy5zZXJ2aWNlLm1hbmlmZXN0W3BhZ2UgPz8gXCJcIl0/LnRlbXBsYXRlO1xuICAgICAgdGhpcy50cmFjaygpO1xuICAgIH0pO1xuICAgIGRlbGF5KCgpID0+IHtcbiAgICAgIHRoaXMudHJhbnNpdGlvbmluZyA9IGZhbHNlO1xuICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHRoaXMuY3VycmVudFBhZ2UpO1xuICAgIH0sIDEpO1xuICB9XG5cbiAgcHJvdGVjdGVkIHRyYWNrKCkge1xuICAgIGlmKCF0aGlzLmdvb2dsZSB8fCAhdGhpcy5jdXJyZW50UGFnZSkgcmV0dXJuO1xuICAgIHRoaXMuZ29vZ2xlKCdldmVudCcsICdwYWdlX3ZpZXcnLCB7IHBhZ2VfdGl0bGU6IHRoaXMuY3VycmVudFBhZ2UsIHBhZ2VfbG9jYXRpb246IGAke3dpbmRvdy5sb2NhdGlvbi5vcmlnaW59L3BhZ2VzLyR7dGhpcy5jdXJyZW50UGFnZX1gfSlcbiAgfVxufVxuIl19