Page MenuHomec4science
Files F60210570

content-view-tab-component.component.ts
No OneTemporary
Actions

File Metadata

Created
Sun, Apr 28, 08:14

content-view-tab-component.component.ts
View Options

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {Subscription} from "rxjs/index";
import {NavigationServiceService} from "../services/navigation-service.service";
import { TLN_CROSSREF_ROUTE, TLN_MANUSCRIPT_ROUTE, TLN_SEARCH_ROUTE, TLN_VIEWER_ROUTE } from '../tln-edition/constants';
@Component({
selector: 'app-content-view-tab-component',
templateUrl: './content-view-tab-component.component.html',
styleUrls: ['./content-view-tab-component.component.scss'],
providers: [ NavigationServiceService ]
})
export class ContentViewTabComponentComponent implements OnInit {
// navigation tabs for the content view (manuscript view, page view, rhizome view)
navTabLinks: any[];
// navbar on th left for navigating
navBarOpenState = false;
fullscreen = false;
navBarOpenMode: string;
queryParams: Params = {};
queryParamSubscription: Subscription;
constructor(private router: Router,
private activatedRoute: ActivatedRoute,
private naviService: NavigationServiceService) {
// The links/tabs for routing the correct view-component
this.navTabLinks = [
{
label: 'Manuskriptansicht',
link: TLN_MANUSCRIPT_ROUTE,
index: 0,
isActive: false,
context: 'manuscript'
}, {
label: 'Seitenansicht',
link: TLN_VIEWER_ROUTE,
index: 1,
isActive: false,
context: 'page'
}, {
label: 'Querverweise',
link: TLN_CROSSREF_ROUTE,
index: 2,
isActive: false
}, {
label: 'Suche',
link: TLN_SEARCH_ROUTE,
index: 3,
isActive: false
},
];
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => {
this.queryParams = queryParams;
if (queryParams.navBarOpenState) {
this.navBarOpenState = JSON.parse(queryParams.navBarOpenState.toLowerCase());
}
if (queryParams.fullscreen) {
this.fullscreen = JSON.parse(queryParams.fullscreen.toLowerCase());
}
});
}
ngOnInit() {
// this.mesurePerformance();
this.navBarOpenMode = 'side'; // side || over || push
this.setParamsOnInit();
// If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
// needed for active routing in the nav tabs & for general use in the template
}
// Sets the isActive prop of a navTabLink to true and all others to false .
setActiveLink(link: string) {
this.navTabLinks.forEach((navTabLink, index ) => {
if (navTabLink.link === link) {
this.navTabLinks[index].isActive = true;
if (navTabLink.context) {
window.setTimeout(() => this.naviService.updateRoute({navContext : navTabLink.context}), 300);
}
} else {
this.navTabLinks[index].isActive = false;
}
});
}
mesurePerformance() {
const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
console.log('content load performance is: ', pageLoadTime);
}
setParamsOnInit() {
const qParams: Params = {};
// Set the NavBarOpenstate to true if it is not defined explicitely as false in the url query param onInit.
if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') !== 'false') {
qParams.navBarOpenState = 'true'; }
// viewMode
if (!this.activatedRoute.snapshot.queryParamMap.get('viewMode')) {
qParams.viewMode = 'Transkription/Faksimile';
}
if (!this.activatedRoute.snapshot.queryParamMap.get('navContext')) {
qParams.navContext = 'manuscript';
this.setActiveLink('tln-manuscript');
} else {
if (this.activatedRoute.snapshot.queryParamMap.get('navContext') === 'manuscript') {
this.setActiveLink('tln-manuscript');
} else {this.setActiveLink('tln-viewer'); } }
this.naviService.updateRoute(qParams);
}
}

Event Timeline

c4science · Help