Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F88780251
textfield.component.ts
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Sun, Oct 20, 15:48
Size
3 KB
Mime Type
text/x-java
Expires
Tue, Oct 22, 15:48 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
21819693
Attached To
rSVGTESTAPP svg-test-app
textfield.component.ts
View Options
import { Component, Input, OnInit } from '@angular/core';
import {Image, 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; }
}
}
}
Event Timeline
Log In to Comment