Page MenuHomec4science
Files F61107578

page-view-component.component.ts
No OneTemporary
Actions

File Metadata

Created
Sat, May 4, 14:22

page-view-component.component.ts
View Options

import {Component, OnInit} from '@angular/core';
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: 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 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.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 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);
}
}
}

Event Timeline

c4science · Help