From 42f41cc3600313511d335b9826f0e17a9e322781 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt-Bilkenroth <ssb@mac.com>
Date: Fri, 10 Nov 2023 17:16:31 +0100
Subject: [PATCH] new attempts

---
 index.html | 45 ++++++++++++++++++++++----
 script.js  | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 styles.css | 21 ++++++++++--
 3 files changed, 151 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 8be791c..7d687a4 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <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="apple-touch-icon" href="mastowall-favicon.png">
     <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>
 <body>
     <nav class="navbar navbar-light">
@@ -50,6 +60,34 @@
         <div class="row masonry-grid" id="wall"></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">
       <div class="container">
           <a href="https://netzbegruenung.de/" target="_blank">Netzbegrünung</a>
@@ -57,10 +95,5 @@
       </div>
     </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>
 </html>
diff --git a/script.js b/script.js
index 566c234..6e89d85 100644
--- a/script.js
+++ b/script.js
@@ -100,6 +100,89 @@ const updateWall = function(posts) {
     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
 const hashtagsString = function(hashtagsArray) {
   return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
@@ -168,7 +251,7 @@ $(document).ready(async function() {
     setInterval(function() {
         $('.masonry-grid').masonry('layout');
     }, 10000);
-
+    
     const hashtags = getUrlParameter('hashtags');
     const hashtagsArray = hashtags ? hashtags.split(',') : [];
     const serverUrl = getUrlParameter('server') || defaultServerUrl;
@@ -177,9 +260,16 @@ $(document).ready(async function() {
         handleHashtagDisplayClick(serverUrl);
     });
 
+    const slides = $('#myCarousel');
+
+
     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");
         setInterval(async function() {
             const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
             updateWall(newPosts.flat());
@@ -189,6 +279,7 @@ $(document).ready(async function() {
         $('#app-content').addClass('d-none');
     }
 
+
     updateHashtagsOnPage(hashtagsArray);
     updateHashtagsInTitle(hashtagsArray);
 
@@ -196,6 +287,7 @@ $(document).ready(async function() {
         handleHashtagFormSubmit(e, hashtagsArray);
     });
 
+
     updateTimesOnPage();
     setInterval(updateTimesOnPage, 60000);
 });
diff --git a/styles.css b/styles.css
index c5fcc0a..89eb4bc 100644
--- a/styles.css
+++ b/styles.css
@@ -3,6 +3,8 @@
   margin-bottom: 20px;
   border-radius: 10px;
   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 */
@@ -63,7 +65,7 @@
 /* Custom navbar styles */
 .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;
   top: -10px !important;
   padding-top: 14px !important;
@@ -129,7 +131,7 @@ body {
   }
 
 .footer {
-    background-color: rgb(200, 200, 200);
+    background-color: rgb(0, 137, 57);
     color: #f2f2f2;
     position: fixed;
     left: 0;
@@ -139,3 +141,18 @@ body {
     padding-bottom: 2px !important; /* reduce padding-bottom to half */
     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;
+}
