-
Notifications
You must be signed in to change notification settings - Fork 28
/
demo.component.ts
104 lines (96 loc) · 2.5 KB
/
demo.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { HighlightTag } from '../src/';
@Component({
selector: 'mwl-demo-app',
template: `
<div mwlTextInputHighlightContainer>
<textarea
mwlTextInputElement
rows="6"
class="form-control"
[(ngModel)]="text"
#textarea
(input)="addTags()">
</textarea>
<mwl-text-input-highlight
[tags]="tags"
[tagCssClass]="'bg-blue'"
[textInputElement]="textarea"
(tagMouseEnter)="addDarkClass($event.target)"
(tagMouseLeave)="removeDarkClass($event.target)"
(tagClick)="tagClicked = $event.tag">
</mwl-text-input-highlight>
</div>
<br>
<div class="alert alert-info" *ngIf="tagClicked">
Tag clicked! {{ tagClicked.data }}
</div>
`,
styles: [
`
.bg-blue {
background-color: lightblue;
}
.bg-pink {
background-color: lightcoral;
}
.bg-blue-dark {
background-color: #86c5da;
}
.bg-pink-dark {
background-color: #eb5252;
}
textarea {
width: 500px;
}
`
],
encapsulation: ViewEncapsulation.None
})
export class DemoComponent implements OnInit {
text: string = 'Hello @mattlewis92 how are you today?\n\nLook I have a #different background color!\n\n@angular is pretty awesome!';
tags: HighlightTag[] = [];
tagClicked: HighlightTag;
ngOnInit(): void {
this.addTags();
}
addTags() {
this.tags = [];
const matchMentions = /(@\w+) ?/g;
let mention;
// tslint:disable-next-line
while ((mention = matchMentions.exec(this.text))) {
this.tags.push({
indices: {
start: mention.index,
end: mention.index + mention[1].length
},
data: mention[1]
});
}
const matchHashtags = /(#\w+) ?/g;
let hashtag;
// tslint:disable-next-line
while ((hashtag = matchHashtags.exec(this.text))) {
this.tags.push({
indices: {
start: hashtag.index,
end: hashtag.index + hashtag[1].length
},
cssClass: 'bg-pink',
data: hashtag[1]
});
}
}
addDarkClass(elm: HTMLElement) {
if (elm.classList.contains('bg-blue')) {
elm.classList.add('bg-blue-dark');
} else if (elm.classList.contains('bg-pink')) {
elm.classList.add('bg-pink-dark');
}
}
removeDarkClass(elm: HTMLElement) {
elm.classList.remove('bg-blue-dark');
elm.classList.remove('bg-pink-dark');
}
}