-
Notifications
You must be signed in to change notification settings - Fork 4
/
letter-avatar.directive.ts
96 lines (89 loc) · 3.38 KB
/
letter-avatar.directive.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
import {Component, ElementRef, Input, OnInit, ChangeDetectionStrategy, OnChanges} from '@angular/core';
@Component({
selector: 'avatar',
template: `
<div *ngIf="props" [style.background-color]="props.background" [style.width] = "props.size" [style.line-height]='props.lineheight' [style.height] = 'props.size' [style.font-size] = 'props.fontSize' [style.border] = 'props.border' [style.border-radius] = 'props.borderradius' [style.text-align] ="props.textalign">
<div [style.color]='fontColor'>{{props.letter}}</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LetterAvatarDirective implements OnInit, OnChanges {
@Input('avatardata') avatarData: any;
letterSrc: string;
background: string = 'red';
fontSize: number = 49;
padding: number = 28;
letter: string = "?";
size: number = 100;
fontColor: string = '#FFFFFF';
border: string;
props: Object = null;
private _el: HTMLElement;
constructor(el: ElementRef) {
this._el = el.nativeElement;
}
test() {
this.generateLetter();
}
generateLetter() {
if (!this.avatarData) {
throw Error("LetterAvatarDirective configdata not provides");
}
if (!this.avatarData.text) {
this.avatarData.text = '?';
}
var size = this.avatarData && this.avatarData.size ? this.avatarData.size : 100;
this.fontColor = this.avatarData.fontColor ? this.avatarData.fontColor : "#FFFFFF";
var isSquare = this.avatarData && this.avatarData.isSquare ? true : false;
var border = this.avatarData && this.avatarData.border ? this.avatarData.border : "1px solid #d3d3d3";
var background = this.avatarData && this.avatarData.background ? this.avatarData.background : null;
var text = this.avatarData && this.avatarData.text ? this.avatarData.text : null;
this.background = background;
var textArray = text.split(' ');
var letter = textArray[0].substr(0, 1) + '' + (textArray.length > 1 ? textArray[1].substr(0, 1) : '');
letter = letter.toUpperCase();
this.fontSize = (39 * size) / 100;
this.padding = (28 * size) / 100;
this.letter = letter;
this.size = size;
this.props = new Object();
this.props['size'] = size+'px';
this.props['lineheight'] = this.size + 'px';
this.props['letter'] = letter;
this.props['fontSize'] = this.fontSize+ 'px';
if (isSquare) {
this.props['borderradius'] = '0%';
} else {
this.props['borderradius'] = '50%';
}
this.props['textalign'] = 'center';
this.props['border'] = border;
this.props['background'] = background;
if (this.avatarData.fixedColor && !background) {
this.props['background'] = background || this.colorize(letter);
} else {
this.props['background'] = background || this.getRandomColor();
}
return true;
};
getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
colorize(str) {
for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
var color = Math.floor(Math.abs((Math.sin(hash) * 10000) % 1 * 16777216)).toString(16);
return '#' + Array(6 - color.length + 1).join('0') + color;
}
ngOnInit() {
this.generateLetter();
}
ngOnChanges(...args: any[]) {
this.generateLetter();
}
}