380 lines
14 KiB
JavaScript
380 lines
14 KiB
JavaScript
// The existingPosts array is used to track already displayed posts
|
|
let existingPosts = [];
|
|
|
|
// getUrlParameter helps to fetch URL parameters
|
|
function getUrlParameter(name) {
|
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
var results = regex.exec(location.search);
|
|
console.log(results)
|
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
|
}
|
|
|
|
// secondsAgo calculates how many seconds have passed since the provided date
|
|
const secondsAgo = date => Math.floor((new Date() - date) / 1000);
|
|
|
|
// timeAgo formats the time elapsed in a human readable format
|
|
const timeAgo = function(seconds) {
|
|
// An array of intervals for years, months, days, hours, and minutes.
|
|
const intervals = [
|
|
{ limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
|
|
{ limit: 2592000, singular: 'Monat', plural: 'Monaten' },
|
|
{ limit: 86400, singular: 'Tag', plural: 'Tagen' },
|
|
{ limit: 3600, singular: 'Stunde', plural: 'Stunden' },
|
|
{ limit: 60, singular: 'Minute', plural: 'Minuten' }
|
|
];
|
|
|
|
// Loop through the intervals to find which one is the best fit.
|
|
for (let interval of intervals) {
|
|
if (seconds >= interval.limit) {
|
|
let amount = Math.floor(seconds / interval.limit);
|
|
let text;
|
|
if (amount !== 1) {
|
|
text = interval.plural;
|
|
} else {
|
|
text = interval.singular;
|
|
}
|
|
return `Vor ${amount} ${text}`;
|
|
}
|
|
}
|
|
let text = "Sekunde";
|
|
let amount = Math.floor(seconds);
|
|
if (amount !== 1) {
|
|
text += "n";
|
|
}
|
|
return `Vor ${amount} ${text}`;
|
|
};
|
|
|
|
let includeReplies;
|
|
// max post age in seconds
|
|
let maxAge;
|
|
// below times are in milliseconds
|
|
// duration for slide animations
|
|
let duration;
|
|
// refresh rate
|
|
let refresh;
|
|
// extra cards text
|
|
let extraCards;
|
|
|
|
// fetchConfig fetches the configuration from the config.json file
|
|
const fetchConfig = async function() {
|
|
try {
|
|
const config = await $.getJSON('config.json');
|
|
$('#navbar-brand').text(config.navbarBrandText);
|
|
$('.navbar').css('background-color', config.navbarColor);
|
|
includeReplies = config.includeReplies;
|
|
maxAge = config.maxAge;
|
|
duration = config.duration * 1000;
|
|
refresh = config.refreshDuration * 1000;
|
|
extraCards = config.extraCards;
|
|
return config.defaultServerUrl;
|
|
} catch (error) {
|
|
console.log("Error loading config.json:", error);
|
|
$('#navbar-brand').text("Netzbegrünung Mastowall - gruene.social");
|
|
$('.navbar').css('background-color', "#008939");
|
|
includeReplies = true;
|
|
maxAge = 60 * 60 * 24 * 7;
|
|
duration = 10000;
|
|
refresh = 30000;
|
|
extraCards = [
|
|
"<div><img src='sharepic.png' style='max-width: 100%;max-height: 100%'></div>"
|
|
];
|
|
return "https://gruene.social";
|
|
}
|
|
}
|
|
|
|
// fetchPosts fetches posts from the server using the given hashtag
|
|
const fetchPosts = async function(serverUrl, hashtag) {
|
|
try {
|
|
const posts = await $.get(`${serverUrl}/api/v1/timelines/tag/${hashtag}?limit=20`);
|
|
return posts;
|
|
} catch (error) {
|
|
console.error(`Error loading posts for hashtag #${hashtag}:`, error);
|
|
}
|
|
};
|
|
|
|
// updateTimesOnPage updates the time information displayed for each post
|
|
const updateTimesOnPage = function() {
|
|
$('.card-text a.time').each(function() {
|
|
const timeValue = $(this).attr('data-time');
|
|
if (timeValue === '') return;
|
|
const date = new Date(timeValue);
|
|
const newTimeAgo = timeAgo(secondsAgo(date));
|
|
$(this).text(newTimeAgo);
|
|
});
|
|
};
|
|
|
|
// 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
|
|
const displayPost = function(post) {
|
|
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
|
|
|
|
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">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
|
</div>
|
|
${post.media_attachments[0] ?
|
|
(post.media_attachments[0].url.endsWith('.mp4') ?
|
|
`<video src="${post.media_attachments[0].url}" controls autoplay muted loop></video>` :
|
|
`<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">`) :
|
|
''}
|
|
<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>` : ''}
|
|
<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>
|
|
`;
|
|
|
|
let $card = $(cardHTML);
|
|
$('#wall').prepend($card);
|
|
$('.masonry-grid').masonry('prepended', $card);
|
|
return 1;
|
|
};
|
|
|
|
const processPosts = function(posts) {
|
|
posts = posts.filter((post) => {
|
|
return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1
|
|
});
|
|
|
|
return posts;
|
|
};
|
|
|
|
// updateWall displays all posts
|
|
const updateWall = function(posts) {
|
|
if (!posts || posts.length === 0) return;
|
|
|
|
posts = processPosts(posts);
|
|
|
|
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
|
|
|
let ret = 0
|
|
posts.forEach(post => ret += displayPost(post));
|
|
$('.masonry-grid').masonry('layout');
|
|
return ret;
|
|
};
|
|
|
|
|
|
// updateCarousel
|
|
const updateCarousel = function(slides, posts) {
|
|
if (!posts || posts.length === 0) return;
|
|
|
|
posts = processPosts(posts);
|
|
|
|
posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
|
|
|
// remove slides in carousel
|
|
slides.innerHTML = "";
|
|
var newHTML = ` <!-- No Indicators -->`
|
|
newHTML += `<!-- the slides -->
|
|
<div class="carousel-inner">
|
|
`;
|
|
|
|
let existingCards = [];
|
|
|
|
for( let i = 0; i < posts.length; 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 )*/
|
|
if ( i == 0 ) {
|
|
newHTML += `<div class="carousel-item active" data-interval="${duration}" data-pause="false">`;
|
|
}
|
|
else {
|
|
newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
|
|
}
|
|
const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
|
|
newHTML += `
|
|
<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">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
|
|
</div>
|
|
<hr>
|
|
<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 > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
|
|
${post.media_attachments[0] ?
|
|
(post.media_attachments[0].url.endsWith('.mp4') ?
|
|
`<div class="col-md-6"><video src="${post.media_attachments[0].url}" controls autoplay muted loop class="card-img-bottom" align="center"></video></div>` :
|
|
`<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>`) :
|
|
''}
|
|
|
|
</div>
|
|
<hr>
|
|
<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>
|
|
${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' }
|
|
${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' }
|
|
${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' }
|
|
</small>
|
|
</p>
|
|
</div>
|
|
`;
|
|
newHTML += '</div>';
|
|
}
|
|
for( let i = 0; i < extraCards.length; i++ ) {
|
|
newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
|
|
<div className="card-big">
|
|
<div class="d-flex align-items-center mb-4">
|
|
${extraCards[i]}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
newHTML += '</div>'
|
|
document.getElementById("myCarousel").innerHTML = newHTML;
|
|
};
|
|
|
|
const showCarousel = function() {
|
|
// show popover
|
|
document.getElementById('popover').style.opacity = '1';
|
|
// Activate Carousel
|
|
$('#myCarousel').carousel("cycle");
|
|
}
|
|
|
|
const strip = function(html) {
|
|
let doc = new DOMParser().parseFromString(html, 'text/html');
|
|
return doc.body.textContent || "";
|
|
}
|
|
|
|
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) {
|
|
return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
|
|
}
|
|
|
|
// updateHashtagsOnPage updates the displayed hashtags
|
|
const updateHashtagsOnPage = function(hashtagsArray) {
|
|
$('#hashtag-display').text(hashtagsArray.length > 0 ? hashtagsString(hashtagsArray) : 'No hashtags set');
|
|
};
|
|
|
|
// updateHashtagsOnPage updates the document title by appending the given array of hashtags
|
|
const updateHashtagsInTitle = function(hashtagsArray) {
|
|
const baseTitle = document.title;
|
|
document.title = `${baseTitle} | ${hashtagsString(hashtagsArray)}`;
|
|
}
|
|
|
|
// handleHashtagDisplayClick handles the event when the hashtag display is clicked
|
|
const handleHashtagDisplayClick = function(serverUrl) {
|
|
$('#app-content').addClass('d-none');
|
|
$('#zero-state').removeClass('d-none');
|
|
|
|
const currentHashtags = getUrlParameter('hashtags').split(',');
|
|
if ( currentHashtags = null ) {
|
|
currentHasttags = "netzbegruenung,ldk24,wasjetztzählt".split(',')
|
|
}
|
|
|
|
for (let i = 0; i < currentHashtags.length; i++) {
|
|
$(`#hashtag${i+1}`).val(currentHashtags[i]);
|
|
}
|
|
|
|
$('#serverUrl').val(serverUrl);
|
|
};
|
|
|
|
// handleHashtagFormSubmit handles the submission of the hashtag form
|
|
const handleHashtagFormSubmit = function(e, hashtagsArray) {
|
|
e.preventDefault();
|
|
|
|
let hashtags = [
|
|
$('#hashtag1').val(),
|
|
$('#hashtag2').val(),
|
|
$('#hashtag3').val()
|
|
];
|
|
|
|
hashtags = hashtags.filter(function(hashtag) {
|
|
return hashtag !== '' && /^[\w]+$/.test(hashtag);
|
|
});
|
|
|
|
let serverUrl = $('#serverUrl').val();
|
|
|
|
if (!/^https:\/\/[\w.\-]+\/?$/.test(serverUrl)) {
|
|
alert('Invalid server URL.');
|
|
return;
|
|
}
|
|
|
|
const newUrl = window.location.origin + window.location.pathname + `?hashtags=${hashtags.join(',')}&server=${serverUrl}`;
|
|
|
|
window.location.href = newUrl;
|
|
};
|
|
|
|
// On document ready, the script configures Masonry, handles events, fetches and displays posts
|
|
$(document).ready(async function() {
|
|
const defaultServerUrl = await fetchConfig();
|
|
$('.masonry-grid').masonry({
|
|
itemSelector: '.col-sm-3',
|
|
columnWidth: '.col-sm-3',
|
|
percentPosition: true
|
|
});
|
|
|
|
setInterval(function() {
|
|
$('.masonry-grid').masonry('layout');
|
|
}, refresh);
|
|
|
|
let hashtags = getUrlParameter('hashtags');
|
|
if ( hashtags == '' ) {
|
|
hashtags = "netzbegruenung,ldk24,wasjetztzählt";
|
|
}
|
|
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
|
const serverUrl = getUrlParameter('server') || defaultServerUrl;
|
|
|
|
$('#hashtag-display').on('click', function() {
|
|
handleHashtagDisplayClick(serverUrl);
|
|
});
|
|
|
|
const slides = $('#myCarousel');
|
|
const popover = $('#popover');
|
|
|
|
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
|
|
let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
|
|
|
updateWall(allPosts.flat());
|
|
setTimeout(function() {
|
|
$('.masonry-grid').masonry('layout');
|
|
}, 2000);
|
|
|
|
updateCarousel(slides, allPosts.flat());
|
|
|
|
setTimeout(async function() { showCarousel(); }, duration)
|
|
setInterval(async function() {
|
|
const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
|
let updated = updateWall(newPosts.flat());
|
|
if ( updated > 0 ) {
|
|
updateCarousel(slides, newPosts.flat());
|
|
}
|
|
}, refresh);
|
|
} else {
|
|
$('#zero-state').removeClass('d-none');
|
|
$('#popover').removeClass('popover');
|
|
$('#app-content').addClass('d-none');
|
|
}
|
|
|
|
updateHashtagsOnPage(hashtagsArray);
|
|
updateHashtagsInTitle(hashtagsArray);
|
|
|
|
$('#hashtag-form').on('submit', function(e) {
|
|
handleHashtagFormSubmit(e, hashtagsArray);
|
|
});
|
|
|
|
|
|
updateTimesOnPage();
|
|
setInterval(updateTimesOnPage, 60000);
|
|
});
|