Page MenuHomec4science

navigation-list-component.component.ts
No OneTemporary

File Metadata

Created
Mon, Jan 25, 20:46

navigation-list-component.component.ts

import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
import {NavigationServiceService} from "../services/navigation-service.service";
import {NavigationEntity, NavTree, TlnEntity, TlnManuscript, TlnPage, TlnQueryParams, TlnWord} from '../models/models';
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 parent component and naviservice. triggers click event to service.
*/
export class NavigationListComponentComponent implements OnInit {
navTreeData: Array<NavigationEntity>; // the data displayed in the navigation bar
navTreeDataSub: Subscription; // detecting/reloding if the tree data changes
navTreeSubscription: Subscription; // subscribing if the displayed tree changes.
navTrees = []; // The navTrees available for the nav bar for switchich between navtrees
// tln specific ...
// selectedManuscript: TlnManuscript;
// selectedPage: TlnPage;
// selectedWord: TlnWord;
// lastSelectedEntity: TlnEntity; // one of the above
// Subscribtions
selectedManuscriptSub: Subscription;
selectedPageSub: Subscription;
// selectedWordSub: Subscription;
selectedManId = ''; // for highlighting a chosen nav item. Will be set by click in the template as well as by subscription of nav service
selectedPageId = ''; // for highlighting a chosen nav item
constructor( private naviService: NavigationServiceService ) {
// if the displayed navTree changes through navigation.
this.navTreeSubscription = this.naviService.navTreeIndexChange.subscribe(trees => this.navTrees = trees );
}
ngOnInit() {
this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => this.navTreeData = treeData );
// Listening to changes and set the selected things accordingly.
this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => {
this.selectedManId = m.entity.id;
// Only if the active tree is the manuscrip tree, scroll into view of the selected manuscript
if (this.navTrees[this.navTrees.findIndex((tree) => tree.isActive)].idx === 0) {
const itemToScrollTo = document.getElementById(m.entity.id);
this.scrollOnToSelectedItem(itemToScrollTo);
}
});
this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => {
this.selectedPageId = p.entity.id;
const itemToScrollTo = document.getElementById(p.entity.id);
this.scrollOnToSelectedItem(itemToScrollTo); });
}
onSelectNavItem(item: NavigationEntity) {
this.naviService.onSelectedItem(item);
}
// For scrolling to the selected item (manuscript, page) into view
scrollOnToSelectedItem(item: any) {
item.scrollIntoView({ behavior: 'smooth' });
}
// switches tabs in navtab ov navigation bar
changeToTree(idx) {
// set treedata to new tab index
this.naviService.setActiveTreeData(idx);
// change also the tab itself.
this.naviService.changeActiveTreeIndex(idx);
}
isItemSelected(itemId) {
let isSelected = false;
if (this.selectedManId === itemId || this.selectedPageId === itemId) {
isSelected = true; }
return isSelected;
}
treeHasChanged(idx) {
if (this.navTrees[this.navTrees.findIndex((tree) => tree.isActive)].idx === idx) {
return false;
} else { return true; }
}
}

Event Timeline