Page MenuHomec4science
Files F65729879

markup-text-component.component.ts
No OneTemporary
Actions

File Metadata

Created
Wed, Jun 5, 20:16

markup-text-component.component.ts
View Options

import {Component, OnInit, Input, OnChanges} from '@angular/core';
@Component({
selector: 'app-markup-text-component',
templateUrl: './markup-text-component.component.html',
styleUrls: ['./markup-text-component.component.scss']
})
export class MarkupTextComponentComponent implements OnChanges {
@Input() markupData;
// ranges: Array<Range>;
word:string = 'Schifffahrtskapitän';
ranges: Array<Array<any>> = [
[0, 3, "font-weight: bold;"],
[5, 11, "font-style: italic;"],
[5, 5, "text-decoration: underline;" ],
[7, 7, "color: blue;"],
[8, 10, "text-decoration: line-through;"],
[10, 13, "font-weight: bold;"]];
//indexList: Array<number> = [0, 3, 5, 7, 8, 10, 11, 13]; // distinct list of all indices
indexList: Array<number> = [0, 3, 5, 6, 7, 8, 10, 11, 13]; // distinct list of all indices
singleEndings: Array<number> = [3, 13]; // ending which are NOT a start of a new range!
noRangeExceptions: Array<number> = [ 5, 7 , 10]; // distinct list of segments with start === any end
segments: Array<any> = [];
constructor() {
}
ngOnChanges() {
this.createSegments();
}
// this method is only creating segments which are styled differently
private createSegments() {
let c = 1;
let lastIndex: number = null; // sometimes this has been already processed.
for (let i in this.indexList) {
if (c < this.indexList.length) {
lastIndex = this.createStyleSegments(this.indexList[i[0]], this.indexList[c], lastIndex);
c += 1;
}
}
console.log('this.segments: ', this.segments);
}
private createStyleSegments(startIndex, nextIndex, lastEndindex? ) {
// we get the styles for each startIndex and define the range/endIndex where a style is ending
console.log('lastEndindex ', lastEndindex, 'startIndex: ', startIndex, 'nextIndex: ', nextIndex);
// if an index is a singleEnding (ending , where no other style is starting) or is already set as a endpoint in this.segments,
// then we need to start at the following character by creating a new startindex = startIndex + 1 for this.
if (lastEndindex && startIndex === lastEndindex ) {
startIndex = lastEndindex + 1;
}
if (this.noRangeExceptions.indexOf(nextIndex) > -1) { // if the nextIndex is part of norangeexceptions
nextIndex = nextIndex - 1;
}
if (this.noRangeExceptions.indexOf(startIndex) > -1) { // if the startIndex is part of norangeexceptions
nextIndex = startIndex;
}
console.log('new indices defined: ', startIndex, ', ', nextIndex);
const styles = this.getStyles(startIndex);
this.segments.push([startIndex, nextIndex, styles ]);
return nextIndex;
}
private getStyles(startIndex) {
// HENCE the styles of a segment are unique for every character within that segment we only need to get the styles of the startindex
// and the styles apply to the whole segment correctly. No endindex needed.
const styles: Array<string> = [];
for (const i of this.ranges) {
// console.log('i[0]: ', i[0], ' <= ', startIndex, '<= i[1]: ', i[1] );
if (i[0] <= startIndex && startIndex <= i[1] && styles.indexOf(i[2]) === -1) {
// console.log(i[2], ' -> pushed to styles');
styles.push(i[2]);
}
}
return styles;
}
}
export interface Range { startindex: number;
endindex: number;
cssStyle: string; }

Event Timeline

c4science · Help