+
-
-
-
+
+
-
-
-
-
-
- {{item.tlnEntity.label}}
-
- GSA-Signatur {{item.tlnEntity.description}}
- {{tree.parentLabel}}
- ![]()
-
-
- ![]()
- ![]()
-
-
-
-
-
+
+
+
+
+
+ {{item.tlnEntity.label}}
+
+ GSA-Signatur {{item.tlnEntity.description}}
+ {{navTrees[navTabIndex].parentLabel}}
+ ![]()
+
+
+ ![]()
+ ![]()
+
+
+
+
+
diff --git a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss
index 1c6d004..8ca6cc3 100644
--- a/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss
+++ b/nietzsche-beta-app/src/app/navigation-list-component/navigation-list-component.component.scss
@@ -1,39 +1,40 @@
-.fixed-nav-header {
+.fixed-nav-container {
position: sticky;
+ max-height: 15vh;
}
.navlist-container {
+ position: sticky;
+ max-height: 85vh;
overflow-x: hidden;
-}
-
-#navlist {
+ overflow-y: auto;
scroll-behavior: smooth;
}
-.mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
- padding: 0 !important;
+.mat-nav-list {
+ scroll-behavior: smooth;
}
.mat-nav-list .mat-list-item {
width: 100%;
min-height: 72px;
height: 100%; /* default is 72px */
padding: 0 !important;;
margin: 0 !important;
}
.thumbnail {
max-width: 100px;
max-height: 100px;
}
.card-item {
width: 100%;
min-width: 100%;
margin-top: 5px;
background-color: rgba(255, 255, 255, 0) !important;
}
.active-item {
background: linear-gradient(to right, rgba(255, 255, 255, 0) , #dadada);
}
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 335e5c2..0177b54 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,271 +1,274 @@
-import {Component, ElementRef, EventEmitter, OnInit, ViewChildren} from '@angular/core';
+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 {
+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) { // only if there are any oldParams
+ 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, 'this.ngOnInit()');
+ 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() {
+ 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 itemToScrollTo = document.getElementById(itemId);
- const topPos = itemToScrollTo.offsetTop;
- if (topPos) {
- if (document.getElementById('navlist')) {
- document.getElementById('navlist').scrollTop = topPos;
- }
- }
+ 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
- const activeTab = this.getActiveNavTabIndex();
- if (this.navTrees[activeTab].selectedItem !== item.tlnEntity.id) {
+ 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
- this.emptyChildTrees(activeTab);
- this.setSelectedItemAndRoute(item.tlnEntity.id, activeTab, 'RRRRRRRRRRRRRRRRR onSelectNavItem');
- this.removeAllChildTreeQParams(activeTab);
- this.populateChildren(activeTab, item.tlnEntity.id);
- }
- this.changeNavTreeAndRoute(activeTab + 1);
- window.setTimeout(() => this.scrollOnToSelectedItem(item.tlnEntity.id), 100);
+ 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) {
+ 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
}
removeAllChildTreeQParams(tabId) {
- this.navigationTreeDefs.forEach(tree => {
- if (tree.id > tabId) {
- const qParam = this.navigationTreeDefs[tabId].itemQParam;
- this.naviService.updateRoute({[qParam]: null});
+ 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 => {
+ this.navTrees.forEach((tree, index) => {
if (tree.idx > parentIdx) {
- tree.entries = [];
+ this.navTrees[index].entries = [];
}
});
}
setSelectedItem(navItemId: string, tabId: number) {
this.navTrees[tabId].selectedItem = navItemId;
}
- setSelectedItemAndRoute(navItemId: string, tabId: number, me?: string) {
+ // 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;
- // null all childrens qParams, e-g. if another manuscript is selected, the selectedPage must be nulled
- this.navigationTreeDefs.forEach(def => {
- if (def.idx > idx) {
- newParams[def.itemQParam] = null; }
- });
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
- changeNavTreeAndRoute(idx: number) {
+ changeNavTreeViaRoute(idx: number) {
+ console.log('changing tab to', idx, this.navTrees)
if (idx < this.navTrees.length) {
- this.naviService.updateRoute({navContext: this.navigationTreeDefs[idx].id}); }
+ 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); });
}
}
}