Ghost/ghost/admin/app/components/gh-member-avatar.js
Kevin Ansfield b5d560750f Refactored <GhMemberAvatar> to glimmer component
no issue

- cleaned up property access in template to differentiate between passed-in args and component-defined properties
- tidied up logic in `backgroundStyle` and `initials` getters
2020-02-27 12:33:33 +00:00

35 lines
1007 B
JavaScript

import Component from '@glimmer/component';
import {htmlSafe} from '@ember/string';
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 + '%)';
};
export default class GhMemberAvatarComponent extends Component {
get memberName() {
let {member} = this.args;
return member.name || member.email || 'NM';
}
get backgroundStyle() {
let color = stringToHslColor(this.memberName, 55, 55);
return htmlSafe(`background-color: ${color}`);
}
get initials() {
if (this.memberName === 'NM') {
return 'NM';
}
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();
}
}