Page MenuHomec4science

page-view-component.component.ts
No OneTemporary

File Metadata

Created
Fri, Mar 29, 06:51

page-view-component.component.ts

import {Component, OnInit} from '@angular/core';
import {PositionalEntity, Svg, TlnEntity, NavigationEntity, TlnPage, TlnWord, RVPageView, TlnQueryParams} 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 {DomSanitizer, 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;
// images
selectedImage: SafeUrl; // the image selected in gallery, menue or so
// svg
selectedSvg: SafeUrl; // the svg to show
selectedSvgRV: RVPageView; // "double page" view for recto and verso
// settings for user to choose
paging: string;
alignment: string;
fixSidebar: boolean;
highlight: boolean;
queryParamSubscription: Subscription;
queryParams: TlnQueryParams;
wordSubscription: Subscription;
wordQueryParam: string;
// NavBar/Infobox
selectedWord: TlnWord;
openState: boolean;
defaultOpenState = false;
constructor(private svgService: SvgService,
private pageViewService: PageViewService,
private router: Router,
private activatedRoute: ActivatedRoute,
private naviService: NavigationServiceService,
private sanitizer: DomSanitizer ) { }
ngOnInit() {
// If url pasted or page 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.viewMode,
queryparams.navBarOpenState,
queryparams.navTreeIndex,
queryparams.manuscriptGroup);
}
);
this.activePageChange = this.naviService.selectedPageChange.subscribe( page => {
this.activePage = page;
this.selectedSvg = this.sanitizer.bypassSecurityTrustResourceUrl(page.svg); }
);
this.openState = this.defaultOpenState;
// default settings oninit
this.paging = 'double';
this.alignment = 'horizontal';
this.fixSidebar = false;
this.highlight = true;
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;
}
setViewMode(view) {
this.naviService.setQueryParamOnServiceLevel('viewMode', view);
this.naviService.updateRoute('setViewMode()');
}
}

Event Timeline