Improvements for display #1
3 changed files with 36 additions and 3 deletions
|
@ -4,5 +4,9 @@
|
||||||
"navbarColor": "#008939",
|
"navbarColor": "#008939",
|
||||||
"duration": 10,
|
"duration": 10,
|
||||||
"refreshDuration": 30,
|
"refreshDuration": 30,
|
||||||
|
"maxAge": 604800,
|
||||||
|
"extraCards": [
|
||||||
|
"<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
|
||||||
|
],
|
||||||
"includeReplies": true
|
"includeReplies": true
|
||||||
}
|
}
|
||||||
|
|
35
script.js
35
script.js
|
@ -34,11 +34,15 @@ const timeAgo = function(seconds) {
|
||||||
};
|
};
|
||||||
|
|
||||||
let includeReplies;
|
let includeReplies;
|
||||||
|
// max post age in seconds
|
||||||
|
let maxAge;
|
||||||
// below times are in milliseconds
|
// below times are in milliseconds
|
||||||
// duration for slide animations
|
// duration for slide animations
|
||||||
let duration;
|
let duration;
|
||||||
// refresh rate
|
// refresh rate
|
||||||
let refresh;
|
let refresh;
|
||||||
|
// extra cards text
|
||||||
|
let extraCards;
|
||||||
|
|
||||||
// fetchConfig fetches the configuration from the config.json file
|
// fetchConfig fetches the configuration from the config.json file
|
||||||
const fetchConfig = async function() {
|
const fetchConfig = async function() {
|
||||||
|
@ -47,16 +51,22 @@ const fetchConfig = async function() {
|
||||||
$('#navbar-brand').text(config.navbarBrandText);
|
$('#navbar-brand').text(config.navbarBrandText);
|
||||||
$('.navbar').css('background-color', config.navbarColor);
|
$('.navbar').css('background-color', config.navbarColor);
|
||||||
includeReplies = config.includeReplies;
|
includeReplies = config.includeReplies;
|
||||||
|
maxAge = config.maxAge;
|
||||||
duration = config.duration * 1000;
|
duration = config.duration * 1000;
|
||||||
refresh = config.refreshDuration * 1000;
|
refresh = config.refreshDuration * 1000;
|
||||||
|
extraCards = config.extraCards;
|
||||||
return config.defaultServerUrl;
|
return config.defaultServerUrl;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Error loading config.json:", error);
|
console.log("Error loading config.json:", error);
|
||||||
$('#navbar-brand').text("Netzbegrünung Mastowall");
|
$('#navbar-brand').text("Netzbegrünung Mastowall");
|
||||||
$('.navbar').css('background-color', "#008939");
|
$('.navbar').css('background-color', "#008939");
|
||||||
includeReplies = true;
|
includeReplies = true;
|
||||||
|
maxAge = 60 * 60 * 24 * 7;
|
||||||
duration = 10000;
|
duration = 10000;
|
||||||
refresh = 30000;
|
refresh = 30000;
|
||||||
|
extraCards = [
|
||||||
|
"<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
|
||||||
|
];
|
||||||
return "https://gruene.social";
|
return "https://gruene.social";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -107,11 +117,20 @@ const displayPost = function(post) {
|
||||||
return 1;
|
return 1;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const processPosts = function(posts) {
|
||||||
|
posts = posts.filter((post) => secondsAgo(new Date(post.created_at)) < maxAge);
|
||||||
|
|
||||||
|
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
||||||
|
|
||||||
|
return posts;
|
||||||
|
};
|
||||||
|
|
||||||
// updateWall displays all posts
|
// updateWall displays all posts
|
||||||
const updateWall = function(posts) {
|
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 = processPosts(posts);
|
||||||
|
|
||||||
let ret = 0
|
let ret = 0
|
||||||
posts.forEach(post => ret += displayPost(post));
|
posts.forEach(post => ret += displayPost(post));
|
||||||
$('.masonry-grid').masonry('layout');
|
$('.masonry-grid').masonry('layout');
|
||||||
|
@ -123,7 +142,7 @@ const updateWall = function(posts) {
|
||||||
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(b.created_at) - new Date(a.created_at));
|
posts = processPosts(posts);
|
||||||
|
|
||||||
// remove slides in carousel
|
// remove slides in carousel
|
||||||
slides.innerHTML = "";
|
slides.innerHTML = "";
|
||||||
|
@ -163,6 +182,15 @@ const updateCarousel = function(slides, posts) {
|
||||||
`;
|
`;
|
||||||
newHTML += '</div>';
|
newHTML += '</div>';
|
||||||
}
|
}
|
||||||
|
for( let i = 0; i < extraCards.length; i++ ) {
|
||||||
|
newHTML += `<div class="carousel-item" data-mdb -interval="${duration * 2}" data-mdb-pause="false">
|
||||||
|
<div className="card-big">
|
||||||
|
<div class="d-flex align-items-center mb-4">
|
||||||
|
${extraCards[i]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
newHTML += '</div>'
|
newHTML += '</div>'
|
||||||
document.getElementById("myCarousel").innerHTML = newHTML;
|
document.getElementById("myCarousel").innerHTML = newHTML;
|
||||||
};
|
};
|
||||||
|
@ -267,7 +295,8 @@ $(document).ready(async function() {
|
||||||
const popover = $('#popover');
|
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)));
|
let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||||
|
|
||||||
updateWall(allPosts.flat());
|
updateWall(allPosts.flat());
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$('.masonry-grid').masonry('layout');
|
$('.masonry-grid').masonry('layout');
|
||||||
|
|
BIN
sharepic.jpg
Normal file
BIN
sharepic.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 129 KiB |
Loading…
Reference in a new issue