Page MenuHomec4science
Files F62247278

textfield.component.ts
No OneTemporary
Actions

File Metadata

Created
Sat, May 11, 22:19

textfield.component.ts
View Options

import { Component, Input, OnInit } from '@angular/core';
import { Word } from '../models/models';
import wordData from '../../assets/W_II_1_page131.json';
import { WordService } 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() text_field;
svg_width: number = 600;
svg_height: number = 800;
svg_left: number = 0;
svg_top: number = 0;
viewBox: string = '';
words: Word[];
clickedWord?: Word;
hoveredWord?: Word;
offHoveredWord?: Word;
// Options
fadeOut = false;
markupAll = false;
constructor( private wordservice: WordService, 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: Word ) => this.clickedWord = changedWord
);
this.wordservice.onHoveredWord.subscribe(
(changedWord: Word ) => this.hoveredWord = changedWord
);
this.wordservice.offHoveredWord.subscribe(
(changedWord: Word ) => { 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 howerred word.
* @returns true or false for each of the words.
*/
private assignClass(mode: number, word: Word) {
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: Word) {
if (this.fadeOut) {
if ( word === this.hoveredWord) { return false;
} else { return true; }
}
}
}

Event Timeline

c4science · Help