Page MenuHomec4science

navigation-list-component.component.ts
No OneTemporary

File Metadata

Created
Fri, Mar 29, 15:51

navigation-list-component.component.ts

import {Component, ElementRef, OnInit, QueryList, ViewChildren} from '@angular/core';
import {NavigationServiceService} from '../services/navigation-service.service';
import {NavigationEntity, TlnQueryParams} from '../models/models';
import {NavigationDefinition} from '../../assets/content_definitions';
import {Subscription} from 'rxjs/index';
import {ActivatedRoute, Params, Router} from '@angular/router';
@Component({
selector: 'app-navigation-list-component',
templateUrl: './navigation-list-component.component.html',
styleUrls: ['./navigation-list-component.component.scss']
})
/**
* NavigationListComponent
* Does sinply consume data coming from naviservice && activated route. triggers click event to service.
*/
export class NavigationListComponentComponent implements OnInit {
@ViewChildren('tabFocus') focussedElements: QueryList<ElementRef>;
navTreeData: Array<NavigationEntity>; // the data displayed in the navigation bar
navTreeDataSub: Subscription; // detecting/reloding if the tree data changes
newNavigationDef = new NavigationDefinition(); // The definitioin of the trees & subtrees
// The active manuscriptSelection/ManuscriptGroup; changed by service if onItit from query params or by the user/template
selectedManuscriptGroupId: number;
queryParams: TlnQueryParams;
queryParamSubscription: Subscription;
constructor( private naviService: NavigationServiceService,
private router: Router,
private activatedRoute: ActivatedRoute ) {
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => {
this.reactOnRouteEvent(queryParams);
}
);
}
ngOnInit() {
this.reactOnRouteEvent(this.activatedRoute.snapshot.queryParams);
// subscribe to the navTreeData which is exchanged and manipulated by the service
this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => {
// console.log('new navTreeData in nav list component');
// console.log('new treeData in Navlist: ', treeData);
this.navTreeData = treeData;
this.setFocusOnActiveTab(); }
);
}
reactOnRouteEvent(queryParams) {
this.queryParams = new TlnQueryParams(
queryParams.man,
queryParams.page,
queryParams.row,
queryParams.word,
queryParams.viewMode,
queryParams.navBarOpenState,
parseInt(queryParams.navTreeIndex, 10),
parseInt(queryParams.manuscriptGroup, 10) );
this.selectedManuscriptGroupId = parseInt(queryParams.manuscriptGroup, 10);
this.initScrollEventForActiveTree(parseInt(queryParams.navTreeIndex, 10));
}
initScrollEventForActiveTree(newTree) {
if (newTree === 0 ) { this.scrollOnToSelectedItem(this.activatedRoute.snapshot.queryParamMap.get('man')); } else {
this.scrollOnToSelectedItem(this.activatedRoute.snapshot.queryParamMap.get('page')); }
}
setFocusOnActiveTab() {
const activeTab = (element => element.idx === this.activatedRoute.snapshot.queryParamMap.get('navTreeIndex'));
const activeTabIndex = this.newNavigationDef.newNavigationTreeIndex.findIndex(activeTab);
if ( this.focussedElements ) {
this.focussedElements.forEach((elem, index) => {
if ( index === activeTabIndex ) {
elem.nativeElement.focus();
}
});
}
}
onSelectNavItem(item: NavigationEntity) {
this.naviService.onSelectedItem(item);
this.scrollOnToSelectedItem(item.tlnEntity.id);
}
// For scrolling to the selected item (manuscript, page) into view
scrollOnToSelectedItem(itemId: string ) {
const itemToScrollTo = document.getElementById(itemId);
if ( itemToScrollTo ) { itemToScrollTo.scrollIntoView({ behavior: 'smooth' });
}
}
// switches tabs in navtab ov navigation bar
changeMainNavTree(idx) {
// set treedata to new tab index
this.naviService.setActiveTreeData(idx);
// change also the tab itself.
this.naviService.changeActiveTreeIndex(idx);
this.setFocusOnActiveTab();
setTimeout(() => { this.initScrollEventForActiveTree(idx); }, 500); // needed, because data is exchanged
}
changeManuscriptNavTree(id: number) {
this.naviService.setSelectedManuscriptTree(id);
}
isItemSelected(itemId) {
let isSelected = false;
if (this.activatedRoute.snapshot.queryParamMap.get('man') === itemId ||
this.activatedRoute.snapshot.queryParamMap.get('page') === itemId) {
isSelected = true; }
return isSelected;
}
}

Event Timeline