Add emoji support
This commit is contained in:
parent
7acd5f4e38
commit
004c92b392
2 changed files with 16 additions and 4 deletions
16
script.js
16
script.js
|
@ -104,6 +104,14 @@ const updateTimesOnPage = function() {
|
|||
});
|
||||
};
|
||||
|
||||
// replace certain emojies in some text with images
|
||||
const replaceEmojies = (text, emojis) => {
|
||||
emojis.forEach(emoji => {
|
||||
text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.static_url}">`);
|
||||
});
|
||||
return text;
|
||||
};
|
||||
|
||||
// displayPost creates and displays a post
|
||||
const displayPost = function(post) {
|
||||
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
|
||||
|
@ -115,10 +123,10 @@ const displayPost = function(post) {
|
|||
<div class="card m-2 p-2">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
|
||||
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
||||
<p class="m-0">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
||||
</div>
|
||||
${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
|
||||
<p class="card-text">${DOMPurify.sanitize(post.content)}</p>
|
||||
<p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</p>
|
||||
${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
|
||||
<p class="card-text text-right"><small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
|
||||
</div>
|
||||
|
@ -185,12 +193,12 @@ const updateCarousel = function(slides, posts) {
|
|||
else {
|
||||
newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
|
||||
}
|
||||
const postContent = DOMPurify.sanitize(post.content);
|
||||
const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
|
||||
newHTML += `
|
||||
<div class="card-big">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
|
||||
<p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
||||
<p class="avatar-name">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row align-items-center vertical-align-center">
|
||||
|
|
|
@ -223,4 +223,8 @@ body {
|
|||
|
||||
.footer a {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1em;
|
||||
}
|
Loading…
Reference in a new issue