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 efa5c69..21dff30 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,109 +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); + this.naviService.createNavTreesFromUrlParams(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; } // 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 destroyed so there is no memory leak this.queryParamSubscription.unsubscribe(); } } diff --git a/src/app/models/models.ts b/src/app/models/models.ts index 641996f..22e71b4 100644 --- a/src/app/models/models.ts +++ b/src/app/models/models.ts @@ -1,155 +1,149 @@ // class for Everything: extended by NavigationEntity, Manuscript, Page, Word with all common properties import {SafeUrl, ɵDomSanitizerImpl} from '@angular/platform-browser'; export class TlnEntity { id: string; // Short id, iri in most cases iri: string; // iri type: string; // rdfs:type navIndex: number; label?: string; constructor(id: string, iri: string, type: string, navIndex: number, label?: string) { this.id = id; this.iri = iri; this.type = type; this.navIndex = navIndex; this.label = label; } } export class TlnQueryParams { man: string; page: string; row: string; word: string; navBarOpenState: boolean; navTreeIndex: number; constructor(man: string, page: string, row: string, word: string, navBarOpenState: boolean, navTreeIndex: number ) { this.man = man; this.page = page; this.word = word; this.navBarOpenState = navBarOpenState; this.navTreeIndex = navTreeIndex; } } // The navigation entries in each tree for each viewtab (TlnManuscript, TlnPage, PositionalEntity) used by navigation // TODO: add several idxes? Or choosing another order will reload all, hence there is only one idx // export class NavigationEntity { idx: number; tlnEntity: TlnEntity; img?: SafeUrl; // url of image (Thumbnail) constructor(idx: number, tlnEntity: TlnEntity, img?: string ) { this.idx = idx; this.img = img; // iri of image for passing this.tlnEntity = tlnEntity; } } // subclass for TlnManuscript, TlnPage, Word with all common properties export class TlnPhysicalEntity { entity: TlnEntity; description?: string; - image?: Image; + image?: SafeUrl; // url of image (Thumbnail); svg?: Svg; - constructor(entity: TlnEntity, description?: string, image?: Image, svg?: Svg) { + constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg) { this.entity = entity; this.description = description; this.image = image; this.svg = svg; } } // the manuscript class export class TlnManuscript extends TlnPhysicalEntity { manuscriptSpec?: string; - constructor(entity: TlnEntity, description?: string, image?: Image, svg?: Svg, manuscriptSpec?: string ) { + constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, manuscriptSpec?: string ) { super( entity, description, image, svg); this.manuscriptSpec = manuscriptSpec; } } // the TlnPage class export class TlnPage extends TlnPhysicalEntity { pageSpec?: string; - constructor(entity: TlnEntity, description?: string, image?: Image, svg?: Svg, pageSpec?: string ) { + constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, pageSpec?: string ) { super( entity, description, image, svg); this.pageSpec = pageSpec; } } export class TlnRow extends TlnPhysicalEntity { rowSpec?: PositionalEntity; - constructor(entity: TlnEntity, description?: string, image?: Image, svg?: Svg, rowSpec?: PositionalEntity ) { + constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, rowSpec?: PositionalEntity ) { super( entity, description, image, svg); this.rowSpec = rowSpec; } } // the TlnWord class export class TlnWord extends TlnPhysicalEntity { wordSpec?: PositionalEntity; - constructor(entity: TlnEntity, description?: string, image?: Image, svg?: Svg, wordSpec?: PositionalEntity ) { + constructor(entity: TlnEntity, description?: string, image?: SafeUrl, svg?: Svg, wordSpec?: PositionalEntity ) { super( entity, description, image, svg); this.wordSpec = wordSpec; } } export class Annotation { id: string; text: string; styles: Array; } -export class Image { - id: string; - imageUrl: string; - thumbnailUrl: string; -} - export class Svg { id: string; svgUrl: string; binaryValue?: string; constructor(id, svgUrl, binaryValue?) { this.id = id; this.svgUrl = svgUrl; this.binaryValue = this.binaryValue; } } // Only relevant if we create an svg ourselves? export interface PositionalEntity { // used for word rectangles as well as for line numbering id: string; text: string; left: number; top: number; width: number; height: number; row?: number; iri?: string; // TODO, change this. will be the id later when change data source to rdf ... } export class NavTree { idx: number; isActive: boolean; label: string; treeClass: string; constructor( idx: number, isActive: boolean, label: string, treeClass: string ) { this.idx = idx; this.isActive = isActive; this.label = label; this.treeClass = treeClass; } } diff --git a/src/app/navigation-list-component/navigation-list-component.component.html b/src/app/navigation-list-component/navigation-list-component.component.html index 94f573e..c2c4850 100644 --- a/src/app/navigation-list-component/navigation-list-component.component.html +++ b/src/app/navigation-list-component/navigation-list-component.component.html @@ -1,28 +1,31 @@ -
Navigation +Navigation

