for-pi2 #2
3 changed files with 151 additions and 9 deletions
45
index.html
45
index.html
|
@ -4,10 +4,20 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Netzbegrünung Mastowall</title>
|
<title>Netzbegrünung Mastowall</title>
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
<!-- Bootstrap 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">
|
||||||
|
@ -50,6 +60,34 @@
|
||||||
<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-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>
|
||||||
|
|
||||||
<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>
|
||||||
|
@ -57,10 +95,5 @@
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.7.0.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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
94
script.js
94
script.js
|
@ -100,6 +100,89 @@ const updateWall = function(posts) {
|
||||||
posts.forEach(post => displayPost(post));
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// updateCarousel
|
||||||
|
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));
|
||||||
|
|
||||||
|
// 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>`
|
||||||
|
*/
|
||||||
|
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">';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
newHTML += '<div class="carousel-item">';
|
||||||
|
}
|
||||||
|
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>
|
||||||
|
<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>` : ''}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${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>
|
||||||
|
`;
|
||||||
|
newHTML += '</div>';
|
||||||
|
}
|
||||||
|
newHTML += '</div>'
|
||||||
|
document.getElementById("myCarousel").innerHTML = newHTML;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// 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(' ')}`;
|
||||||
|
@ -168,7 +251,7 @@ $(document).ready(async function() {
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
$('.masonry-grid').masonry('layout');
|
$('.masonry-grid').masonry('layout');
|
||||||
}, 10000);
|
}, 10000);
|
||||||
|
|
||||||
const hashtags = getUrlParameter('hashtags');
|
const hashtags = getUrlParameter('hashtags');
|
||||||
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
const hashtagsArray = hashtags ? hashtags.split(',') : [];
|
||||||
const serverUrl = getUrlParameter('server') || defaultServerUrl;
|
const serverUrl = getUrlParameter('server') || defaultServerUrl;
|
||||||
|
@ -177,9 +260,16 @@ $(document).ready(async function() {
|
||||||
handleHashtagDisplayClick(serverUrl);
|
handleHashtagDisplayClick(serverUrl);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const slides = $('#myCarousel');
|
||||||
|
|
||||||
|
|
||||||
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)));
|
||||||
|
updateCarousel(slides, allSlides.flat());
|
||||||
|
// Activate Carousel
|
||||||
|
slides.carousel("cycle");
|
||||||
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());
|
updateWall(newPosts.flat());
|
||||||
|
@ -189,6 +279,7 @@ $(document).ready(async function() {
|
||||||
$('#app-content').addClass('d-none');
|
$('#app-content').addClass('d-none');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
updateHashtagsOnPage(hashtagsArray);
|
updateHashtagsOnPage(hashtagsArray);
|
||||||
updateHashtagsInTitle(hashtagsArray);
|
updateHashtagsInTitle(hashtagsArray);
|
||||||
|
|
||||||
|
@ -196,6 +287,7 @@ $(document).ready(async function() {
|
||||||
handleHashtagFormSubmit(e, hashtagsArray);
|
handleHashtagFormSubmit(e, hashtagsArray);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
updateTimesOnPage();
|
updateTimesOnPage();
|
||||||
setInterval(updateTimesOnPage, 60000);
|
setInterval(updateTimesOnPage, 60000);
|
||||||
});
|
});
|
||||||
|
|
21
styles.css
21
styles.css
|
@ -3,6 +3,8 @@
|
||||||
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 */
|
||||||
|
@ -63,7 +65,7 @@
|
||||||
/* Custom navbar styles */
|
/* Custom navbar styles */
|
||||||
.navbar {
|
.navbar {
|
||||||
height: 50px; /* reduce the height of the navbar */
|
height: 50px; /* reduce the height of the navbar */
|
||||||
background-color: rgb(227, 6, 19);
|
background-color: rgb(0, 137, 57);
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
top: -10px !important;
|
top: -10px !important;
|
||||||
padding-top: 14px !important;
|
padding-top: 14px !important;
|
||||||
|
@ -129,7 +131,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: rgb(200, 200, 200);
|
background-color: rgb(0, 137, 57);
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -139,3 +141,18 @@ body {
|
||||||
padding-bottom: 2px !important; /* reduce padding-bottom to half */
|
padding-bottom: 2px !important; /* reduce padding-bottom to half */
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
position: fixed;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
max-width: 80%;
|
||||||
|
background-color: rgba(255, 255, 255, .95);
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 0px solid rgba(0, 137, 57, .5);
|
||||||
|
box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
|
||||||
|
border-radius:.8rem;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue