56 lines
2 KiB
JavaScript
56 lines
2 KiB
JavaScript
|
function escapeHtml(unsafe) {
|
||
|
|
return unsafe
|
||
|
|
.replace(/&/g, "&")
|
||
|
|
.replace(/</g, "<")
|
||
|
|
.replace(/>/g, ">")
|
||
|
|
.replace(/"/g, """)
|
||
|
|
.replace(/'/g, "'");
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("load-comment").addEventListener("click", function() {
|
||
|
|
document.getElementById("load-comment").innerHTML = "Loading...";
|
||
|
|
fetch('https://<TMPL_VAR mastodon_host>/api/v1/statuses/<TMPL_VAR mastodon_post>/context')
|
||
|
|
.then(function(response) {
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(function(data) {
|
||
|
|
if(data['descendants'] &&
|
||
|
|
Array.isArray(data['descendants']) &&
|
||
|
|
data['descendants'].length > 0) {
|
||
|
|
document.getElementById('mastodon-comments-list').innerHTML = "";
|
||
|
|
data['descendants'].forEach(function(reply) {
|
||
|
|
reply.account.display_name = escapeHtml(reply.account.display_name);
|
||
|
|
reply.account.emojis.forEach(emoji => {
|
||
|
|
reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
|
||
|
|
`<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
|
||
|
|
});
|
||
|
|
mastodonComment =
|
||
|
|
`<div class="mastodon-comment comment">
|
||
|
|
<div class="avatar">
|
||
|
|
<img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="author">
|
||
|
|
<a href="${reply.account.url}" rel="nofollow">
|
||
|
|
<span>${reply.account.display_name}</span>
|
||
|
|
<span class="disabled">${escapeHtml(reply.account.acct)}</span>
|
||
|
|
</a>
|
||
|
|
<a class="post" href="${reply.uri}" rel="nofollow">
|
||
|
|
<time datetime="${reply.created_at}" pubdate="pubdate">
|
||
|
|
${reply.created_at.replace(/(T\d+:\d+):\d+(\.\d+)?(.*)/, "$1$3")}
|
||
|
|
</time>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="mastodon-comment-content">${reply.content}</div>
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|