Page MenuHomec4science
Files F59984446

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

File Metadata

Created
Fri, Apr 26, 13:57

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

import {Component, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {Subscription} from "rxjs/index";
import {TlnManuscript, TlnPage, TlnWord, TlnEntity, TlnQueryParams} from '../models/models';
import {NavigationServiceService} from "../services/navigation-service.service";
@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, OnDestroy {
// navigation tabs for the content view (manuscript view, page view, rhizome view)
navTabLinks: any[];
// navbar on th left for navigating
navBarOpenState: boolean;
navBarOpenMode = 'push'; // side || over || push
queryParams: TlnQueryParams;
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: 'manuscript',
index: 0
}, {
label: 'Seitenansicht',
link: 'page',
index: 1
}, {
label: 'Rhizome-Ansicht',
link: 'rhizome',
index: 2
},
];
}
ngOnInit(): void {
// If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
// needed for active routing in the nav tabs.
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
this.queryParams = new TlnQueryParams(queryparams.man,
queryparams.page,
queryparams.row,
queryparams.word,
queryparams.viewMode,
queryparams.navBarOpenState,
queryparams.navTreeIndex,
queryparams.manuscriptGroup);
}
);
// Create Navigation trees for the navBar from queryParams
if (this.activatedRoute.snapshot.queryParamMap.get('man') || this.activatedRoute.snapshot.queryParamMap.get('man')) {
this.naviService.createNavTreesFromUrlParams(this.activatedRoute.snapshot.queryParams);
} else { this.naviService.createNavTreesOnInit(); }
// Set the NavBarOpenstate to false if it is false in the url query param onInit. In every other case we toggle it open actively.
if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'false') {
this.navBarOpenState = false; } else {
this.navBarOpenState = true;
this.updateNavBarOpenState(); }
}
toggleNavDrawer() {
this.navBarOpenState = !this.navBarOpenState;
this.updateNavBarOpenState();
}
updateNavBarOpenState() {
const openStateString = this.navBarOpenState === null ? 'true' : (this.navBarOpenState ? 'true' : 'false');
this.naviService.setQueryParamOnServiceLevel('navBarOpenState', openStateString);
this.naviService.updateRoute('updateNavBarOpenState()');
}
ngOnDestroy() {
// unsubscribe if component destroyed so there is no memory leak and no query params in url
this.queryParamSubscription.unsubscribe();
}
}

Event Timeline

c4science · Help