diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.ts b/src/app/content-view-tab-component/content-view-tab-component.component.ts index 3104123..efa5c69 100644 --- a/src/app/content-view-tab-component/content-view-tab-component.component.ts +++ b/src/app/content-view-tab-component/content-view-tab-component.component.ts @@ -1,110 +1,109 @@ 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; } - console.log('this.navBarOpenState', this.navBarOpenState); // 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 change so there is no memory leak + // unsubscribe if component destroyed so there is no memory leak this.queryParamSubscription.unsubscribe(); } } diff --git a/src/app/navigation-list-component/navigation-list-component.component.ts b/src/app/navigation-list-component/navigation-list-component.component.ts index a83ddae..13d3252 100644 --- a/src/app/navigation-list-component/navigation-list-component.component.ts +++ b/src/app/navigation-list-component/navigation-list-component.component.ts @@ -1,88 +1,91 @@ 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; // 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) { + if (this.navTrees[this.navTrees.findIndex((tree) => tree.isActive )].idx === 0 && this.navTreeData ) { const itemToScrollTo = document.getElementById(m.entity.id); this.scrollOnToSelectedItem(itemToScrollTo); } }); + } + + ngOnInit() { + + this.navTreeDataSub = this.naviService.activeTreeDataChange.subscribe(treeData => this.navTreeData = treeData ); + 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' }); + if ( item ) { + 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; } } }