norbert.tretkowski/mastowall
norbert.tretkowski/mastowall
1
1
Fork 3
Code Issues Pull requests Projects Releases Packages Wiki Activity

Even more improvements #5

Merged
norbert.tretkowski merged 5 commits from max.lissowski/mastowall:for-pi2 into main 2023-11-25 10:21:12 +01:00
Conversation 0 Commits 5 Files changed 2 +21 -11
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
script.js
View file

@ -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 // displayPost creates and displays a post
const displayPost = function(post) { const displayPost = function(post) {
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0; 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="card m-2 p-2">
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-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> </div>
${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''} ${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>` : ''} ${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> <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> </div>
@ -185,16 +193,16 @@ const updateCarousel = function(slides, posts) {
else { else {
newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`; 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 += ` newHTML += `
<div class="card-big"> <div class="card-big">
<div class="d-flex align-items-center mb-4"> <div class="d-flex align-items-center mb-4">
<img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-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> </div>
<hr> <hr>
<div class="row align-items-center vertical-align-center"> <div class="row align-items-center vertical-align-center">
<div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div> <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''} ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
</div> </div>
<hr> <hr>
@ -210,7 +218,7 @@ const updateCarousel = function(slides, posts) {
newHTML += '</div>'; newHTML += '</div>';
} }
for( let i = 0; i < extraCards.length; i++ ) { for( let i = 0; i < extraCards.length; i++ ) {
newHTML += `<div class="carousel-item" data-mdb-interval="${duration * 2}" data-mdb-pause="false"> newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
<div className="card-big"> <div className="card-big">
<div class="d-flex align-items-center mb-4"> <div class="d-flex align-items-center mb-4">
${extraCards[i]} ${extraCards[i]}
@ -341,9 +349,7 @@ $(document).ready(async function() {
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag))); const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
let updated = updateWall(newPosts.flat()); let updated = updateWall(newPosts.flat());
if ( updated > 0 ) { if ( updated > 0 ) {
hideCarousel()
updateCarousel(slides, newPosts.flat()); updateCarousel(slides, newPosts.flat());
setTimeout(async function() { showCarousel(); }, duration)
} }
}, refresh); }, refresh);
} else { } else {

10
styles.css
View file

@ -51,9 +51,9 @@
} }
.carousel .card-text { .carousel .card-text {
font-size: 1.4em; font-size: 1.6em;
overflow: hidden; overflow: hidden;
max-height: 60vh; max-height: 50vh;
} }
.card { .card {
@ -208,7 +208,7 @@ body {
.text-muted { .text-muted {
color:#6c757d !important; color:#6c757d !important;
font-size: 1.2em; font-size: 1em;
text-align: right; text-align: right;
} }
@ -224,3 +224,7 @@ body {
.footer a { .footer a {
color: rgba(255, 255, 255, 0.8) !important; color: rgba(255, 255, 255, 0.8) !important;
} }
.emoji {
height: 1em;
}