64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
|
import ngModule from '../../module';
|
||
|
|
import Component from 'core/lib/component';
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Displays colored avatar based on value.
|
||
|
|
*
|
||
|
|
* @property {*} val The value
|
||
|
|
*/
|
||
|
|
export default class Avatar extends Component {
|
||
|
|
get val() {
|
||
|
|
return this._val;
|
||
|
|
}
|
||
|
|
|
||
|
|
set val(value) {
|
||
|
|
this._val = value;
|
||
|
|
|
||
|
|
const val = value || '';
|
||
|
|
let hash = 0;
|
||
|
|
for (let i = 0; i < val.length; i++)
|
||
|
|
hash += val.charCodeAt(i);
|
||
|
|
const color = '#' + colors[hash % colors.length];
|
||
|
|
|
||
|
|
const el = this.element;
|
||
|
|
el.style.backgroundColor = color;
|
||
|
|
el.title = val;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ngModule.vnComponent('vnAvatar', {
|
||
|
|
template: require('./index.html'),
|
||
|
|
controller: Avatar,
|
||
|
|
bindings: {
|
||
|
|
val: '@?'
|
||
|
|
},
|
||
|
|
transclude: true
|
||
|
|
});
|
||
|
|
|
||
|
|
const colors = [
|
||
|
|
'e2553d', // Coral
|
||
|
|
'FFA07A', // Salmon
|
||
|
|
'FFDAB9', // Peach
|
||
|
|
'a17077', // Pink
|
||
|
|
'bf0e99', // Pink light
|
||
|
|
'52a500', // Green chartreuse
|
||
|
|
'00aeae', // Cian
|
||
|
|
'b754cf', // Purple middle
|
||
|
|
'8a69cd', // Blue lavender
|
||
|
|
'1fa8a1', // Green ocean
|
||
|
|
'DC143C', // Red crimson
|
||
|
|
'5681cf', // Blue steel
|
||
|
|
'FF1493', // Ping intense
|
||
|
|
'02ba02', // Green lime
|
||
|
|
'1E90FF', // Blue sky
|
||
|
|
'8B008B', // Purple dark
|
||
|
|
'cc7000', // Orange bright
|
||
|
|
'00b5b8', // Turquoise
|
||
|
|
'8B0000', // Red dark
|
||
|
|
'008080', // Green bluish
|
||
|
|
'2F4F4F', // Gray board
|
||
|
|
'7e7e7e', // Gray
|
||
|
|
'5d5d5d', // Gray dark
|
||
|
|
];
|