2020-02-27 15:33:33 +03:00
|
|
|
import Component from '@glimmer/component';
|
2021-05-12 14:33:36 +03:00
|
|
|
import {htmlSafe} from '@ember/template';
|
2019-01-24 22:34:32 +03:00
|
|
|
|
|
|
|
const stringToHslColor = function (str, saturation, lightness) {
|
|
|
|
var hash = 0;
|
|
|
|
for (var i = 0; i < str.length; i++) {
|
|
|
|
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
|
|
}
|
|
|
|
|
|
|
|
var h = hash % 360;
|
|
|
|
return 'hsl(' + h + ', ' + saturation + '%, ' + lightness + '%)';
|
|
|
|
};
|
|
|
|
|
2020-02-27 15:33:33 +03:00
|
|
|
export default class GhMemberAvatarComponent extends Component {
|
|
|
|
get memberName() {
|
|
|
|
let {member} = this.args;
|
2020-05-20 18:39:06 +03:00
|
|
|
|
|
|
|
// can be a proxy in a sparse array so .get is required
|
|
|
|
return member.get('name') || member.get('email') || 'NM';
|
2020-02-27 15:33:33 +03:00
|
|
|
}
|
2019-06-24 18:33:21 +03:00
|
|
|
|
2020-02-27 15:33:33 +03:00
|
|
|
get backgroundStyle() {
|
2021-02-04 20:19:39 +03:00
|
|
|
let color = stringToHslColor(this.memberName, 75, 55);
|
2020-02-27 15:33:33 +03:00
|
|
|
return htmlSafe(`background-color: ${color}`);
|
|
|
|
}
|
2019-01-24 22:34:32 +03:00
|
|
|
|
2020-02-27 15:33:33 +03:00
|
|
|
get initials() {
|
|
|
|
if (this.memberName === 'NM') {
|
|
|
|
return 'NM';
|
2019-09-12 11:33:03 +03:00
|
|
|
}
|
2019-11-28 14:30:21 +03:00
|
|
|
|
2020-02-27 15:33:33 +03:00
|
|
|
let names = this.memberName.split(' ');
|
|
|
|
let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
|
|
|
|
return intials.join('').toUpperCase();
|
|
|
|
}
|
|
|
|
}
|