-
Notifications
You must be signed in to change notification settings - Fork 0
/
focal-point.js
77 lines (68 loc) · 1.75 KB
/
focal-point.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
/**
* <focal-point>
* @file Custom Elements v1 to mimick highlighter text
* @author: Rocco Augusto <[email protected]>
**/
class FocalPoint extends HTMLElement {
/**
* Create <focal-point>.
* @property {string} color - Valid CSS color code/hex/rgb/rgba/hsl/hsla value. Predefined values to mimick generic highlighters are `yellow`, `green`, `blue`, `orange`, `pink`, and `purple`.
*/
constructor() {
super();
this._color = 'yellow';
this._palette = {
yellow: '#f3f315',
green: '#00ff66',
blue: '#67c8ff',
pink: '#ff6ec7',
orange: '#ff9933',
purple: '#9370db'
};
}
/**
* Observe attributes
*/
static get observedAttributes() {
return ['color'];
}
/**
* Get the color value.
*/
get color() {
return this._color;
}
/**
* Set the color value.
* @return {string} color value.
*/
set color(color) {
this.setAttrbute('color', color);
}
/**
* Event that fires when attributes change
*/
attributeChangedCallback(name, oldValue, newValue) {
if(!newValue) newValue = 'yellow';
if(oldValue !== newValue) {
this._color = newValue;
this.applyFocalPoint();
}
}
/**
* Custom element loaded
*/
connectedCallback() {
this.applyFocalPoint();
}
/**
* Render custom element
**/
applyFocalPoint() {
this.style.display = 'inline-block';
this.style.backgroundColor = this._palette.hasOwnProperty(this._color) ?
this._palette[this._color] :
this._color;
}
}
customElements.define('focal-point', FocalPoint);