Compare commits
1 commit
Author | SHA1 | Date | |
---|---|---|---|
ae3cd2e856 |
10 changed files with 101 additions and 342 deletions
|
@ -1,10 +1,9 @@
|
||||||
# Mastowall 1.1
|
# Mastowall 1.1
|
||||||
|
|
||||||
Forked from [https://github.com/rstockm/mastowall](https://github.com/rstockm/mastowall)
|
|
||||||
|
|
||||||
Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It was written entirely by [ChatGPT4](https://openai.com/product/gpt-4), guided only by text prompts.
|
Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It was written entirely by [ChatGPT4](https://openai.com/product/gpt-4), guided only by text prompts.
|
||||||
|
|
||||||
<img width="1348" alt="image" src="https://git.verdigado.com/NB-Public/mastowall/raw/branch/main/screenshot.jpg">
|
<img width="1348" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/7060536e-4847-4e38-801e-3c0312b8b194">
|
||||||
|
|
||||||
|
|
||||||
Try it live: [Mastowall for BDK23](https://tretkowski.de/mastowall/?hashtags=bdk23,netzbegruenung&server=https://gruene.social)
|
Try it live: [Mastowall for BDK23](https://tretkowski.de/mastowall/?hashtags=bdk23,netzbegruenung&server=https://gruene.social)
|
||||||
|
|
||||||
|
|
|
@ -1,16 +0,0 @@
|
||||||
## Additions made by SSB for BDK23
|
|
||||||
|
|
||||||
# added carousel for posts
|
|
||||||
|
|
||||||
## Important
|
|
||||||
|
|
||||||
install color emojis:
|
|
||||||
sudo apt-get install fonts-noto-color-emoji
|
|
||||||
|
|
||||||
install xdotool to move the mouse to bottom right (does not work with Bookworm/Wayland)
|
|
||||||
sudo apt-get install xdotool -y
|
|
||||||
|
|
||||||
run in kiosk mode:
|
|
||||||
chromium-browser --kiosk index.html
|
|
||||||
|
|
||||||
or use the remote URL instead of index.html
|
|
|
@ -1,12 +1,6 @@
|
||||||
{
|
{
|
||||||
"navbarBrandText": "Netzbegrünung Mastowall - gruene.social",
|
"navbarBrandText": "Netzbegrünung Mastowall",
|
||||||
"defaultServerUrl": "https://gruene.social",
|
"defaultServerUrl": "https://gruene.social",
|
||||||
"navbarColor": "#008939",
|
"navbarColor": "#008939",
|
||||||
"duration": 10,
|
|
||||||
"refreshDuration": 30,
|
|
||||||
"maxAge": 604800,
|
|
||||||
// "extraCards": [
|
|
||||||
// "<img src='sharepic.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
|
|
||||||
// ],
|
|
||||||
"includeReplies": true
|
"includeReplies": true
|
||||||
}
|
}
|
||||||
|
|
30
index.html
30
index.html
|
@ -2,22 +2,12 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Netzbegrünung Mastowall</title>
|
<title>Netzbegrünung Mastowall</title>
|
||||||
<!-- Bootstrap CSS -->
|
<link rel="stylesheet" href="bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
<link rel="apple-touch-icon" href="mastowall-favicon.png">
|
<link rel="apple-touch-icon" href="mastowall-favicon.png">
|
||||||
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
<link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
|
|
||||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-light">
|
<nav class="navbar navbar-light">
|
||||||
|
@ -38,7 +28,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="hashtag2">Hashtag 2:</label>
|
<label for="hashtag2">Hashtag 2:</label>
|
||||||
<input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="lptsh">
|
<input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="bdk23">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="hashtag3">Hashtag 3:</label>
|
||||||
|
<input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="serverUrl">Server:</label>
|
<label for="serverUrl">Server:</label>
|
||||||
|
@ -56,11 +50,6 @@
|
||||||
<div class="row masonry-grid" id="wall"></div>
|
<div class="row masonry-grid" id="wall"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="popover" class="popover">
|
|
||||||
<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">
|
<footer class="footer text-center py-4 mt-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a href="https://netzbegruenung.de/" target="_blank">Netzbegrünung</a>
|
<a href="https://netzbegruenung.de/" target="_blank">Netzbegrünung</a>
|
||||||
|
@ -68,5 +57,10 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
||||||
|
<script src="masonry.pkgd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
[Desktop Entry]
|
|
||||||
Type=Application
|
|
||||||
Name=MastoWall Autostart
|
|
||||||
Comment=Starten der MastoWall zur BDK23
|
|
||||||
NoDisplay=false
|
|
||||||
Exec=sh -c 'cd /home/ssb/Documents/mastowall && xdotool mousemove 1920 1080 && sleep 5 && chromium-browser --kiosk index.html'
|
|
BIN
screenshot.jpg
BIN
screenshot.jpg
Binary file not shown.
Before Width: | Height: | Size: 410 KiB |
250
script.js
250
script.js
|
@ -1,12 +1,13 @@
|
||||||
// The existingPosts array is used to track already displayed posts
|
// The existingPosts array is used to track already displayed posts
|
||||||
let existingPosts = [];
|
let existingPosts = [];
|
||||||
|
|
||||||
|
var cardIterator = 0;
|
||||||
|
|
||||||
// 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(/[\]]/, '\\]');
|
||||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||||
var results = regex.exec(location.search);
|
var results = regex.exec(location.search);
|
||||||
console.log(results)
|
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,44 +18,23 @@ const secondsAgo = date => Math.floor((new Date() - date) / 1000);
|
||||||
const timeAgo = function(seconds) {
|
const timeAgo = function(seconds) {
|
||||||
// An array of intervals for years, months, days, hours, and minutes.
|
// An array of intervals for years, months, days, hours, and minutes.
|
||||||
const intervals = [
|
const intervals = [
|
||||||
{ limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
|
{ limit: 31536000, text: 'Jahren' },
|
||||||
{ limit: 2592000, singular: 'Monat', plural: 'Monaten' },
|
{ limit: 2592000, text: 'Monaten' },
|
||||||
{ limit: 86400, singular: 'Tag', plural: 'Tagen' },
|
{ limit: 86400, text: 'Tagen' },
|
||||||
{ limit: 3600, singular: 'Stunde', plural: 'Stunden' },
|
{ limit: 3600, text: 'Stunden' },
|
||||||
{ limit: 60, singular: 'Minute', plural: 'Minuten' }
|
{ limit: 60, text: 'Minuten' }
|
||||||
];
|
];
|
||||||
|
|
||||||
// Loop through the intervals to find which one is the best fit.
|
// Loop through the intervals to find which one is the best fit.
|
||||||
for (let interval of intervals) {
|
for (let interval of intervals) {
|
||||||
if (seconds >= interval.limit) {
|
if (seconds >= interval.limit) {
|
||||||
let amount = Math.floor(seconds / interval.limit);
|
return "Vor " + Math.floor(seconds / interval.limit) + ` ${interval.text}`;
|
||||||
let text;
|
|
||||||
if (amount !== 1) {
|
|
||||||
text = interval.plural;
|
|
||||||
} else {
|
|
||||||
text = interval.singular;
|
|
||||||
}
|
|
||||||
return `Vor ${amount} ${text}`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let text = "Sekunde";
|
return "Vor " + Math.floor(seconds) + " Sekunden";
|
||||||
let amount = Math.floor(seconds);
|
|
||||||
if (amount !== 1) {
|
|
||||||
text += "n";
|
|
||||||
}
|
|
||||||
return `Vor ${amount} ${text}`;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let includeReplies;
|
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
|
// fetchConfig fetches the configuration from the config.json file
|
||||||
const fetchConfig = async function() {
|
const fetchConfig = async function() {
|
||||||
|
@ -63,23 +43,9 @@ 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;
|
|
||||||
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.error("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";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -95,44 +61,31 @@ 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.time').each(function() {
|
$('.card-text a').each(function() {
|
||||||
const timeValue = $(this).attr('data-time');
|
const date = new Date($(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);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 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
|
// 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 0;
|
if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
|
||||||
|
|
||||||
existingPosts.push(post.id);
|
existingPosts.push(post.id);
|
||||||
|
|
||||||
let cardHTML = `
|
let cardHTML = `
|
||||||
<div class="col-sm-3">
|
<div class="col-sm-2">
|
||||||
<div class="card m-2 p-2">
|
<div class="card m-2 p-2">
|
||||||
<div class="d-flex align-items-center mb-2">
|
<div class="d-flex align-items-center mb-2">
|
||||||
<img src="${post.account.avatar}" class="avatar-img rounded-circle mr-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>
|
<p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
|
||||||
</div>
|
</div>
|
||||||
${post.media_attachments[0] ?
|
<div class="row">
|
||||||
(post.media_attachments[0].url.endsWith('.mp4') ?
|
${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>`}
|
||||||
`<video src="${post.media_attachments[0].url}" controls autoplay muted loop></video>` :
|
${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
|
||||||
`<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">`) :
|
|
||||||
''}
|
</div>
|
||||||
<p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</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>
|
||||||
${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>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -140,123 +93,16 @@ 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
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
|
// 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 = processPosts(posts);
|
|
||||||
|
|
||||||
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;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// 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
|
// hashtagsString returns a single string based on the given array of hashtags
|
||||||
const hashtagsString = function(hashtagsArray) {
|
const hashtagsString = function(hashtagsArray) {
|
||||||
return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
|
return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
|
||||||
|
@ -279,9 +125,6 @@ const handleHashtagDisplayClick = function(serverUrl) {
|
||||||
$('#zero-state').removeClass('d-none');
|
$('#zero-state').removeClass('d-none');
|
||||||
|
|
||||||
const currentHashtags = getUrlParameter('hashtags').split(',');
|
const currentHashtags = getUrlParameter('hashtags').split(',');
|
||||||
if ( currentHashtags = null ) {
|
|
||||||
currentHasttags = "netzbegruenung,lpt24".split(',')
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < currentHashtags.length; i++) {
|
for (let i = 0; i < currentHashtags.length; i++) {
|
||||||
$(`#hashtag${i+1}`).val(currentHashtags[i]);
|
$(`#hashtag${i+1}`).val(currentHashtags[i]);
|
||||||
|
@ -316,6 +159,11 @@ const handleHashtagFormSubmit = function(e, hashtagsArray) {
|
||||||
window.location.href = newUrl;
|
window.location.href = newUrl;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// make singe card bigger by switching class
|
||||||
|
const toggleSize = function(child,i) {
|
||||||
|
console.log( child )
|
||||||
|
}
|
||||||
|
|
||||||
// On document ready, the script configures Masonry, handles events, fetches and displays posts
|
// On document ready, the script configures Masonry, handles events, fetches and displays posts
|
||||||
$(document).ready(async function() {
|
$(document).ready(async function() {
|
||||||
const defaultServerUrl = await fetchConfig();
|
const defaultServerUrl = await fetchConfig();
|
||||||
|
@ -327,12 +175,9 @@ $(document).ready(async function() {
|
||||||
|
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
$('.masonry-grid').masonry('layout');
|
$('.masonry-grid').masonry('layout');
|
||||||
}, refresh);
|
}, 1000);
|
||||||
|
|
||||||
let hashtags = getUrlParameter('hashtags');
|
const hashtags = getUrlParameter('hashtags');
|
||||||
if ( hashtags == '' ) {
|
|
||||||
hashtags = "netzbegruenung,lptsh,wasjetztzählt";
|
|
||||||
}
|
|
||||||
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
||||||
const serverUrl = getUrlParameter('server') || defaultServerUrl;
|
const serverUrl = getUrlParameter('server') || defaultServerUrl;
|
||||||
|
|
||||||
|
@ -340,30 +185,28 @@ $(document).ready(async function() {
|
||||||
handleHashtagDisplayClick(serverUrl);
|
handleHashtagDisplayClick(serverUrl);
|
||||||
});
|
});
|
||||||
|
|
||||||
const slides = $('#myCarousel');
|
|
||||||
const popover = $('#popover');
|
|
||||||
|
|
||||||
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
|
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
|
||||||
let 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());
|
||||||
setTimeout(function() {
|
|
||||||
$('.masonry-grid').masonry('layout');
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
updateCarousel(slides, allPosts.flat());
|
|
||||||
|
|
||||||
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)));
|
||||||
let updated = updateWall(newPosts.flat());
|
updateWall(newPosts.flat());
|
||||||
if ( updated > 0 ) {
|
}, 10000);
|
||||||
updateCarousel(slides, newPosts.flat());
|
setInterval(function() {
|
||||||
}
|
var mason = $('.masonry-grid').data('masonry')
|
||||||
}, refresh);
|
//console.log( cardIterator )
|
||||||
|
|
||||||
|
mason.element.children[cardIterator].classList.value = 'col-sm-2'
|
||||||
|
//mason.element.children[cardIterator].children[0].classList.toggle( '' )
|
||||||
|
//console.log( mason.element.children[cardIterator].classList )
|
||||||
|
|
||||||
|
cardIterator++
|
||||||
|
if ( cardIterator >= mason.element.childNodes.length )
|
||||||
|
cardIterator = 0
|
||||||
|
mason.element.children[cardIterator].classList.value = 'col-big'
|
||||||
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
$('#zero-state').removeClass('d-none');
|
$('#zero-state').removeClass('d-none');
|
||||||
$('#popover').removeClass('popover');
|
|
||||||
$('#app-content').addClass('d-none');
|
$('#app-content').addClass('d-none');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -374,7 +217,6 @@ $(document).ready(async function() {
|
||||||
handleHashtagFormSubmit(e, hashtagsArray);
|
handleHashtagFormSubmit(e, hashtagsArray);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
updateTimesOnPage();
|
updateTimesOnPage();
|
||||||
setInterval(updateTimesOnPage, 60000);
|
setInterval(updateTimesOnPage, 60000);
|
||||||
});
|
});
|
||||||
|
|
BIN
sharepic.jpg
BIN
sharepic.jpg
Binary file not shown.
Before Width: | Height: | Size: 129 KiB |
BIN
sharepic.png
BIN
sharepic.png
Binary file not shown.
Before Width: | Height: | Size: 141 KiB |
128
styles.css
128
styles.css
|
@ -1,18 +1,14 @@
|
||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
/* Add some custom CSS for the cards */
|
/* Add some custom CSS for the cards */
|
||||||
.card {
|
.card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
|
||||||
background-color: rgb(240,255,240);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Position the avatar and username in the top left of the card */
|
/* Position the avatar and username in the top left of the card */
|
||||||
.card-avatar {
|
.card-avatar {
|
||||||
height: 50px;
|
height: 80px;
|
||||||
width: 50px;
|
width: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
|
@ -48,16 +44,11 @@
|
||||||
|
|
||||||
.card-text {
|
.card-text {
|
||||||
margin-bottom: 1px !important;
|
margin-bottom: 1px !important;
|
||||||
}
|
text-align: left;
|
||||||
|
|
||||||
.carousel .card-text {
|
|
||||||
font-size: 1.6em;
|
|
||||||
overflow: hidden;
|
|
||||||
max-height: 50vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
font-size: 0.9em; /* adjust this value to get the desired text size */
|
font-size: 1.5em; /* adjust this value to get the desired text size */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Remove indent of URLs */
|
/* Remove indent of URLs */
|
||||||
|
@ -72,8 +63,8 @@
|
||||||
|
|
||||||
/* Custom navbar styles */
|
/* Custom navbar styles */
|
||||||
.navbar {
|
.navbar {
|
||||||
min-height: 50px; /* reduce the height of the navbar */
|
height: 50px; /* reduce the height of the navbar */
|
||||||
background-color: rgb(0, 137, 57);
|
background-color: rgb(227, 6, 19);
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
top: -10px !important;
|
top: -10px !important;
|
||||||
padding-top: 14px !important;
|
padding-top: 14px !important;
|
||||||
|
@ -82,13 +73,13 @@
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
||||||
margin: 0 auto; /* center the brand name */
|
margin: 0 auto; /* center the brand name */
|
||||||
font-size: 1.8em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-info {
|
.navbar-info {
|
||||||
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
||||||
margin: 0 auto; /* center the brand name */
|
margin: 0 auto; /* center the brand name */
|
||||||
font-size: 2.4em;
|
font-size: 1.2em;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -134,28 +125,12 @@ body {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-img-big {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-name {
|
|
||||||
font-size:2em;
|
|
||||||
font-weight:600;
|
|
||||||
padding-top:0.3em
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-weight: normal;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 2000px !important;
|
max-width: 2000px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: rgb(0, 137, 57);
|
background-color: rgb(200, 200, 200);
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -166,65 +141,42 @@ body {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover {
|
.col-sm-2 {
|
||||||
position: fixed;
|
/*-ms-flex: 0 0 99%;*/
|
||||||
top: 10%;
|
/*flex: 0 0 99%;*/
|
||||||
left: 10%;
|
/*width: 99%;*/
|
||||||
width: 80%;
|
/*max-width: 99%;*/
|
||||||
height: 80%;
|
/*height: 80%;*/
|
||||||
max-height: 80%;
|
/*max-height: 80%;*/
|
||||||
max-width: 80%;
|
position: absolute;
|
||||||
background-color: rgba(255, 255, 255, .95);
|
display: block
|
||||||
background-clip: padding-box;
|
top: 0;
|
||||||
border: 0px solid rgba(0, 137, 57, .5);
|
left: 0;
|
||||||
box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
|
width: 0;
|
||||||
border-radius:.8rem;
|
height: 0;
|
||||||
opacity: 0;
|
visibility: hidden
|
||||||
transition: opacity 0.5s linear;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-big {
|
.col-big {
|
||||||
font-size: 1.8em;
|
/*-ms-flex: 0 0 99%;*/
|
||||||
font-weight: 400;
|
/*flex: 0 0 99%;*/
|
||||||
margin-top: 20px !important;
|
/*width: 99%;*/
|
||||||
margin-left: 40px !important;
|
/*max-width: 99%;*/
|
||||||
margin-right: 40px !important;
|
/*height: 80%;*/
|
||||||
margin-bottom: 20px !important;
|
/*max-height: 80%;*/
|
||||||
|
/*z-index: 2;*/
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 10;
|
||||||
|
left: 10;
|
||||||
|
width: 100%;
|
||||||
|
height: 400;
|
||||||
|
transition: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-bottom {
|
.card-img-bottom {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
max-height: 500px;
|
max-height: 400px;
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
aspect-ratio: auto !important;
|
|
||||||
border-top-left-radius: calc(.25rem - 1px);
|
border-top-left-radius: calc(.25rem - 1px);
|
||||||
border-top-right-radius:calc(.25rem - 1px);
|
border-top-right-radius:calc(.25rem - 1px)
|
||||||
margin-top: 0px !important;
|
|
||||||
margin-bottom: 10px !important;
|
|
||||||
align-items: center;
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-muted {
|
|
||||||
color:#6c757d !important;
|
|
||||||
font-size: 1em;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer .text-muted {
|
|
||||||
color: rgba(255, 255, 255, 0.8) !important;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
color: rgba(255, 255, 255, 0.8) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji {
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
Loading…
Reference in a new issue