diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss
index 86c1b22..c7a66ad 100644
--- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss
+++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.scss
@@ -1,22 +1,23 @@
// the navigation drawer on the very left containing the items to choose from
.mat-drawer-container {
width: 100%;
}
.mat-drawer {
overflow: hidden;
padding: 10px;
margin-right: 10px;
+
max-height: 100%;
min-height: 90%;
}
.mat-card {
width: 100%;
}
.mat-drawer-content {
+ min-height: 100vh;
width: 100%;
- height: 100vh;
- overflow: hidden;
+ height: 100%;
}
diff --git a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
index b08cde4..376af19 100644
--- a/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
+++ b/nietzsche-beta-app/src/app/content-view-tab-component/content-view-tab-component.component.ts
@@ -1,113 +1,113 @@
-import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {Subscription} from "rxjs/index";
import {NavigationServiceService} from "../services/navigation-service.service";
import { TLN_CROSSREF_ROUTE, TLN_MANUSCRIPT_ROUTE, TLN_SEARCH_ROUTE, TLN_VIEWER_ROUTE } from '../tln-edition/constants';
@Component({
selector: 'app-content-view-tab-component',
templateUrl: './content-view-tab-component.component.html',
styleUrls: ['./content-view-tab-component.component.scss'],
providers: [ NavigationServiceService ]
})
export class ContentViewTabComponentComponent implements OnInit {
// navigation tabs for the content view (manuscript view, page view, rhizome view)
navTabLinks: any[];
// navbar on th left for navigating
navBarOpenState = false;
fullscreen = false;
navBarOpenMode: string;
queryParams: Params = {};
queryParamSubscription: Subscription;
constructor(private router: Router,
private activatedRoute: ActivatedRoute,
private naviService: NavigationServiceService) {
// The links/tabs for routing the correct view-component
this.navTabLinks = [
{
label: 'Manuskriptansicht',
link: TLN_MANUSCRIPT_ROUTE,
index: 0,
isActive: false,
context: 'manuscript'
}, {
label: 'Seitenansicht',
link: TLN_VIEWER_ROUTE,
index: 1,
isActive: false,
context: 'page'
}, {
label: 'Querverweise',
link: TLN_CROSSREF_ROUTE,
index: 2,
isActive: false
}, {
label: 'Suche',
link: TLN_SEARCH_ROUTE,
index: 3,
isActive: false
},
];
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => {
this.queryParams = queryParams;
if (queryParams.navBarOpenState) {
this.navBarOpenState = JSON.parse(queryParams.navBarOpenState.toLowerCase());
}
if (queryParams.fullscreen) {
this.fullscreen = JSON.parse(queryParams.fullscreen.toLowerCase());
}
});
}
ngOnInit() {
// this.mesurePerformance();
this.navBarOpenMode = 'side'; // side || over || push
this.setParamsOnInit();
// If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
// needed for active routing in the nav tabs & for general use in the template
}
// Sets the isActive prop of a navTabLink to true and all others to false .
setActiveLink(link: string) {
this.navTabLinks.forEach((navTabLink, index ) => {
if (navTabLink.link === link) {
this.navTabLinks[index].isActive = true;
if (navTabLink.context) {
window.setTimeout(() => this.naviService.updateRoute({navContext : navTabLink.context}), 300);
}
} else {
this.navTabLinks[index].isActive = false;
}
});
}
mesurePerformance() {
const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
console.log('content load performance is: ', pageLoadTime);
}
setParamsOnInit() {
const qParams: Params = {};
// Set the NavBarOpenstate to true if it is not defined explicitely as false in the url query param onInit.
if (this.activatedRoute.snapshot.queryParamMap.get('navBarOpenState') !== 'false') {
qParams.navBarOpenState = 'true'; }
// viewMode
if (!this.activatedRoute.snapshot.queryParamMap.get('viewMode')) {
qParams.viewMode = 'Transkription/Faksimile';
}
if (!this.activatedRoute.snapshot.queryParamMap.get('navContext')) {
qParams.navContext = 'manuscript';
this.setActiveLink('tln-manuscript');
} else {
if (this.activatedRoute.snapshot.queryParamMap.get('navContext') === 'manuscript') {
this.setActiveLink('tln-manuscript');
} else {this.setActiveLink('tln-viewer'); } }
this.naviService.updateRoute(qParams);
}
}
diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html
index bc7c678..3f5bdc3 100644
--- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html
+++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.html
@@ -1,35 +1,35 @@
<div class="fixed-nav-container">
<mat-toolbar>Navigation</mat-toolbar>
- <div *ngIf="navTrees">
+ <div *ngIf="navTrees && navTabIndex !== -1">
<mat-tab-group [selectedIndex]="navTabIndex" (selectedTabChange)="changeNavTreeViaRoute($event.index)">
<mat-tab
*ngFor="let tree of navigationTreeDefs"
label={{tree.label}}>
</mat-tab>
</mat-tab-group>
</div>
</div>
- <div id="navlist" class="navlist-container" *ngIf="navTrees && navTrees[navTabIndex].entries">
- <mat-nav-list *ngIf="navTrees">
+ <div id="navlist" class="navlist-container" *ngIf="navTrees && navTabIndex !== -1">
+ <mat-nav-list *ngIf="navTrees && navTrees[navTabIndex]">
<mat-list-item *ngFor="let item of navTrees[navTabIndex].entries"
(click)="onSelectNavItem(item)"
[id] = "item.tlnEntity.id"
[class.active-item]="item.tlnEntity.id === navTrees[navTabIndex].selectedItem">
<mat-card class = "card-item">
<mat-card-header>
<mat-card-title>
<span>{{item.tlnEntity.label}}</span>
</mat-card-title>
<mat-card-subtitle *ngIf="item.tlnEntity.description">GSA-Signatur {{item.tlnEntity.description}}</mat-card-subtitle>
<mat-card-subtitle *ngIf="navTrees[navTabIndex].parentLabel">{{navTrees[navTabIndex].parentLabel}}</mat-card-subtitle>
<img mat-card-avatar *ngIf="item.avatar" [src]="item.avatar"/>
</mat-card-header>
<mat-card-content>
<img class="thumbnail" *ngIf="item.thumb" [src]="item.thumb"/>
<img class="thumbnail" *ngIf="item.svg" [src]="item.svg"/>
</mat-card-content>
</mat-card>
</mat-list-item>
</mat-nav-list>
</div>
diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts
index 0177b54..a94b739 100644
--- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts
+++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.ts
@@ -1,274 +1,272 @@
import {AfterViewInit, Component, ElementRef, EventEmitter, OnInit, ViewChildren} from '@angular/core';
import {NavigationServiceService} from '../services/navigation-service.service';
import {NavigationEntity, NavTreeDef, TlnQueryParams} from '../models/models';
import {Subscription} from 'rxjs/index';
import {ActivatedRoute, Params, Router} from '@angular/router';
import {QueryService} from '../services/query.service';
import {NavTree} from './navtree-directive.directive';
import * as _ from 'lodash';
@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, AfterViewInit {
navigationTreeDefs: NavTreeDef[];
navTrees: NavTree[]; // The actual Navtrees which are displayed
oldQueryParams: Params;
queryParams: Params;
queryParamSubscription: Subscription;
navTabIndex: number;
constructor( public naviService: NavigationServiceService,
private router: Router,
private activatedRoute: ActivatedRoute,
private queryService: QueryService) {
this.navigationTreeDefs = [
{ id: 'manuscript',
idx: 0,
isActive: true,
label: 'Manuskripte',
itemQParam: 'manuscript',
entries: [],
apiDef: {
type: 0, // rdf
baseUrl: 'https://nietzsche.fuseki.services.dasch.swiss/nietzsche',//'http://fuseki.nie-ine.ch/nietzsche-rw/query',
dataArray: 'results.bindings',
query: 'manuscripts.rq',
mapping: { // maps the properties of the reponse to tha NavTabDef properties, which are displayed
id: 'manuscript.value', // Short id, iri in most cases
iri: 'manuscript.value', // iri
type: 'type.value',
label: 'title.value',
description: 'gsaSignature.value',
avatar: 'thumbImage.value'
}
}
}, {
id: 'page',
idx: 1,
isActive: false,
label: 'Seiten',
itemQParam: 'page',
entries: [],
apiDef: {
type: 0, // rdf
baseUrl: 'https://nietzsche.fuseki.services.dasch.swiss/nietzsche',//'http://fuseki.nie-ine.ch/nietzsche-rw/query',
dataArray: 'results.bindings',
query: 'getPageData.rq',
mapping: {
id: 'page.value', // Short id, iri in most cases
iri: 'page.value', // iri
label: 'pageNumber.value',
thumb: 'thumb.value',
idx: 'pageNumber.value',
svg: 'svgFileName.value',
}
}
}
];
// If url pasted or page refreshed --> resetting this.queryparams to the query params of the url;
// needed for the template hence service instances can not be accessed in the template
this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryParams: Params ) => {
const navTabIndex = this.getActiveNavTabIndex(queryParams.navContext);
if (this.oldQueryParams && queryParams.navContext) { // only if there are any oldParams
this.reactOnContextChange(queryParams.navContext, this.oldQueryParams.navContext, navTabIndex );
this.reactOnItemChange('page', queryParams.page, this.oldQueryParams.page);
this.reactOnItemChange('manuscript', queryParams.manuscript, this.oldQueryParams.manuscript);
}
this.oldQueryParams = queryParams;
});
}
async ngOnInit() {
await this.createTreesOnInit();
this.navTabIndex = await this.getActiveNavTabIndex();
await this.populateNavTrees();
// set selected things in url
this.navTrees.forEach(tree => {
// if there is no selected item for each tree, we have to listen to the selectedItemSet/tree population and set them per default
if (!this.activatedRoute.snapshot.queryParamMap.get(tree.qParam)) {
tree.selectedItemSet.subscribe(item => {
this.setSelectedItemAndRoute(item.itemId, item.tabId);
});
}
});
// change navTree according to chosen route per default
// set NavContext if unset according to selected component: manuscriptView, tln-page view
if (this.activatedRoute.snapshot.firstChild.url[0].path === 'tln-viewer'
&& !this.activatedRoute.snapshot.queryParamMap.get('navContext')) {
this.naviService.updateRoute({navContext: 'page'});
}
}
- ngAfterViewInit() {
+ ngAfterViewInit() { // TODO: Remove and scroll only after set intenally
const selectedItem = this.activatedRoute.snapshot.queryParamMap.get(this.activatedRoute.snapshot.queryParamMap.get('navContext'));
this.scrollOnToSelectedItem(selectedItem);
}
reactOnItemChange(param: string, itemId: string, oldItemId) {
if (itemId && itemId !== '' && oldItemId) {
if (itemId !== oldItemId) {
const tab = this.navTrees.findIndex(tree => tree.id === param);
this.setSelectedItem(itemId, tab);
if (tab === this.navTabIndex) {
window.setTimeout(() => this.scrollOnToSelectedItem(itemId), 100);
}
}
}
}
reactOnContextChange(context: string, oldContext: string, activeTab: number) {
if (context !== oldContext) {
this.navTabIndex = activeTab;
- console.log('contextChange: ', oldContext, context, activeTab);
// must time out here hence document is not ready to scroll
window.setTimeout(() => this.scrollOnToSelectedItem(this.oldQueryParams[context]), 100);
}
}
scrollOnToSelectedItem(itemId: string ) {
- const offSetTop = document.getElementById(itemId).offsetTop;
- document.getElementById('navlist').scrollTop = offSetTop - 100;
+ if (document.getElementById(itemId)) {
+ const offSetTop = document.getElementById(itemId).offsetTop;
+ document.getElementById('navlist').scrollTop = offSetTop - 100;
+ }
}
/**
* getActiveNavTabIndexOnInit
* gets the active navTabIndex either from a passed navConText, from active qParam or or from definition
*/
getActiveNavTabIndex(con?: string) {
let navConText;
if (!con || con === '') {
navConText = this.activatedRoute.snapshot.queryParamMap.get('navContext');
} else { navConText = con; }
let navTabIndex = 0;
if (navConText && navConText !== '') {
const nIndex = this.navigationTreeDefs.findIndex(tree => tree.id === navConText);
navTabIndex = this.navigationTreeDefs[nIndex].idx;
} else { navTabIndex = 0; }
return navTabIndex;
}
createTreesOnInit() {
this.navTrees = [];
this.navigationTreeDefs.forEach( def =>
this.navTrees.push(new NavTree(def.id, def.idx, def.label, [], def.itemQParam, def.description, def.apiDef)));
}
async onSelectNavItem(item: NavigationEntity) {
- // For scrolling to the selected item (manuscript, page) into view
+ // If a new item is clicked
if (this.navTrees[this.navTabIndex].selectedItem !== item.tlnEntity.id) {
- console.log('item clicked: ', item)
- // only get new data for subTrees and set new params if the clicked item is not already the selected item
+ // get new data for subTrees and set new params accordingly
await this.emptyChildTrees(this.navTabIndex);
await this.removeAllChildTreeQParams(this.navTabIndex);
await this.setSelectedItemAndRoute(item.tlnEntity.id, this.navTabIndex);
await this.populateChildren(this.navTabIndex, item.tlnEntity.id);
- // Only if view is tln-viewer, we change to the second page tab
- if (this.activatedRoute.snapshot.queryParamMap.get('navContext') !== this.navTrees[this.getActiveNavTabIndex()].qParam) {
+ // Only if context !== 'page', e.g. view is tln-viewer), we change to the second page tab
+ const navContext = this.activatedRoute.snapshot.queryParamMap.get('navContext');
+ if (navContext !== this.navTrees[this.getActiveNavTabIndex()].qParam) {
this.changeNavTreeViaRoute(this.navTabIndex + 1);
}
- } else {
- console.log('clicked selectedItem');
- this.changeNavTreeViaRoute(this.navTabIndex + 1); } // if an already selected item is clicked again, it changes the tree/tab
+ } else { // if an already selected item is clicked again, it changes the tree/tab
+ this.changeNavTreeViaRoute(this.navTabIndex + 1); }
}
removeAllChildTreeQParams(tabId) {
this.navTrees.forEach((tree, index) => {
if (tree.idx > tabId) {
this.navTrees[index].selectedItem = null;
this.naviService.updateRoute({[tree.qParam]: null});
}
});
}
emptyChildTrees(parentIdx) {
this.navTrees.forEach((tree, index) => {
if (tree.idx > parentIdx) {
this.navTrees[index].entries = [];
}
});
}
setSelectedItem(navItemId: string, tabId: number) {
this.navTrees[tabId].selectedItem = navItemId;
}
// Will route, the qParamSubscription reacts and trees are built further
async setSelectedItemAndRoute(navItemId: string, tabId: number) {
- console.log('set new selected item: ', navItemId, 'in tab: ', tabId);
this.navTrees[tabId].selectedItem = navItemId;
const idx = this.navigationTreeDefs.findIndex(tree => tree.idx === tabId);
// set new qParam
const newParams = {};
const qParam = this.navigationTreeDefs[idx].itemQParam;
newParams[qParam] = navItemId;
this.naviService.updateRoute(newParams);
}
populateChildren(activeTab, itemId?: string) {
if (activeTab + 1 < this.navigationTreeDefs.length) {
// if an item in a tab with sub tabs is selected, the subtree should be loaded according to that selection and the tab should change
this.populateNavTrees(activeTab + 1, itemId );
}
}
// switches tabs in navtab ov navigation bar
changeNavTreeViaRoute(idx: number) {
- console.log('changing tab to', idx, this.navTrees)
if (idx < this.navTrees.length) {
this.naviService.updateRoute({navContext: this.navTrees[idx].qParam}); }
}
/**
* populateNavTrees creates the first trees if no query params are available in the url:
* It ceates the manuscripNavTree and the activePageNavTreeData of the first manuscript per default.
*
*/
async populateNavTrees(tabIdx?: number, itemId?: string) {
const tabStartIndex = tabIdx || 0; // where to start refreshing navtrees
for ( const treeDef of this.navigationTreeDefs.sort(def => (def.idx ))) {
if (treeDef.idx >= tabStartIndex) { // only create trees if needed
this.queryService.getQueryfromFilename(treeDef.apiDef.query).subscribe(async query => {
let queryToRun: string;
// If there is a selectedItem we have to parametrize the query
if (treeDef.idx > 0) { // so we have to parametrize the query
if (itemId) {
queryToRun = this.queryService.parametrizeQueryWithItem(query, itemId);
this.populateNavTree(treeDef, queryToRun);
} else {
// wait for selected item of the previous tab and parametrize then the query
this.navTrees[treeDef.idx - 1].selectedItemSet.subscribe(item => {
if (item.tabId === treeDef.idx - 1) {
queryToRun = this.queryService.parametrizeQueryWithItem(query, item.itemId);
this.populateNavTree(treeDef, queryToRun); }
});
}
} else {
this.populateNavTree(treeDef, query); }
});
}
}
}
populateNavTree(def: NavTreeDef, query) {
const idx = this.navTrees.findIndex(item => item.id === def.id);
let parentLabel;
if (idx > 0) { parentLabel = this.navTrees[idx - 1].selectedItemLabel; }
if (idx !== -1) {
this.queryService.getData(def.apiDef.baseUrl, query, 'SELECT').subscribe(data => {
this.navTrees[idx].setNavTreeData(_.get(data, def.apiDef.dataArray),
this.activatedRoute.snapshot.queryParams, parentLabel); });
}
}
}
diff --git a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.css b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.css
index ebe194c..a625edb 100644
--- a/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.css
+++ b/nietzsche-beta-app/src/app/tln-edition/tln-fulltext/tln-fulltext.component.css
@@ -1,53 +1,55 @@
#page {
- width: 100%;
+ width: 98%;
position: relative;
top: 0px;
left: 0px;
+ height: 100%;
+ overflow: visible;
}
.icon-button {
width: 15px;
margin-left: 3px;
}
.page-navi {
float: left;
margin-top: -3px;
margin-bottom: 1px;
height: 38px;
background-color: lightblue;
z-index: 2;
}
.default-mouse {
cursor: default;
}
.small-grey {
color: lightgrey;
font-size: 80%;
}
.text {
position: absolute;
top: 10px;
left: 500px;
}
.search {
position: relative;
top: 60px;
width: 500px;
height: 100%;
text-align: center;
margin-right: 20px;
}
.extra-space {
margin-top: 45px;
}
.title {
text-align: left;
margin-left: 20px;
}
.form {
width: 95%;
}
.full-width {
min-width: 150px;
max-width: 500px;
width: 80%;
}