diff --git a/src/app/content-view-tab-component/content-view-tab-component.component.html b/src/app/content-view-tab-component/content-view-tab-component.component.html
index a57620b..7c9c508 100644
--- a/src/app/content-view-tab-component/content-view-tab-component.component.html
+++ b/src/app/content-view-tab-component/content-view-tab-component.component.html
@@ -1,64 +1,64 @@
-<mat-card>
- <nav mat-tab-nav-bar>
- <a mat-tab-link
- *ngFor="let link of navTabLinks"
- [routerLink]="link.link"
- [queryParams]="queryParams"
- routerLinkActive #rla="routerLinkActive"
- [active]="rla.isActive">
- {{link.label}}
- </a>
- </nav>
-</mat-card>
-<mat-drawer-container style="height: 100%; min-height: 500px" [hasBackdrop]= false>
+<mat-drawer-container style="height: 100%; min-height: 1000px" [hasBackdrop]= false>
<mat-drawer [mode]="navBarOpenMode" [position] ="orientation" [disableClose]="false" [opened]="navBarOpenState ">
<mat-card class="sidenav-drawer" style="display: table-row">
<div class="navbar-container">
<app-navigation-list-component></app-navigation-list-component>
</div>
<div class="button-container" *ngIf="navBarOpenMode === 'over'">
<button mat-raised-button class="toggle-button" (click)="toggleNavDrawer()">
<mat-icon class="mat-accent">{{ navBarOpenState ? 'chevron_left' : 'chevron_right' }}</mat-icon>
</button>
</div>
</mat-card>
</mat-drawer>
<mat-drawer-content style="display: table">
<div class="button-container">
<button mat-raised-button class="toggle-button" (click)="toggleNavDrawer()">
<mat-icon class="mat-accent">{{ navBarOpenState ? 'chevron_left' : 'chevron_right' }}</mat-icon>
</button>
</div>
<div class="content-container">
+ <mat-card>
+ <nav mat-tab-nav-bar>
+ <a mat-tab-link
+ *ngFor="let link of navTabLinks"
+ [routerLink]="link.link"
+ [queryParams]="queryParams"
+ routerLinkActive #rla="routerLinkActive"
+ [active]="rla.isActive">
+ {{link.label}}
+ </a>
+ </nav>
+ </mat-card>
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
<!--
<mat-drawer-container id="sidenav-container" [hasBackdrop]= false >
<mat-drawer id="sidenav-drawer" mode="over" position ="end" [disableClose]="true" [opened]="openState">
<div class="content-area">
<div class="indrawer-toggle-button-container">
<button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
<mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left' }}</mat-icon>
</button>
</div>
<div class="indrawer-content-container">
<app-info-box [manuscript]="manuscript"></app-info-box>
</div>
</div>
</mat-drawer>
<mat-drawer-content id="main-content-container">
<div class="content-area">
<div class="content-container">
<router-outlet></router-outlet>
</div>
<div class = "toggle-button-container">
<button mat-raised-button class="toggle-button" (click)="toggleDetailsDrawer()">
<mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left' }}</mat-icon>
</button>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
-->
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 d75c8ca..3104123 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,110 @@
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: 'Manuskripte',
+ 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
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 c68fea8..a83ddae 100644
--- a/src/app/navigation-list-component/navigation-list-component.component.ts
+++ b/src/app/navigation-list-component/navigation-list-component.component.ts
@@ -1,84 +1,88 @@
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.selectedManuscript = m;
- // this.lastSelectedEntity = m.entity;
- this.selectedManId = m.entity.id; });
+ 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; }
}
}