Page MenuHomec4science
Files F59770693

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

File Metadata

Created
Thu, Apr 25, 02:31

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']
})
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
// for passing into components
selectedManuscript: TlnManuscript;
selectedPage: TlnPage;
selectedWord: TlnWord;
lastSelectedEntity: TlnEntity; // one of the above
// listening to whats going on
selectedManuscriptSub: Subscription;
selectedPageSub: Subscription;
selectedWordSub: Subscription;
queryParams: TlnQueryParams;
queryParamSubscription: Subscription;
// only for accessing params in the template TODO: maybe not needed.
manQueryParam: string;
pageQueryParam: string;
wordQueryParam: string;
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 {
// TODO: Reduce all inputs & outputs!. Only basic routing here. everything else like data to display is done by services
// TODO: trigger here changes into service like selectManuscript(man)
// If url pasted or refreshed --> resetting the chosen things according to the query params of the url;
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => {
this.queryParams = new TlnQueryParams(queryparams.man,
queryparams.page,
queryparams.row,
queryparams.word,
queryparams.navBarOpenState,
queryparams.navTreeIndex );
// The following not needed really
this.manQueryParam = queryparams['man'];
this.pageQueryParam = queryparams['page'];
this.wordQueryParam = queryparams['word'];
}
);
// Create Navigation trees for the navBar from queryParams
if (this.activatedRoute.snapshot.queryParamMap.get('man')) {
this.naviService.createNavTreesFromUrl(this.activatedRoute.snapshot.queryParams);
} else { this.naviService.createNavTreesOnInit(); }
// Set the NavBarOpenstate to true if it is true in the url query param onInit.
if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') === 'true') { this.navBarOpenState = true; }
// Listening to changes and set the selected things accordingly.
this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => {
this.selectedManuscript = m;
this.lastSelectedEntity = m.entity; });
this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => {
this.selectedPage = p;
this.lastSelectedEntity = p.entity; });
this.selectedWordSub = this.naviService.selectedWordChange.subscribe(w => {
this.selectedWord = w;
this.lastSelectedEntity = w.entity; });
}
toggleNavDrawer() {
// set it locally
this.navBarOpenState = !this.navBarOpenState;
// set the route as well
const openStateString = this.navBarOpenState === null ? 'false' : (this.navBarOpenState ? 'true' : 'false');
this.naviService.setQueryParam('navBarOpenState', openStateString);
this.naviService.updateRoute();
}
ngOnDestroy() {
// unsubscribe if component destroyed so there is no memory leak
this.queryParamSubscription.unsubscribe();
}
}

Event Timeline

c4science · Help