-
Notifications
You must be signed in to change notification settings - Fork 78
/
lrndesign-avatar.js
93 lines (92 loc) · 2.1 KB
/
lrndesign-avatar.js
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
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { SimpleColors } from "@lrnwebcomponents/simple-colors/simple-colors.js";
/**
* `lrndesign-avatar`
* `Visualize a user account eitehr with an image, a label, or as abstract art.`
* @demo demo/index.html
*/
class LrndesignAvatar extends PolymerElement {
constructor() {
super();
import("@lrnwebcomponents/paper-avatar/paper-avatar.js");
}
static get template() {
return html`
<style>
:host {
display: block;
}
paper-avatar {
--paper-avatar-width: var(--lrndesign-avatar-width, 40px);
--paper-avatar-height: var(--lrndesign-avatar-height, 40px);
}
</style>
<paper-avatar
label="[[label]]"
src="[[src]]"
two-chars="[[twoChars]]"
style$="background-color:[[hexColor]];"
jdenticon="[[jdenticon]]"
></paper-avatar>
`;
}
static get tag() {
return "lrndesign-avatar";
}
_getHexColor(color) {
let name = color.replace("-text", "");
let tmp = new SimpleColors();
if (tmp.colors[name]) {
return tmp.colors[name][6];
}
return "#000000";
}
static get properties() {
return {
/**
* text to use for avatar
*/
label: {
type: String,
value: "lrndesign-avatar"
},
/**
* link to an image, optional
*/
src: {
type: String
},
/**
* Mode for presenting 1st two letters
*/
twoChars: {
type: Boolean,
value: false
},
/**
* Class for the color
*/
hexColor: {
type: String,
computed: "_getHexColor(color)"
},
/**
* Color class work to apply
*/
color: {
type: String,
value: "blue",
reflectToAttribute: true
},
/**
* Form abstract art from hash of label
*/
jdenticon: {
type: Boolean,
value: false
}
};
}
}
window.customElements.define(LrndesignAvatar.tag, LrndesignAvatar);
export { LrndesignAvatar };