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

some more work

Browse source
This commit is contained in:
Stefan Schmidt-Bilkenroth 2023-11-10 19:42:57 +01:00
parent 65438d8799
commit a4891e24bb
3 changed files with 88 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
index.html
View file

@ -61,31 +61,8 @@
</div> </div>
<div id="popover" class="popover"> <div id="popover" class="popover">
<div id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-pause="false">
<div id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-interval="1000" data-mdb-pause="false">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" class="active"></li>
<li data-target="#myCarousel" ></li>
<li data-target="#myCarousel" ></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
alt="Wild Landscape" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
alt="Exotic Fruits" />
</div>
</div>
</div> </div>
</div> </div>
<footer class="footer text-center py-4 mt-5"> <footer class="footer text-center py-4 mt-5">

110
script.js
View file

@ -1,6 +1,12 @@
// The existingPosts array is used to track already displayed posts // The existingPosts array is used to track already displayed posts
let existingPosts = []; let existingPosts = [];
// below times are in milliseconds
// duration for slide animations
let duration = 5000;
// refresh rate
let refresh = 30000;
// getUrlParameter helps to fetch URL parameters // getUrlParameter helps to fetch URL parameters
function getUrlParameter(name) { function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
@ -68,7 +74,7 @@ const updateTimesOnPage = function() {
// 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; if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
existingPosts.push(post.id); existingPosts.push(post.id);
@ -90,6 +96,7 @@ const displayPost = function(post) {
let $card = $(cardHTML); let $card = $(cardHTML);
$('#wall').prepend($card); $('#wall').prepend($card);
$('.masonry-grid').masonry('prepended', $card); $('.masonry-grid').masonry('prepended', $card);
return 1;
}; };
// updateWall displays all posts // updateWall displays all posts
@ -97,33 +104,10 @@ const updateWall = function(posts) {
if (!posts || posts.length === 0) return; if (!posts || posts.length === 0) return;
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
posts.forEach(post => displayPost(post)); let ret = 0
}; posts.forEach(post => ret += displayPost(post));
$('.masonry-grid').masonry('layout');
return ret;
// displayPost creates and displays a post
const displayCarousel = function(post) {
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
existingPosts.push(post.id);
let cardHTML = `
<div class="col-sm-3">
<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)}</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>
${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>
</div>
</div>
`;
let $card = $(cardHTML);
$('#myCarousel').prepend($card);
}; };
@ -131,50 +115,36 @@ const displayCarousel = function(post) {
const updateCarousel = function(slides, posts) { const updateCarousel = function(slides, posts) {
if (!posts || posts.length === 0) return; if (!posts || posts.length === 0) return;
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)); posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
// remove slides in carousel // remove slides in carousel
slides.innerHTML = ""; slides.innerHTML = "";
console.log( slides ) var newHTML = ` <!-- No Indicators -->`
newHTML = ` <!-- No Indicators -->`
/*
<ul class="carousel-indicators">
`
for( let i = 0; i < posts.length; i++ ) {
if ( i == 0)
newHTML += `<li data-target="#myCarousel" class="active"></li>`;
else
newHTML += `<li data-target="#myCarousel"></li>`;
}
newHTML += `</ul>`
*/
newHTML += `<!-- the slides --> newHTML += `<!-- the slides -->
<div class="carousel-inner"> <div class="carousel-inner">
` `
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 ( i == 0 ) { if ( i == 0 ) {
newHTML += '<div class="carousel-item active">'; newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
} }
else { else {
newHTML += '<div class="carousel-item">'; newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" >`;
} }
newHTML += ` newHTML += `
<div class="card m-2 p-2"> <div class="card-big">
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-4">
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2"> <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p> <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)}</p>
</div> </div>
<div class="row"> <hr>
${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="row align-items-center">
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''} ${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>`}
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
</div> </div>
<hr>
${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 href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
</div> </div>
`; `;
newHTML += '</div>'; newHTML += '</div>';
} }
@ -182,6 +152,18 @@ const updateCarousel = function(slides, posts) {
document.getElementById("myCarousel").innerHTML = newHTML; document.getElementById("myCarousel").innerHTML = newHTML;
}; };
const showCarousel = function() {
// show popover
document.getElementById('popover').style.opacity = '0.95';
// Activate Carousel
$('#myCarousel').carousel("cycle");
}
const hideCarousel = function() {
// show popover
document.getElementById('popover').style.opacity = '0';
// Activate Carousel
}
// hashtagsString returns a single string based on the given array of hashtags // hashtagsString returns a single string based on the given array of hashtags
const hashtagsString = function(hashtagsArray) { const hashtagsString = function(hashtagsArray) {
@ -261,19 +243,25 @@ $(document).ready(async function() {
}); });
const slides = $('#myCarousel'); const slides = $('#myCarousel');
const popover = $('#popover');
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') { if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag))); const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
updateWall(allPosts.flat()); updateWall(allPosts.flat());
const allSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag))); const allSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
updateCarousel(slides, allSlides.flat()); updateCarousel(slides, allSlides.flat());
// Activate Carousel
slides.carousel("cycle"); setTimeout(async function() { showCarousel(); }, duration)
setInterval(async function() { setInterval(async function() {
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag))); const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
updateWall(newPosts.flat()); let updated = updateWall(newPosts.flat());
}, 10000); if ( updated > 0 ) {
hideCarousel()
const newSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
updateCarousel(slides, newSlides.flat());
setTimeout(async function() { showCarousel(); }, duration)
}
}, refresh);
} else { } else {
$('#zero-state').removeClass('d-none'); $('#zero-state').removeClass('d-none');
$('#app-content').addClass('d-none'); $('#app-content').addClass('d-none');

38
styles.css
View file

@ -126,6 +126,17 @@ body {
height: 50px; height: 50px;
} }
.avatar-img-big {
width: 100px;
height: 100px;
}
.avatar-name {
font-size:2em;
font-weight:600;
padding-top:0.3em
}
.container { .container {
max-width: 2000px !important; max-width: 2000px !important;
} }
@ -155,4 +166,31 @@ body {
border: 0px solid rgba(0, 137, 57, .5); border: 0px solid rgba(0, 137, 57, .5);
box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
border-radius:.8rem; border-radius:.8rem;
opacity: 0;
transition: opacity 0.5s linear;
} }
.card-big {
font-size: 1.8em;
font-weight: 400;
margin-top: 20px !important;
margin-left: 40px !important;
margin-right: 40px !important;
margin-bottom: 20px !important;
}
.card-img-bottom {
max-width: 600px;
max-height: 500px;
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius:calc(.25rem - 1px);
margin-top: 0px !important;
margin-bottom: 10px !important;
}
.text-muted {
color:#6c757d !important;
font-size: 0.6em;
text-align: right;
}