Manuskript {{selectedManId}}

 -
+

{{item.tlnEntity.label}}

description
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 6dfb1c8..5cece05 100644 --- a/src/app/navigation-list-component/navigation-list-component.component.ts +++ b/src/app/navigation-list-component/navigation-list-component.component.ts @@ -1,92 +1,109 @@ -import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, QueryList, ViewChild, ViewChildren} 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 { +export class NavigationListComponentComponent implements OnInit, AfterViewInit { + + @ViewChildren('tabFocus') focussedElements: QueryList; 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 lastSelectedItem: NavigationEntity; constructor( private naviService: NavigationServiceService ) { // if the displayed navTree changes through navigation. - this.navTreeSubscription = this.naviService.navTreeIndexChange.subscribe(trees => this.navTrees = trees ); + this.navTreeSubscription = this.naviService.navTreeIndexChange.subscribe(trees => { + this.navTrees = trees; + this.ngAfterViewInit(); } ); // 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 && 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); }); } + ngAfterViewInit() { + const activeTab = (element => element.isActive === true); + const activeTabIndex = this.navTrees.findIndex(activeTab); + if ( this.focussedElements ) { + this.focussedElements.forEach((elem, index) => { + if ( index === activeTabIndex ) { + console.log('fuuu') + elem.nativeElement.focus(); + } + }); + } + } + onSelectNavItem(item: NavigationEntity) { this.naviService.onSelectedItem(item); } // For scrolling to the selected item (manuscript, page) into view scrollOnToSelectedItem(item: any) { 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; } } } diff --git a/src/app/page-view-component/page-view-component.component.html b/src/app/page-view-component/page-view-component.component.html index cf181a9..bbc4237 100644 --- a/src/app/page-view-component/page-view-component.component.html +++ b/src/app/page-view-component/page-view-component.component.html @@ -1,93 +1,94 @@
{{activePage | json}}
+ # ## vertical_split horizontal_split
diff --git a/src/app/page-view-component/page-view-component.component.ts b/src/app/page-view-component/page-view-component.component.ts index bbe0e53..6858c38 100644 --- a/src/app/page-view-component/page-view-component.component.ts +++ b/src/app/page-view-component/page-view-component.component.ts @@ -1,155 +1,139 @@ import {Component, OnInit} from '@angular/core'; -import {Image, PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord} from "../models/models"; -import {ImageService} from "../services/image.service"; +import {PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord} from "../models/models"; import {SvgService} from "../services/svg.service"; import {PageViewService} from "../services/field-interaction.service"; import {Subscription} from "rxjs/index"; import {ActivatedRoute, Params, Router} from "@angular/router"; import {NavigationServiceService} from "../services/navigation-service.service"; +import {SafeUrl} from '@angular/platform-browser'; @Component({ selector: 'app-page-view-component', templateUrl: './page-view-component.component.html', styleUrls: ['./page-view-component.component.scss'] }) export class PageViewComponentComponent implements OnInit { activePage: TlnPage; activePageChange: Subscription; // TODO: implement images over http imageToShow: any; // the returned image from http to display - selectedImage: Image; // the image selected in gallery, menue or so + selectedImage: SafeUrl; // the image selected in gallery, menue or so isImageLoading: boolean; // status of the image: ready and available for the component to show? // svgs svgToShow: any; // the returned svg from http to display selectedSvg: Svg; // the svg selected in gallery, menue or so isSvgLoading: boolean; // status of the svg: ready and available for the component to show? // settings for user to choose paging: string; alignment: string; fixSidebar: boolean; highlight: boolean; manQueryParam: string; pageQueryParam: string; rowQueryParam: string; wordSubscription: Subscription; wordQueryParam: string; // NavBar/Infobox selectedWord: TlnWord; openState: boolean; defaultOpenState = false; - constructor(private imageService: ImageService, - private svgService: SvgService, + constructor(private svgService: SvgService, private pageViewService: PageViewService, private router: Router, private activatedRoute: ActivatedRoute, private naviService: NavigationServiceService) { } ngOnInit() { this.activePageChange = this.naviService.selectedPageChange.subscribe( page => { this.activePage = page; this.selectedSvg = page.svg; } ); // TODO: make the selected scg dynamic // this.selectedSvg = {id: '131', // svgUrl: 'https://drive.switch.ch/remote.php/webdav/Der_spaete_Nietzsche/DATA/svg/W_II_1_page131_web.svg'}; // this.getSvgFromService(); // infobox this.openState = this.defaultOpenState; // default settings oninit this.paging = 'double'; this.alignment = 'horizontal'; this.fixSidebar = false; this.highlight = true; - this.imageService.onClickedImage.subscribe( // subscribe to changes if another image is selected - (changedImage: Image ) => this.selectedImage = changedImage - ); - this.svgService.onClickedSvg.subscribe( // subscribe to changes if another svg is selected (changedSVG: Svg ) => this.selectedSvg = changedSVG ); this.wordSubscription = this.pageViewService.wordChange$.subscribe( word => { if (this.selectedWord) { if (this.selectedWord.wordSpec === word) { this.toggleDetailsDrawer(); } else { this.selectedWord.wordSpec = word; this.selectedWord.entity = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.text); const wordNav = new NavigationEntity(0, this.selectedWord.entity); this.naviService.onSelectedItem(wordNav); this.naviService.setResourceOfInterest(word.id); if (!this.openState) { this.toggleDetailsDrawer(); } } } else { const e = new TlnEntity(word.id, word.iri, 'TlnWord', 0, word.id); this.selectedWord = new TlnWord(e, word.text, this.selectedImage, this.selectedSvg, word); } }); } private turnPage(direction: number) { this.naviService.turnPage(direction); // change chosen page } toggleDetailsDrawer() { this.openState = !this.openState; } toggleHighlight() { this.highlight = !this.highlight; } toggleSidebarFixation() { this.fixSidebar = !this.fixSidebar; } - private getImageFromService() { - this.isImageLoading = true; - this.imageService.getImage(this.imageToShow.ImageUrl).subscribe(data => { - this.createThingFromBlob(data, 0); - this.isImageLoading = false; - }, error => { - this.isImageLoading = false; - console.log(error); - }); - } - private getSvgFromService() { this.svgService.getSvg(this.selectedSvg.svgUrl).subscribe(data => { this.createThingFromBlob(data, 1); this.isSvgLoading = false; }, error => { this.isSvgLoading = false; console.log(error); }); } // TODO: handle correctly && display private createThingFromBlob(thing: Blob, type) { const reader = new FileReader(); reader.addEventListener('load', () => { if (type === 0 ) { this.imageToShow = reader.result; } if (type === 1 ) { this.svgToShow = reader.result; } }, false); if (thing) { reader.readAsDataURL(thing); } } } diff --git a/src/app/services/image.service.ts b/src/app/services/image.service.ts deleted file mode 100644 index afd2d68..0000000 --- a/src/app/services/image.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {EventEmitter, Injectable} from '@angular/core'; -import {HttpClient} from '@angular/common/http'; -import {Observable } from 'rxjs'; -import {map} from 'rxjs/operators'; -import {Image} from '../models/models'; - -@Injectable({ - providedIn: 'root' -}) -export class ImageService { - constructor(private http: HttpClient) { - } - - onClickedImage = new EventEmitter(); - - public getImage(imageUrl: string): Observable { - return this.http - .get(imageUrl, { responseType: 'blob' }) - .pipe(map((res: any) => res.blob())); } -} diff --git a/src/app/services/navigation-service.service.ts b/src/app/services/navigation-service.service.ts index 22897cb..957e2cd 100644 --- a/src/app/services/navigation-service.service.ts +++ b/src/app/services/navigation-service.service.ts @@ -1,348 +1,363 @@ import {EventEmitter, Injectable, OnDestroy} from '@angular/core'; import { - TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnWord, Image, TlnQueryParams, + TlnManuscript, NavigationEntity, TlnPage, TlnEntity, TlnWord, TlnQueryParams, NavTree, Svg, TlnRow } from '../models/models'; import {NietzscheSourceSeviceService} from "./nietzsche-source-sevice.service"; import {Subscription} from "rxjs/index"; import {ActivatedRoute, Params, Router} from "@angular/router"; import {QueryService} from "./query.service"; import {ExistDbSvgService, SvgService} from "./svg.service"; import {DomSanitizer} from '@angular/platform-browser'; @Injectable({ providedIn: 'root' }) export class NavigationServiceService implements OnDestroy { selectedManuscript: TlnManuscript; selectedPage: TlnPage; selectedRow: TlnRow; selectedWord: TlnWord; queryParams: TlnQueryParams; // Listening to the queries entered actively (so also if page is refreshed or a url loaded) queryParamSubscription: Subscription; constructor(private nietzscheSourceService: NietzscheSourceSeviceService, private router: Router, private sanitizer: DomSanitizer, private activatedRoute: ActivatedRoute, private queryService: QueryService, private svgService: ExistDbSvgService) { this.queryParams = new TlnQueryParams('', '', '', '', false, 0); // Listening to the queries entered actively (so also if page is refreshed or a url loaded) this.queryParamSubscription = this.activatedRoute.queryParams.subscribe( (queryparams: Params ) => { this.queryParams = new TlnQueryParams(queryparams.man, queryparams.page, queryparams.row, queryparams.word, queryparams.navBarOpenState, queryparams.navTreeIndex ); } ); this.navTreeIndex = [ { idx: 0, isActive: true, label: 'Manuskripte', treeClass: 'Tln:Manuscript' }, { idx: 1, isActive: false, label: 'Seiten', treeClass: 'TlnPage' }/*, { idx: 2, isActive: false, label: 'Worte', treeClass: 'TlnWord' }*/ ]; } resourceOfInterest: string; // simple iri for Databrowser and rdf stuff to come resourceOfInterestChange = new EventEmitter(); selectedManuscriptChange = new EventEmitter(); selectedPageChange = new EventEmitter(); selectedRowChange = new EventEmitter(); selectedWordChange = new EventEmitter(); activeTreeData: Array; activeTreeDataChange = new EventEmitter>(); // if the active tree data changes navTreeIndex: Array; navTreeIndexChange = new EventEmitter>(); // Weather only the index changes manuscriptNavTree: Array = []; manuscriptNavTreeChange = new EventEmitter>(); // internally used pageNavTree: Array = []; pageNavTreeChange = new EventEmitter>(); // internally used wordNavTree: Array = []; /** * setActiveTreeData * Set the active tree data and emits it back to navigation list component, * param: idx:number : the index of the tree data to be displayed. */ setActiveTreeData(idx: number) { switch (idx) { case 0: // Manuscript this.activeTreeData = this.manuscriptNavTree; break; case 1: // Page this.activeTreeData = this.pageNavTree; break; } this.activeTreeDataChange.emit(this.activeTreeData); } updateRoute() { const activeUrl = this.router.url.split('?')[0]; // seems workaroundish, but easy this.router.navigate([activeUrl], { queryParams: this.queryParams }); } /** * changeActiveTreeIndex * Simply changing the active tree index for the navBar in * param: idx:number : the index of the tree which should be displayed. */ changeActiveTreeIndex(idx: number) { // setting all to false first for (const tree of this.navTreeIndex ) { tree.isActive = false; } this.navTreeIndex[idx].isActive = true; this.navTreeIndexChange.emit(this.navTreeIndex); this.setQueryParam('navTreeIndex', idx.toString() ); // also routing according to the chosen thing this.updateRoute(); } /** * createNavTreesOnInit creates the first trees if no query params are available in the url: * It ceates the manuscripNavTree and the pageNavTree of the first manuscript per default. * */ createNavTreesOnInit() { this.createManuscriptNavTree(); // create the pageNavTree with the first item of manuscriptNavTree AFTER the first TlnManuscript is in the manuscriptNavTree this.manuscriptNavTreeChange.subscribe(tree => { this.createPageNavTree(tree[0].tlnEntity.id); this.activeTreeData = tree; this.setActiveTreeData(0); this.changeActiveTreeIndex(0); }); // TODO: Change to RDF for all entry points // this.createManuscriptNavTreeFromRdf(); this.setSelectedManuscriptIfNone(); } createManuscriptNavTreeFromRdf() { // TODO: implement this further for switch to RDF data only this.queryService.getQueryfromFilename('getConvolutes.rq').subscribe(qString => { this.queryService.getData(qString, 'SELECT').subscribe(data => { console.log('convolute data: ', data); }); }); } createManuscriptNavTree() { this.nietzscheSourceService.getConvolutes().subscribe( res => { const convolutes = res.result.children; convolutes.forEach(( x, index ) => { const entity = new TlnEntity(x.id, x.api_retrieve_content, 'man', index, x.id); const man = new NavigationEntity(index, entity, ''); this.manuscriptNavTree.push(man); if (index + 1 === convolutes.length) { this.manuscriptNavTreeChange.emit(this.manuscriptNavTree); } }); } ); } + createManuscriptNavTreeFromUrl(params) { + if (params.man) { + this.createManuscriptNavTree(); + this.manuscriptNavTreeChange.subscribe(tree => { + tree.forEach(navEntity => { + if (navEntity.tlnEntity.id === params.man) { + this.setSelectedManuscript(navEntity.tlnEntity); + // resetting the a + if (params.navTreeIndex === '0') { + this.setActiveTreeData(Number(params.navTreeIndex)); + } + } + }); + }); + } + } + // If no bookId passed, pages of the first book entry will be loaded - createPageNavTree(bookId: string) { + createPageNavTree(bookId: string, pageId?: string) { this.pageNavTree = []; this.nietzscheSourceService.getPages(bookId).subscribe( res => { const pages = res.result.children; pages.forEach((x, index) => { const entity = new TlnEntity(x.id, x.api_retrieve_content, 'page', index, x.id ); // TODO: change from static 'TlnPage' to rdfs:sth const pageEntity = new NavigationEntity(index, entity, ''); this.pageNavTree.push(pageEntity); + // if there is no page param passed set the first entry as selected page + if (!pageId && index === 0) { + this.setSelectedPage(this.pageNavTree[0].tlnEntity); + } + if (pageId && x.id === pageId ) { + this.setSelectedPage(entity); + } if (index + 1 === pages.length) { this.pageNavTreeChange.emit(this.pageNavTree); this.addImagesToPageTree(); - this.setSelectedPageIfNone(); }}); }); } - createManuscriptNavTreeFromUrl(params) { - if (params.man) { - this.createManuscriptNavTree(); - this.manuscriptNavTreeChange.subscribe(tree => { - tree.forEach(navEntity => { - if (navEntity.tlnEntity.id === params.man) { - this.setSelectedManuscript(navEntity.tlnEntity); - // resetting the a - if (params.navTreeIndex === '0' ) { - this.setActiveTreeData(Number(params.navTreeIndex)); - } - }}); - }); - } - } - - createNavTreesFromUrl(params) { + createNavTreesFromUrlParams(params) { // change active this.changeActiveTreeIndex(Number(params.navTreeIndex)); this.createManuscriptNavTreeFromUrl(params); this.createPageNavTreeFromUrl(params); } setSelectedManuscript(man: TlnEntity) { this.selectedManuscript = new TlnManuscript(man); this.selectedManuscriptChange.emit(this.selectedManuscript); } setSelectedManuscriptIfNone() { if (!this.selectedManuscript) { this.manuscriptNavTreeChange.subscribe(manTree => this.setSelectedManuscript(manTree[0].tlnEntity)); } } setSelectedPage(pageData: TlnEntity ) { this.selectedPage = new TlnPage(pageData); this.addPageData(pageData.iri); } // sets the first page as selected if no selectedPage setSelectedPageIfNone() { if (!this.selectedPage) { this.pageNavTreeChange.subscribe(pageTree => this.setSelectedPage(pageTree[0].tlnEntity)); } } turnPage(modifier: number) { const newPageIndex = this.selectedPage.entity.navIndex + modifier; this.setSelectedPage(this.pageNavTree[newPageIndex].tlnEntity); } /** * createPageNavTreeFromUrl: Loads all navigation navigation trees according to the given queryParams passed * param: manId:number: the index of the chosen manuscript to be displayed. * */ createPageNavTreeFromUrl(params) { if (params.man) { - this.createPageNavTree(params.man); - this.pageNavTreeChange.subscribe(tree => { - tree.forEach( navEntity => { - if (navEntity.tlnEntity.id === params.page ) { - // TODO: outsource creation of selectedPage into own method and get also its arrayIndex in pageNavTree via method. - this.setSelectedPage(navEntity.tlnEntity); - } - // if the active tree === '1' we have to set pageNavTree as active tree - if (params.navTreeIndex === '1' ) { - // set pageTree as active tree - this.setActiveTreeData(Number(params.navTreeIndex)); - } - }); - }); + this.createPageNavTree(params.man, params.page); + // if the active tree === '1' we have to set pageNavTree as active tree + if (params.navTreeIndex === '1' ) { + // update active tree data each time the pageNavTree changes + this.pageNavTreeChange.subscribe(tree => this.setActiveTreeData(Number(params.navTreeIndex))); + } } } switchTreeIfPageView(activeTab: string) { if ( activeTab === 'page') { this.setActiveTreeData(1); this.changeActiveTreeIndex(1); this.setSelectedPageIfNone(); } } onSelectedItem(item: NavigationEntity) { const activeTab = this.activatedRoute.snapshot['_urlSegment'].children.primary.segments[1].path; switch (item.tlnEntity.type) { case 'man': { // set the new url with the chose man parameter this.createPageNavTree(item.tlnEntity.id); // If the active tab is the page view we switch automatically to page tree in navigation this.switchTreeIfPageView(activeTab); this.setSelectedManuscript(item.tlnEntity); this.setQueryParam('man', this.selectedManuscript.entity.id ); // also routing according to the chosen thing break; } case 'page': { this.setSelectedPage(item.tlnEntity); this.selectedPageChange.emit(this.selectedPage); this.setQueryParam('page', this.selectedPage.entity.id ); // also routing according to the chosen thing break; } case 'word': { this.selectedWord = new TlnWord(item.tlnEntity); this.selectedWordChange.emit(this.selectedWord); // this.navTreeIndexChange.emit(this.navTreeIndex); this.setQueryParam('word', this.selectedWord.entity.id ); // also routing according to the chosen thing break; } default: { console.log('unknown item.tlnEntity.type: ', item.tlnEntity.type); } } this.updateRoute(); } setResourceOfInterest(res: string) { this.resourceOfInterest = res; this.resourceOfInterestChange.emit(res); } addImagesToPageTree() { for (let i = 0; i < this.pageNavTree.length; i++) { this.getThumb(this.pageNavTree[i].tlnEntity.iri, i); } } // gets the thumbnail and updates pageNavTree getThumb(pageIri: string, index) { this.nietzscheSourceService.getPageData(pageIri).subscribe(data => { this.nietzscheSourceService.getImageFromUrl(data.result.metadata.download_version.thumb).subscribe(img => { const reader = new FileReader(); reader.addEventListener('load', () => { if ( this.pageNavTree[index] ) { this.pageNavTree[index].img = reader.result; - } else {console.log('noooooo'); } + } }, false); if (img) { reader.readAsDataURL(img); } this.pageNavTreeChange.emit(this.pageNavTree); }); }); } + getFullImage(pageIri: string) { + this.nietzscheSourceService.getPageData(pageIri).subscribe(data => { + this.nietzscheSourceService.getImageFromUrl(data.result.metadata.download_version.medium).subscribe(img => { + const reader = new FileReader(); + reader.addEventListener('load', () => { + if ( this.selectedPage ) { + this.selectedPage.image = reader.result; + } + }, false); + if (img) { reader.readAsDataURL(img); } + this.selectedPageChange.emit(this.selectedPage); + }); + }); + } + addPageData(pageIri: string) { this.nietzscheSourceService.getPageData(pageIri).subscribe(data => { const url = this.svgService.getSvgUrl(data.result.metadata.related_resource_identifier); // TODO: Ŝetting the selected page only only onSelectItem? this.selectedPage.svg = new Svg(data.result.metadata.related_resource_identifier, url); - this.selectedPageChange.emit(this.selectedPage); }); + this.getFullImage(pageIri); + this.selectedPageChange.emit(this.selectedPage); } // sets queryParams: to the queryParam object setQueryParam(type: string, value: string) { this.queryParams[type] = value; // this.queryParamsChange.emit(this.queryParams); } ngOnDestroy() { // unsubscribe to subscriptions if component change so there is no memory leak this.queryParamSubscription.unsubscribe(); } } diff --git a/src/app/services/nietzsche-source-sevice.service.ts b/src/app/services/nietzsche-source-sevice.service.ts index c64d468..64a0b26 100644 --- a/src/app/services/nietzsche-source-sevice.service.ts +++ b/src/app/services/nietzsche-source-sevice.service.ts @@ -1,46 +1,36 @@ import { Injectable } from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {map} from "rxjs/internal/operators"; -import {Image} from "../models/models"; import {Observable} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class NietzscheSourceSeviceService { baseApi = 'http://www.nietzschesource.org//DFGAapi'; bookBaseUrl = 'http://www.nietzschesource.org//DFGAapi//api//book//'; pageBaseUrl = 'http://www.nietzschesource.org/DFGAapi/api/page/'; // thumb = this.pageUrl.download_version.thumb; constructor( private http: HttpClient ) { } public getConvolutes() { return this.http.get(this.baseApi); } public getPages(bookId) { const bookUrl = `${this.bookBaseUrl}${bookId}`; // 'http://www.nietzschesource.org//DFGAapi//api//book//N-VI-1'; return this.http.get(bookUrl); } public getPageData(pageIri) { return this.http.get(pageIri); // 'http://www.nietzschesource.org/DFGAapi/api/page/N-VI-1,d1'; } - public getImageData(pageId: string) { - const image = new Image(); - this.getPageData(pageId).subscribe(page => { - image.id = page.metadata.title.identifier; - image.imageUrl = page.metadata.download_version.medium; - image.thumbnailUrl = page.metadata.download_version.thumb; - }); - return image.thumbnailUrl; - } getImageFromUrl(imageUrl: string): Observable { return this.http.get(imageUrl, { responseType: 'blob' }); } } diff --git a/src/app/textfield-component/textfield.component.ts b/src/app/textfield-component/textfield.component.ts index 8a1f4b4..f70f5ca 100644 --- a/src/app/textfield-component/textfield.component.ts +++ b/src/app/textfield-component/textfield.component.ts @@ -1,107 +1,107 @@ import { Component, Input, OnInit } from '@angular/core'; -import {Image, PositionalEntity, Svg} from '../models/models'; +import { PositionalEntity, Svg} from '../models/models'; import wordData from '../../assets/W_II_1_page131.json'; import { PageViewService } from '../services/field-interaction.service'; import { OptionService } from '../services/options.service'; @Component({ selector: 'text-field', templateUrl: './textfield.component.html', styleUrls: ['./textfield.component.css'] }) /** * Textfield component */ export class TextFieldComponent implements OnInit { @Input() image; @Input() svg; @Input() text_field; svg_width: number = 600; svg_height: number = 800; svg_left: number = 0; svg_top: number = 0; viewBox: string = ''; words: PositionalEntity[]; clickedWord?: PositionalEntity; hoveredWord?: PositionalEntity; offHoveredWord?: PositionalEntity; // Options fadeOut = false; markupAll = false; constructor( private wordservice: PageViewService, private optionservice: OptionService ) { this.words = wordData; } ngOnInit() { if (this.text_field != null) { this.svg_left = this.text_field.left; this.svg_top = this.text_field.top; this.svg_width = this.text_field.width; this.svg_height = this.text_field.height; } else if (this.image != null) { this.svg_width = this.image.width; this.svg_height = this.image.height; } this.viewBox = this.svg_left + ' ' + this.svg_top + ' ' + this.svg_width + ' ' + this.svg_height; // console.log(this.viewBox) this.wordservice.onClickedWord.subscribe( (changedWord: PositionalEntity ) => this.clickedWord = changedWord ); this.wordservice.onHoveredWord.subscribe( (changedWord: PositionalEntity ) => this.hoveredWord = changedWord ); this.wordservice.offHoveredWord.subscribe( (changedWord: PositionalEntity ) => { this.offHoveredWord = changedWord; } ); this.optionservice.fadeOutchange.subscribe( fadeout => { this.fadeOut = fadeout; console.log('fadeout now: ' + this.fadeOut); } ); this.optionservice.markupAll.subscribe( markup => { this.markupAll = markup; console.log('marking up all words in transcription: ' + this.markupAll); } ); } /** * This method checks all Words which classes should applied to a word or not. If a class is applicable, the method returns true. * * @param mode The mode of styling: 0 === howered word itself; 1 === words with the same row as the howered word. * @param word The word * @returns true or false for each of the words. */ private assignClass(mode: number, word: PositionalEntity) { if (typeof this.hoveredWord !== 'undefined' && this.hoveredWord !== null && this.hoveredWord !== this.offHoveredWord ) { switch (mode) { case 0: if (word === this.hoveredWord && word !== this.offHoveredWord) { return true; } break; case 1: if (word.hasOwnProperty('row')) { if (word.row === this.hoveredWord.row && word.id !== this.hoveredWord.id) { // console.log(word.text + ' has also row == ' + word.row); return true; } } break; } } } private assignTextClass(word: PositionalEntity) { if (this.fadeOut) { if ( word === this.hoveredWord) { return false; } else { return true; } } } }