some more work
This commit is contained in:
parent
65438d8799
commit
a4891e24bb
3 changed files with 88 additions and 85 deletions
25
index.html
25
index.html
|
@ -61,31 +61,8 @@
|
|||
</div>
|
||||
|
||||
<div id="popover" class="popover">
|
||||
|
||||
<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 id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-pause="false">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="footer text-center py-4 mt-5">
|
||||
|
|
110
script.js
110
script.js
|
@ -1,6 +1,12 @@
|
|||
// The existingPosts array is used to track already displayed posts
|
||||
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
|
||||
function getUrlParameter(name) {
|
||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
|
@ -68,7 +74,7 @@ const updateTimesOnPage = function() {
|
|||
|
||||
// displayPost creates and displays a 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);
|
||||
|
||||
|
@ -90,6 +96,7 @@ const displayPost = function(post) {
|
|||
let $card = $(cardHTML);
|
||||
$('#wall').prepend($card);
|
||||
$('.masonry-grid').masonry('prepended', $card);
|
||||
return 1;
|
||||
};
|
||||
|
||||
// updateWall displays all posts
|
||||
|
@ -97,33 +104,10 @@ const updateWall = function(posts) {
|
|||
if (!posts || posts.length === 0) return;
|
||||
|
||||
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
||||
posts.forEach(post => displayPost(post));
|
||||
};
|
||||
|
||||
|
||||
// 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);
|
||||
let ret = 0
|
||||
posts.forEach(post => ret += displayPost(post));
|
||||
$('.masonry-grid').masonry('layout');
|
||||
return ret;
|
||||
};
|
||||
|
||||
|
||||
|
@ -131,50 +115,36 @@ const displayCarousel = function(post) {
|
|||
const updateCarousel = function(slides, posts) {
|
||||
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
|
||||
slides.innerHTML = "";
|
||||
console.log( slides )
|
||||
|
||||
|
||||
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>`
|
||||
*/
|
||||
var newHTML = ` <!-- No Indicators -->`
|
||||
newHTML += `<!-- the slides -->
|
||||
<div class="carousel-inner">
|
||||
`
|
||||
for( let i = 0; i < posts.length; i++ ) {
|
||||
let post = posts[i];
|
||||
if ( i == 0 ) {
|
||||
newHTML += '<div class="carousel-item active">';
|
||||
newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
|
||||
}
|
||||
else {
|
||||
newHTML += '<div class="carousel-item">';
|
||||
newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" >`;
|
||||
}
|
||||
newHTML += `
|
||||
<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 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)}</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
${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>` : ''}
|
||||
<hr>
|
||||
<div class="row align-items-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>`}
|
||||
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
|
||||
</div>
|
||||
|
||||
${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
|
||||
<hr>
|
||||
<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>';
|
||||
}
|
||||
|
@ -182,6 +152,18 @@ const updateCarousel = function(slides, posts) {
|
|||
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
|
||||
const hashtagsString = function(hashtagsArray) {
|
||||
|
@ -261,19 +243,25 @@ $(document).ready(async function() {
|
|||
});
|
||||
|
||||
const slides = $('#myCarousel');
|
||||
|
||||
const popover = $('#popover');
|
||||
|
||||
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
|
||||
const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||
updateWall(allPosts.flat());
|
||||
const allSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||
updateCarousel(slides, allSlides.flat());
|
||||
// Activate Carousel
|
||||
slides.carousel("cycle");
|
||||
|
||||
setTimeout(async function() { showCarousel(); }, duration)
|
||||
setInterval(async function() {
|
||||
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||
updateWall(newPosts.flat());
|
||||
}, 10000);
|
||||
let updated = updateWall(newPosts.flat());
|
||||
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 {
|
||||
$('#zero-state').removeClass('d-none');
|
||||
$('#app-content').addClass('d-none');
|
||||
|
|
38
styles.css
38
styles.css
|
@ -126,6 +126,17 @@ body {
|
|||
height: 50px;
|
||||
}
|
||||
|
||||
.avatar-img-big {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-name {
|
||||
font-size:2em;
|
||||
font-weight:600;
|
||||
padding-top:0.3em
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 2000px !important;
|
||||
}
|
||||
|
@ -155,4 +166,31 @@ body {
|
|||
border: 0px solid rgba(0, 137, 57, .5);
|
||||
box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue