Page MenuHomec4science
Files F59900221

navigation-list-component.component.ts
No OneTemporary
Actions

File Metadata

Created
Thu, Apr 25, 22:43

navigation-list-component.component.ts
View Options

import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
import {NavigationServiceService} from '../services/navigation-service.service';
import {
ManuscriptSelectionDef, NavigationEntity, NavTree, NavTreeIndex, TlnEntity, TlnManuscript, TlnPage, TlnQueryParams,
TlnWord
} from '../models/models';
import {Subscription} from 'rxjs/index';
@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 {
@ViewChildren('tabFocus') focussedElements: QueryList<ElementRef>;
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.
navTreeIndex = []; // The navTreeIndex available for the nav bar for switchich between navtrees
manuscriptSelections: Array<ManuscriptSelectionDef>;
selectedManuscriptGroup: number;
// 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.navTreeIndex = trees;
} );
}
ngOnInit() {
this.manuscriptSelections = this.naviService.getManuscriptSelections();
this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => {
this.navTreeData = treeData;
this.setFocusOnActiveTab();
this.tryToScroll();
}
);
// Listening to changes and set the selected things accordingly.
this.selectedManuscriptSub = this.naviService.selectedManuscriptChange.subscribe(m => {
this.selectedManId = m.entity.id;
});
this.selectedPageSub = this.naviService.selectedPageChange.subscribe(p => {
this.selectedPageId = p.entity.id;
});
}
tryToScroll() {
// TODO: Tooo slow: tree is not yet active, so wrong ID is passed
// scroll into view of the selected item within the active tree
if (this.navTreeIndex[this.navTreeIndex.findIndex((tree) => tree.isActive)].idx === 0 ) {
this.scrollOnToSelectedItem(this.selectedManId); } else {this.scrollOnToSelectedItem(this.selectedPageId); }
}
setFocusOnActiveTab() {
const activeTab = (element => element.isActive === true);
const activeTabIndex = this.navTreeIndex.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) {
// console.log('try to scroll to', itemId);
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();
}
changeManuscriptNavTree(id: number) {
console.log('new treeId = ', id);
}
isItemSelected(itemId) {
let isSelected = false;
if (this.selectedManId === itemId || this.selectedPageId === itemId) {
isSelected = true; }
return isSelected;
}
}

Event Timeline

c4science · Help