-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
202 lines (200 loc) · 15.4 KB
/
index.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
// src/wc-social-link.js
var WCSocialLink = class extends HTMLElement {
static get observedAttributes() {
return ["network", "handle", "href"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (!this.__initialized) {
return;
}
if (oldValue !== newValue) {
this[name] = newValue;
}
}
get network() {
return this.getAttribute("network");
}
set network(value) {
this.setAttribute("network", value);
this.setNetwork();
}
get handle() {
return this.getAttribute("handle");
}
set handle(value) {
this.setAttribute("handle", value);
this.setHandle();
}
get href() {
return this.getAttribute("href");
}
set href(value) {
this.setAttribute("href", value);
this.setHref();
}
constructor() {
super();
this.__initialized = false;
this.attachShadow({mode: "open"});
this.__svgs = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.__svgs.style.display = "none";
this.__svgs.innerHTML = WCSocialLink.svgs();
this.shadowRoot.appendChild(this.__svgs);
this.__template = document.createElement("template");
this.__template.innerHTML = WCSocialLink.template();
this.shadowRoot.appendChild(this.__template.content.cloneNode(true));
this.__networks = WCSocialLink.networks();
this.__use = this.shadowRoot.querySelector("use");
}
async connectedCallback() {
this.setAttribute("role", "link");
if (this.hasAttribute("network")) {
this.setNetwork();
}
if (this.hasAttribute("handle")) {
this.setHandle();
}
if (this.hasAttribute("href")) {
this.setHref();
}
this.__initialized = true;
}
setNetwork() {
const network = this.getAttribute("network");
this.__use.setAttribute("href", `#${network}`);
const label = `${this.__networks[network].label} Link`;
this.setAttribute("aria-label", label);
}
setHandle() {
const handle = this.getAttribute("handle");
const network = this.getAttribute("network");
if (!this.hasAttribute("href")) {
const href = `${this.__networks[network].href}${handle}`;
this.shadowRoot.querySelector("a").href = href;
}
}
setHref() {
const href = this.getAttribute("href");
this.shadowRoot.querySelector("a").href = href;
}
static template() {
return `
<style>
:host {
width: var(--width, 32px);
height: var(--height, 32px);
stroke: var(--color, black);
fill: var(--color, black);
}
a {
width: var(--width, 32px);
height: var(--height, 32px);
}
svg {
width: var(--width, 32px);
height: var(--height, 32px);
}
</style>
<a role="none" aria-label="N/A">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
<use />
</svg></a>`;
}
static networks() {
return {
devto: {
href: "https://dev.to/",
label: "Dev.to Profile"
},
email: {
href: "mailto:",
label: "Email Address"
},
github: {
href: "https://github.com/",
label: "GitHub Profile"
},
gitlab: {
href: "https://gitlab.com/",
label: "GitLab Profile"
},
linkedin: {
href: "https://linkedin.com/in/",
label: "LinkedIn Profile"
},
rss: {
href: "https://",
label: "RSS Feed"
},
stackoverflow: {
href: "https://stackoverflow.com/u/",
label: "StackOverflow Profile"
},
twitch: {
href: "https://twitch.tv/",
label: "Twitch Channel"
},
twitter: {
href: "https://twitter.com/",
label: "Twitter Profile"
},
instagram: {
href: "https://instagram.com/",
label: "Instagram Profile"
},
reddit: {
href: "https://reddit.com/user/",
label: "Reddit Profile"
}
};
}
static svgs() {
return `
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 512 512">
<symbol id="devto" stroke="inherit" fill="inherit">
<path d="m137.28 201.47c-4.4343-3.3143-8.88-4.9714-13.314-4.9714h-19.931v119.39h19.943c4.4343 0 8.88-1.6572 13.314-4.9714 4.4343-3.3143 6.6514-8.2857 6.6514-14.926v-79.6c-0.0114-6.6286-2.24-11.611-6.6629-14.926zm324.55-201.47h-411.66c-27.657 0-50.103 22.389-50.171 50.057v411.89c0.068561 27.669 22.514 50.057 50.171 50.057h411.66c27.669 0 50.103-22.389 50.171-50.057v-411.89c-0.06857-27.669-22.514-50.057-50.171-50.057zm-285.6 296.22c0 21.497-13.269 54.069-55.269 54h-53.029v-189.1h54.149c40.503 0 54.126 32.526 54.137 54.034zm115.06-101.33h-60.891v43.909h37.223v33.794h-37.223v43.897h60.903v33.794h-71.063c-12.754 0.33142-23.36-9.7486-23.68-22.503v-142.98c-0.30857-12.743 9.7829-23.326 22.526-23.646h72.217zm118.45 131.76c-15.086 35.143-42.114 28.149-54.217 0l-44.034-165.49h37.223l33.954 129.97 33.794-129.97h37.234z"/>
</symbol>
<symbol id="email" stroke="inherit" fill="inherit">
<path d="m27.688 86c-7.597 0-14.459 3.046-19.452 7.991l220.08 203.15c7.2636 7.2435 17.77 11.329 28.004 11.329 10.238 0 20.06-4.0684 27.324-11.317l218.5-204.64c-4.81-4.063-11.03-6.51-17.84-6.51h-456.62zm483.49 21.05-170.13 159.2 170.95 129.43v-281.86c0-2.3358-0.28754-4.6013-0.82227-6.7663zm-510.85 2.45c-0.21607 1.41-0.33008 2.85-0.33008 4.32v284.36c0 2.272 0.27447 4.4765 0.78125 6.5877l169.68-138.05-170.13-157.22zm182.03 168.21-173.39 141c4.919 4.53 11.485 7.29 18.718 7.29h456.62c9.8291 0 18.423-5.0989 23.334-12.814l-178.88-135.44-27.307 25.552c-11.332 13.579-28.066 21.421-45.703 21.421-17.621 0-34.34-7.8299-45.672-21.388l-27.727-25.623z"/>
</symbol>
<symbol id="github" stroke="inherit" fill="inherit">
<path d="m191.09 450.54 0.038 51.308c0.0174 5.2738-8.2716 11.394-14.932 9.4937-106.11-34.72-176.2-135.21-176.2-249.25 0.0024038-144.76 114.62-262.09 256-262.09 141.38 0.00000224 256 117.33 256 262.09 0 114.4-72.48 215.58-179.11 249.91-8.7327 0.004-12.047-5.4884-13.713-10.146l-0.027-82.973c-1.0138-18.607-5.7645-30.524-16.59-40.616 100.54-5.7331 115.91-81.112 116.35-129.37-4.2367-44.051-12.277-49.482-27.294-70.285 8.0585-23.317 7.0901-45.794-2.5868-69.569-2.3917-0.32866-9.3944 0.00048-12.272 0.32091-22.482 2.2876-40.34 14.718-57.055 26.784-20.618-6.3548-42.542-8.837-65.043-8.837-23.323 0-44.306 2.7048-64.375 8.9208-9.4726-6.736-38.412-25.823-60.798-27.42-3.5429-0.0193-7.0824 0.44942-10.467 1.2109-9.1852 21.701-8.5025 46.121-1.8527 69.69-14.902 13.724-26.67 36.53-26.653 69.302 2.1542 58.86 19.868 121.9 117.19 129.18-11.208 11.55-13.649 19.692-15.651 34.838-9.7797 4.797-22.197 7.3485-31.2 7.657-29.797-1.5381-44.638-32.393-49.418-37.831-18.962-22.55-41.431-19.758-44.618-14.682 0 0-1.2833 5.0463 4.2646 8.9454 10.994 7.7268 15.382 12.706 23.355 21.506 10.446 16.676 6.9051 26.827 27.62 42.416 24.716 20.314 67.552 9.8787 68.995 9.5195"/>
</symbol>
<symbol id="gitlab" stroke="inherit" fill="inherit">
<path d="m162.22 201.55 93.85 289.45 93.8-289.45z"/>
<path d="m416.11 21.965c3.9777-0.000001 8.0162 3.737 11.048 10.535l54.893 169.06-132.18 0.56049 55.075-169.62c3.0297-6.778 7.1949-10.535 11.166-10.535z"/>
<path d="m95.518 20c4.3607-0.000002 8.55 4.4832 11.68 12.499l55.021 169.45-132.13-0.393 54.892-169.06c3.131-8.037 6.168-12.5 10.535-12.5z"/>
<path d="m512 293.76c-1.2952 6.1702-3.5824 11.692-6.638 16.018-83.12 60.37-166.2 120.81-249.29 181.22l225.98-289.44c9.9767 30.736 19.962 61.47 29.947 92.203z"/>
<path d="m30.09 201.56 225.98 289.44c-83.26-60.46-166.39-121.1-249.69-181.51-2.897-4.17-5.09-9.43-6.38-15.29 10.036-30.88 20.063-61.76 30.09-92.64z"/>
</symbol>
<symbol id="linkedin" stroke="inherit" fill="inherit">
<path d="m35.356 0c-19.586 0-35.356 15.768-35.356 35.354l0.000050097 441.28c0 19.6 15.77 35.37 35.356 35.37h441.28c19.59 0 35.36-15.77 35.36-35.36v-441.28c0-19.587-15.77-35.355-35.36-35.355h-441.28zm76.994 66.215a48.017 48.017 0 0 1 48.01 48.015 48.017 48.017 0 0 1 -48.01 48.02 48.017 48.017 0 0 1 -48.018 -48.02 48.017 48.017 0 0 1 48.018 -48.015zm238.88 115.26c63.233 0.35068 85.566 49.256 87.51 86.077v170.04h-76.899v-142.36c0.90175-31.351-16.762-41.531-39.757-41.821-23.836-0.3106-44.617 11.783-44.907 42.032v142.21l-5.3604 0.01-70.837 0.01v-249h70.837l-0.02 37.934c6.2621-24.979 45.198-45.118 79.434-45.118v-0.01zm-277.85 7.1339h76.919v248.98h-76.919v-248.98z"/>
</symbol>
<symbol id="rss" stroke ="inherit" fill="inherit">
<path d="m40.168 114.31-0.001-82.286c238.59 10.409 429.57 201.45 439.94 440l-82.239-0.0116c-10.24-193.17-164.51-347.44-357.7-357.7zm-0.06607 144.06c115.25 6.3973 207.25 98.42 213.62 213.65l73.898 0.003c-9.15-154.83-132.67-278.36-287.52-287.54zm116.75 155.12a57.924 57.92 0 0 1 -57.924 57.92 57.924 57.92 0 0 1 -57.924 -57.92 57.924 57.92 0 0 1 57.924 -57.92 57.924 57.92 0 0 1 57.924 57.92z"/>
</symbol>
<symbol id="stackoverflow" stroke="inherit" fill="inherit">
<path d="m387.04 6.8117 38.42-6.8117 34.54 196.94l-38.42 6.81zm-128.56 62.767 31.95-22.5 114.08 163.81-31.95 22.5zm-85.268 104.87 19.507-33.974 172.24 99.994-19.506 33.974zm-36.39 103.25 10.097-37.891 192.12 51.758-10.091 37.89zm-10.766 88.471 3.4003-39.078 198.14 17.429-3.4002 39.078zm-0.64919 76.06-0.00007-39.228 198.89-0.00012 0.00006 39.228zm230.27 30.678 0.006-173.07 38.966 0.00009-0.00006 212.13c-122.71 0-223.36-0.07-334.65 0.03l0.000012-212.17 38.966 0.00009-0.0026 173.06z"/>
</symbol>
<symbol id="twitch" stroke="inherit" fill="inherit">
<rect y="133.8" x="211.95" width="43.436" height="132.34"/>
<rect y="133.8" x="334.25" width="43.436" height="132.34"/>
<path d="m501 0.00007c-152.51 0.003877-305.03-0.004269-457.54 0.003915l-32.46 89.044v355.98l122.46 0.0215-0.004 66.942 66.8 0.01c22.384-22.332 44.744-44.665 67.106-66.997h99.815l133.82-133.63c0-103.79-0.00005-207.58 0.002-311.37zm-412.58 43.877h368.68c0.0253 81.643-0.0446 163.29 0 244.93l-79.053 78.929-121.98 0.01-66.757 66.651 0.0117-67.028-100.91 0.0234 0.002-323.51z"/>
</symbol>
<symbol id="twitter" stroke="inherit" fill="inherit">
<path d="m457.27 143.44c0.39451 6.718 0.59473 13.492 0.59473 20.318 0.01 175.21-131.94 317.24-294.72 317.24-57.26 0-113.28-17.95-161.14-51.62 6.9295 0.75145 13.824 1.1098 20.723 1.1098 49.619 0 95.301-18.141 131.63-48.598-45.992-1.3016-84.48-34.105-97.808-78.83 6.8965 1.7428 13.922 2.5774 20.969 2.5774 9.9735 0 19.592-1.636 28.629-4.6726-49.798-9.8595-85.95-56.582-85.95-111.08 0-0.36339 0.0016-0.72639 0.0048-1.089 12.785 9.073 27.763 13.909 43.076 13.909 1.0765 0 2.1479-0.0233 3.2133-0.0639-28.616-20.546-45.852-55.239-45.852-92.262 0-20.69 5.2688-40.054 14.441-56.625 55.85 68.446 134.06 110.9 217.7 118.73-2.2864-9.3557-3.5081-19.245-3.5081-28.934 0-62.157 46.813-112.55 104.56-112.55 29.98 0 56.956 13.487 76.022 35.247 25.334-2.306 48.493-12.219 67.601-27.532-5.9906 27.004-22.551 49.001-44.211 61.292 1.3954 0.0616 2.7919 0.0921 4.1884 0.0921 19.997 0 38.796-6.26 54.566-16.921-12.579 24.623-31.284 45.649-54.722 60.266z"/>
</symbol>
<symbol id="instagram" stroke="inherit" fill="inherit">
<path d="m510.95 150.5c-1.1992-27.199-5.5977-45.898-11.898-62.102-6.5-17.199-16.5-32.598-29.602-45.398-12.801-13-28.301-23.102-45.301-29.5-16.297-6.3008-34.898-10.699-62.098-11.898-27.402-1.3008-36.102-1.6016-105.6-1.6016s-78.199 0.30078-105.5 1.5c-27.199 1.1992-45.898 5.6016-62.098 11.898-17.203 6.5-32.602 16.5-45.402 29.602-13 12.801-23.098 28.301-29.5 45.301-6.3008 16.301-10.699 34.898-11.898 62.098-1.3008 27.402-1.6016 36.102-1.6016 105.6s0.30078 78.199 1.5 105.5c1.1992 27.199 5.6016 45.898 11.902 62.102 6.5 17.199 16.598 32.598 29.598 45.398 12.801 13 28.301 23.102 45.301 29.5 16.301 6.3008 34.898 10.699 62.102 11.898 27.297 1.2031 36 1.5 105.5 1.5s78.199-0.29688 105.5-1.5c27.199-1.1992 45.898-5.5977 62.098-11.898 34.402-13.301 61.602-40.5 74.902-74.898 6.2969-16.301 10.699-34.902 11.898-62.102 1.1992-27.301 1.5-36 1.5-105.5s-0.10156-78.199-1.3008-105.5zm-46.098 209c-1.1016 25-5.3008 38.5-8.8008 47.5-8.6016 22.301-26.301 40-48.602 48.602-9 3.5-22.598 7.6992-47.5 8.7969-27 1.2031-35.098 1.5-103.4 1.5s-76.5-0.29688-103.4-1.5c-25-1.0977-38.5-5.2969-47.5-8.7969-11.098-4.1016-21.199-10.602-29.398-19.102-8.5-8.3008-15-18.301-19.102-29.398-3.5-9-7.6992-22.602-8.7969-47.5-1.2031-27-1.5-35.102-1.5-103.4s0.29688-76.5 1.5-103.4c1.0977-25 5.2969-38.5 8.7969-47.5 4.1016-11.102 10.602-21.199 19.203-29.402 8.2969-8.5 18.297-15 29.398-19.098 9-3.5 22.602-7.6992 47.5-8.8008 27-1.1992 35.102-1.5 103.4-1.5 68.402 0 76.5 0.30078 103.4 1.5 25 1.1016 38.5 5.3008 47.5 8.8008 11.098 4.0977 21.199 10.598 29.398 19.098 8.5 8.3008 15 18.301 19.102 29.402 3.5 9 7.6992 22.598 8.8008 47.5 1.1992 27 1.5 35.098 1.5 103.4s-0.30078 76.301-1.5 103.3z"/><path d="m256.45 124.5c-72.598 0-131.5 58.898-131.5 131.5s58.902 131.5 131.5 131.5c72.602 0 131.5-58.898 131.5-131.5s-58.898-131.5-131.5-131.5zm0 216.8c-47.098 0-85.301-38.199-85.301-85.301s38.203-85.301 85.301-85.301c47.102 0 85.301 38.199 85.301 85.301s-38.199 85.301-85.301 85.301z"/><path d="m423.85 119.3c0 16.953-13.746 30.699-30.703 30.699-16.953 0-30.699-13.746-30.699-30.699 0-16.957 13.746-30.699 30.699-30.699 16.957 0 30.703 13.742 30.703 30.699z"/>
</symbol>
</symbol>
<symbol id="reddit" stroke="inherit" fill="inherit">
<path d="M 512.342 256.343 C 512.342 397.726 397.726 512.342 256.343 512.342 C 114.958 512.342 0.342 397.726 0.342 256.343 C 0.342 114.958 114.958 0.342 256.343 0.342 C 397.726 0.342 512.342 114.958 512.342 256.343 Z M 427.009 256.343 C 427.009 235.683 410.241 218.915 389.583 218.915 C 379.402 218.915 370.418 222.808 363.832 229.394 C 338.382 211.131 303.052 199.153 264.127 197.655 L 281.192 117.712 L 336.586 129.389 C 337.184 143.462 348.861 154.839 363.235 154.839 C 377.904 154.839 389.881 142.863 389.881 128.191 C 389.881 113.52 377.904 101.542 363.235 101.542 C 352.754 101.542 343.77 107.531 339.58 116.514 L 277.6 103.341 C 275.804 103.041 274.009 103.341 272.51 104.239 C 271.012 105.137 270.114 106.633 269.515 108.429 L 250.653 197.655 C 210.83 198.853 175.2 210.53 149.451 229.394 C 142.863 223.105 133.582 218.915 123.7 218.915 C 103.041 218.915 86.273 235.683 86.273 256.343 C 86.273 271.613 95.256 284.488 108.429 290.475 C 107.831 294.068 107.531 297.961 107.531 301.854 C 107.531 359.34 174.302 405.75 256.94 405.75 C 339.58 405.75 406.348 359.34 406.348 301.854 C 406.348 297.961 406.051 294.368 405.45 290.774 C 417.728 284.785 427.009 271.613 427.009 256.343 Z M 171.008 282.99 C 171.008 268.317 182.984 256.343 197.655 256.343 C 212.329 256.343 224.303 268.317 224.303 282.99 C 224.303 297.66 212.329 309.638 197.655 309.638 C 182.984 309.638 171.008 297.66 171.008 282.99 Z M 319.818 353.352 C 301.553 371.617 266.822 372.813 256.642 372.813 C 246.46 372.813 211.431 371.318 193.465 353.352 C 190.768 350.657 190.768 346.166 193.465 343.473 C 196.16 340.777 200.65 340.777 203.343 343.473 C 214.723 354.85 239.276 359.042 256.94 359.042 C 274.606 359.042 298.858 354.85 310.536 343.473 C 313.232 340.777 317.722 340.777 320.417 343.473 C 322.513 346.465 322.513 350.657 319.818 353.352 Z M 315.028 309.638 C 300.357 309.638 288.379 297.66 288.379 282.99 C 288.379 268.317 300.357 256.343 315.028 256.343 C 329.7 256.343 341.674 268.317 341.674 282.99 C 341.674 297.66 329.7 309.638 315.028 309.638 Z" />
</symbol>
</svg>`;
}
};
customElements.define("wc-social-link", WCSocialLink);
export {
WCSocialLink
};