ems-web-app-page-viewer
Version:
This angular.io module is a simple page renderer for apps developed by Educational Media Solutions.
185 lines (177 loc) • 10.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, HostBinding, Output, Input, TemplateRef, ContentChildren, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { getparams, delay } from 'ems-web-app-utils';
import * as i2 from '@angular/platform-browser';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
class PageViewerService {
constructor() {
this.model = { currentPage: null, previousPage: null };
this.storeWebHistory = true;
this.pageSource = new BehaviorSubject(null);
this.page = this.pageSource.asObservable();
this.manifest = {};
this.title = document.title;
}
registerPage(id, template, title) {
this.manifest[id] = { template, title };
}
setCurrentPage(page, data, ignorePush = false) {
var _a, _b, _c, _d;
const info = this.manifest[page !== null && page !== void 0 ? page : ""];
const pstring = page ? (page.toString().toUpperCase().substring(0, 1) + page.toString().substring(1)) : null;
if (this.storeWebHistory && page && !ignorePush && !getparams().debug) {
window.history.pushState({ page }, `${(_a = info === null || info === void 0 ? void 0 : info.title) !== null && _a !== void 0 ? _a : pstring}`, `/?page=${page}`);
}
this.model["previousPageData"] = (_b = this.model["currentPageData"]) !== null && _b !== void 0 ? _b : this.model["previousPageData"];
this.model["currentPageData"] = data;
this.model["previousPage"] = (_c = this.model["currentPage"]) !== null && _c !== void 0 ? _c : this.model["previousPage"];
this.model["currentPage"] = page;
document.title = (_d = info === null || info === void 0 ? void 0 : info.title) !== null && _d !== void 0 ? _d : this.title;
this.pageSource.next(page);
}
}
PageViewerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
PageViewerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
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() {
var _a;
this.service.storeWebHistory = this.history;
this.google = (_a = window["gtag"]) !== null && _a !== void 0 ? _a : 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) => {
var _a;
const page = (_a = e.state) === null || _a === void 0 ? void 0 : _a.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(() => {
var _a;
this.currentPage = page;
this.currentTemplate = (_a = this.service.manifest[page !== null && page !== void 0 ? page : ""]) === null || _a === void 0 ? void 0 : _a.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: 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: PageViewerService }, { type: i2.DomSanitizer }]; }, propDecorators: { transitioning: [{
type: HostBinding,
args: ["class.transitioning"]
}], onChange: [{
type: Output,
args: ["change"]
}], history: [{
type: Input,
args: ["history"]
}] } });
class PageTemplateComponent {
constructor(service, el) {
this.service = service;
this.el = el;
}
ngAfterViewInit() {
if (!this.id)
throw new Error("All <page-template/> elements must have an id attribute.");
this.service.registerPage(this.id, this.template.first, this.title);
}
}
PageTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageTemplateComponent, deps: [{ token: PageViewerService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
PageTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: PageTemplateComponent, selector: "page-template", inputs: { id: "id", title: "title" }, queries: [{ propertyName: "template", predicate: TemplateRef }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageTemplateComponent, decorators: [{
type: Component,
args: [{
selector: 'page-template',
template: `<ng-content></ng-content>`
}]
}], ctorParameters: function () { return [{ type: PageViewerService }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
type: Input,
args: ["id"]
}], title: [{
type: Input,
args: ["title"]
}], template: [{
type: ContentChildren,
args: [TemplateRef]
}] } });
class PageViewerModule {
}
PageViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PageViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerModule, declarations: [PageViewerComponent,
PageTemplateComponent], imports: [CommonModule], exports: [PageViewerComponent,
PageTemplateComponent] });
PageViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageViewerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PageViewerComponent,
PageTemplateComponent
],
imports: [
CommonModule
],
exports: [
PageViewerComponent,
PageTemplateComponent
]
}]
}] });
/*
* Public API Surface of page-viewer
*/
/**
* Generated bundle index. Do not edit.
*/
export { PageTemplateComponent, PageViewerComponent, PageViewerModule, PageViewerService };
//# sourceMappingURL=ems-web-app-page-viewer.mjs.map