-
Notifications
You must be signed in to change notification settings - Fork 0
/
MMM-Searchlight.js
61 lines (45 loc) · 1.36 KB
/
MMM-Searchlight.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
/* Magic Mirror
* Module: MMM-Searchlight
*
* By Mykle1
* MIT Licensed.
*/
Module.register("MMM-Searchlight", {
// Default module config.
defaults: {
name: "",
font: "",
fontSize: "",
fontWeight: "",
fontSpacing: ""
},
start: function() {
Log.info("Starting module: " + this.name);
},
getStyles: function() {
return ["MMM-Searchlight.css"];
},
getDom: function() {
var wrapper = document.createElement("div");
wrapper.innerHTML= `<svg viewBox="250 0 700 300">
<defs>
<clipPath id="text-1">
<text id="Mask" font-family=${this.config.font} font-size=${this.config.fontSize} font-weight=${this.config.fontWeight} letter-spacing=${this.config.fontSpacing} fill="#121212">
<tspan x="" y="195">${this.config.name}</tspan>
</text>
</clipPath>
</defs>
<g>
<text id="Mask" font-family=${this.config.font} font-size=${this.config.fontSize} font-weight=${this.config.fontWeight} letter-spacing=${this.config.fontSpacing} fill="#121212">
<tspan x="0" y="195">${this.config.name}</tspan>
</text>
</text>
</g>
//clip-path="url(#text-1)"
<g clip-path="url(#text-1)">
<polygon class="light" fill="#F8F8F8" points="91.7663783 -503.51439292 176.859739 -3.51439292 234.191437 922.485607 -154.808563 887.785896"></polygon>
</g>
</svg>`;
return wrapper;
},
});