for-pi2 #3

Merged
norbert.tretkowski merged 5 commits from max.lissowski/mastowall:for-pi2 into for-pi2 2023-11-24 21:14:12 +01:00
2 changed files with 31 additions and 12 deletions

View file

@ -95,8 +95,10 @@ const fetchPosts = async function(serverUrl, hashtag) {
// updateTimesOnPage updates the time information displayed for each post // updateTimesOnPage updates the time information displayed for each post
const updateTimesOnPage = function() { const updateTimesOnPage = function() {
$('.card-text a').each(function() { $('.card-text a.time').each(function() {
const date = new Date($(this).attr('data-time')); const timeValue = $(this).attr('data-time');
if (timeValue === '') return;
const date = new Date(timeValue);
const newTimeAgo = timeAgo(secondsAgo(date)); const newTimeAgo = timeAgo(secondsAgo(date));
$(this).text(newTimeAgo); $(this).text(newTimeAgo);
}); });
@ -118,7 +120,7 @@ const displayPost = function(post) {
${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">${DOMPurify.sanitize(post.content)}</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 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>
</div> </div>
`; `;
@ -165,16 +167,25 @@ const updateCarousel = function(slides, posts) {
var newHTML = ` <!-- No Indicators -->` var newHTML = ` <!-- No Indicators -->`
newHTML += `<!-- the slides --> newHTML += `<!-- the slides -->
<div class="carousel-inner"> <div class="carousel-inner">
` `;
let existingCards = [];
for( let i = 0; i < posts.length; i++ ) { for( let i = 0; i < posts.length; i++ ) {
let post = posts[i]; let post = posts[i];
if (existingCards.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) continue;
existingCards.push(post.id);
/*console.log( post.content )*/ /*console.log( post.content )*/
if ( i == 0 ) { if ( i == 0 ) {
newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" data-mdb-pause="false">`; newHTML += `<div class="carousel-item active" data-interval="${duration}" data-pause="false">`;
} }
else { else {
newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" data-mdb-pause="false">`; newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
} }
const postContent = DOMPurify.sanitize(post.content);
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">
@ -183,12 +194,12 @@ const updateCarousel = function(slides, posts) {
</div> </div>
<hr> <hr>
<div class="row align-items-center vertical-align-center"> <div class="row align-items-center vertical-align-center">
${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`} <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>
${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>
<p class="card-text text-right"> <p class="card-text text-right">
<small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a> <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>
${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' } ${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' }
${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' } ${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' }
${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' } ${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' }
@ -218,6 +229,11 @@ const showCarousel = function() {
$('#myCarousel').carousel("cycle"); $('#myCarousel').carousel("cycle");
} }
const strip = function(html) {
let doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
const hideCarousel = function() { const hideCarousel = function() {
// show popover // show popover
document.getElementById('popover').style.opacity = '0'; document.getElementById('popover').style.opacity = '0';

View file

@ -50,6 +50,12 @@
margin-bottom: 1px !important; margin-bottom: 1px !important;
} }
.carousel .card-text {
font-size: 1.4em;
overflow: hidden;
max-height: 60vh;
}
.card { .card {
font-size: 0.9em; /* adjust this value to get the desired text size */ font-size: 0.9em; /* adjust this value to get the desired text size */
} }
@ -186,10 +192,6 @@ body {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
.card-text ~ p {
font-size: 1.4em;
}
.card-img-bottom { .card-img-bottom {
max-width: 600px; max-width: 600px;
max-height: 500px; max-height: 500px;
@ -201,6 +203,7 @@ body {
margin-top: 0px !important; margin-top: 0px !important;
margin-bottom: 10px !important; margin-bottom: 10px !important;
align-items: center; align-items: center;
float: right;
} }
.text-muted { .text-muted {