Page MenuHomec4science
Files F61058146

textfield.component.ts
No OneTemporary
Actions

File Metadata

Created
Sat, May 4, 06:40

textfield.component.ts
View Options

import { Component, Input, OnInit } from '@angular/core';
import {PositionalEntity, Svg, TlnPage} 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';
import {NavigationServiceService} from '../services/navigation-service.service';
import {Subscription} from 'rxjs';
@Component({
selector: 'text-field',
templateUrl: './textfield.component.html',
styleUrls: ['./textfield.component.css']
})
/**
* Textfield component
*/
export class TextFieldComponent implements OnInit {
imageSpec = {height: 973.91998, width: 2038.5601 };
@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,
private naviService: NavigationServiceService) {
this.words = wordData;
}
ngOnInit() {
console.log('this.image', this.image);
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.imageSpec != null) {
this.svg_width = this.imageSpec.width;
this.svg_height = this.imageSpec.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; }
}
}
}

Event Timeline

c4science · Help