generated from daviddarnes/component-template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mastodon-post.js
115 lines (95 loc) · 2.79 KB
/
mastodon-post.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
const mastodonPostTemplate = document.createElement("template");
mastodonPostTemplate.innerHTML = `
<figure>
<blockquote data-key="content"></blockquote>
<figcaption>
<cite>
<a data-key="url"><span data-key="username"></span>@<span data-key="hostname"></span></a>
</cite>
<dl>
<dt>Reposts</dt><dd data-key="reblogs_count"></dd>
<dt>Replies</dt><dd data-key="replies_count"></dd>
<dt>Favourites</dt><dd data-key="favourites_count"></dd>
</dl>
</figcaption>
</figure>
`;
mastodonPostTemplate.id = "mastodon-post-template";
if (!document.getElementById(mastodonPostTemplate.id)) {
document.body.appendChild(mastodonPostTemplate);
}
class MastodonPost extends HTMLElement {
static register(tagName) {
if ("customElements" in window) {
customElements.define(tagName || "mastodon-post", MastodonPost);
}
}
async connectedCallback() {
this.append(this.template);
const data = { ...(await this.data), ...this.linkData };
this.slots.forEach((slot) => {
slot.dataset.key.split(",").forEach((keyItem) => {
const value = this.getValue(keyItem, data);
if (keyItem === "content") {
slot.innerHTML = value;
} else {
this.populateSlot(slot, value);
}
});
});
}
populateSlot(slot, value) {
if (typeof value == "string" && value.startsWith("http")) {
if (slot.localName === "img") slot.src = value;
if (slot.localName === "a") slot.href = value;
} else {
slot.textContent = value;
}
}
handleKey(object, key) {
const parsedKeyInt = parseFloat(key);
if (Number.isNaN(parsedKeyInt)) {
return object[key];
}
return object[parsedKeyInt];
}
getValue(string, data) {
let keys = string.trim().split(/\.|\[|\]/g);
keys = keys.filter((string) => string.length);
const value = keys.reduce(
(object, key) => this.handleKey(object, key),
data
);
return value;
}
get template() {
return document
.getElementById(
this.getAttribute("template") || `${this.localName}-template`
)
.content.cloneNode(true);
}
get slots() {
return this.querySelectorAll("[data-key]");
}
get link() {
return this.querySelector("a").href;
}
get linkData() {
const url = new URL(this.link);
const paths = url.pathname.split("/").filter((string) => string.length);
return {
url: this.link,
hostname: url.hostname,
username: paths.find((path) => path.startsWith("@")),
postId: paths.find((path) => !path.startsWith("@"))
};
}
get endpoint() {
return `https://${this.linkData.hostname}/api/v1/statuses/${this.linkData.postId}`;
}
get data() {
return fetch(this.endpoint).then((response) => response.json());
}
}
MastodonPost.register();