postwall-userConsent-check integriert

src/components/postwall.js

@@ -1,6 +1,15 @@
+import { checkConsent, showConsentPopup, setUserConsent } from '../components/consentManager.js';
+
 export async function loadPostwall() {
     const container = document.getElementById('postswall-container');
 
+    // Überprüfe, ob Consent erteilt wurde
+    if (!checkConsent()) {
+        // Consent nicht erteilt – alternative Kachel anzeigen
+        renderConsentRequest();
+        return; // Beende die Funktion, kein weiterer Datenabruf
+    }
+
     // Mastodon API-URL für Hashtag-Suche
     const apiUrl = 'https://libori.social/api/v1/timelines/tag/fedikirche?limit=20';
 
@@ -30,44 +39,42 @@ export async function loadPostwall() {
             const postElement = document.createElement('a');
             postElement.classList.add('post');
             postElement.href = post.url; // Link zum Originalpost
-            postElement.target = '_blank'; // Link in neuem Tab öffnen
+            postElement.target = '_blank';
-            postElement.rel = 'noopener noreferrer'; // Sicherheit für externe Links
+            postElement.rel = 'noopener noreferrer';
-            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon'); // Accessibility
+            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon');
         
             // Zeitstempel berechnen
-            const postDate = new Date(post.created_at); // Datum des Posts
+            const postDate = new Date(post.created_at);
-            const timeAgo = getTimeAgo(postDate); // Funktion zur Berechnung der Zeitspanne
+            const timeAgo = getTimeAgo(postDate);
     
             let content = post.content || 'Kein Inhalt verfügbar.';
             const author = post.account.display_name || post.account.username;
-            const username = `@${post.account.acct}`; // Adresse hinzufügen (@nutzer@instanz)
+            const username = `@${post.account.acct}`;
-            const avatar = post.account.avatar || 'src/assets/default-avatar.png'; // Fallback-Bild
+            const avatar = post.account.avatar || 'src/assets/default-avatar.png';
         
-            // Alle anderen Links deaktivieren
+            // Links deaktivieren
             const tempContainer = document.createElement('div');
             tempContainer.innerHTML = content;
     
-            // Links deaktivieren
             const links = tempContainer.querySelectorAll('a');
             links.forEach(link => {
-                link.removeAttribute('href'); // Entfernt den Link
+                link.removeAttribute('href');
-                link.style.pointerEvents = 'none'; // Deaktiviert Klickbarkeit
+                link.style.pointerEvents = 'none';
-                link.style.color = 'blue'; // Behält Linkfarbe bei
+                link.style.color = 'blue';
-                link.style.textDecoration = 'underline'; // Behält Unterstreichung bei
+                link.style.textDecoration = 'underline';
             });
     
             // Bilder bearbeiten
             const images = tempContainer.querySelectorAll('img');
             images.forEach(img => {
-                img.style.maxHeight = '200px'; // Maximale Höhe festlegen
+                img.style.maxHeight = '200px';
-                img.style.width = 'auto'; // Automatische Breite für Proportionen
+                img.style.width = 'auto';
-                img.style.display = 'block'; // Sicherstellen, dass Bilder Blöcke sind
+                img.style.display = 'block';
-                img.style.margin = '10px 0'; // Abstand zu Text einfügen
+                img.style.margin = '10px 0';
             });
     
             content = tempContainer.innerHTML;
     
-            // Medien-Anhänge (Bilder, Videos, etc.) hinzufügen
             const mediaAttachments = post.media_attachments || [];
             let mediaHTML = '';
             mediaAttachments.forEach(media => {
@@ -78,7 +85,6 @@ export async function loadPostwall() {
                 }
             });
     
-            // Post zusammenbauen
             postElement.innerHTML = `
                 <div class="post-header">
                     <img src="${avatar}" alt="${author}" class="avatar">
@@ -95,47 +101,86 @@ export async function loadPostwall() {
             container.appendChild(postElement);
         });
     }
-    
+
-    
-    
     // Lade die Posts
     fetchPosts();
 }
 
+// Alternative Kachel anzeigen, wenn kein Consent erteilt wurde
+function renderConsentRequest() {
+    const container = document.getElementById('postswall-container');
+    container.innerHTML = ''; // Vorherige Inhalte leeren
+
+    const consentCard = document.createElement('div');
+    consentCard.classList.add('post'); // Verwendet die Post-Klasse für Konsistenz
+
+    consentCard.innerHTML = `
+        <div class="post-header">
+            <!-- Skeleton-Loader für Avatar -->
+            <div class="skeleton avatar-skeleton"></div>
+
+            <!-- Skeleton-Loader für Autor und Username -->
+            <div class="post-author">
+                <div class="skeleton skeleton-text skeleton-text-name"></div>
+                <div class="skeleton skeleton-text skeleton-text-username"></div>
+            </div>
+        </div>
+
+        <div class="post-content">
+            <p>Du musst zuerst zustimmen, um Inhalte anzuzeigen.</p>
+            <div class="consent-buttons">
+                <button id="open-consent-popup" class="btn">Datenschutzeinstellungen öffnen</button>
+                <a href="https://libori.social/tags/fedikirche" target="_blank" rel="noopener noreferrer">
+                    <button class="btn">Beiträge auf Mastodon ansehen</button>
+                </a>
+            </div>
+        </div>
+    `;
+
+    container.appendChild(consentCard);
+
+    // Event-Listener für Button zum erneuten Anzeigen des Consent-Popups
+    document.getElementById('open-consent-popup').addEventListener('click', () => {
+        showConsentPopup(
+            () => {
+                setUserConsent(true); // Zustimmung speichern
+                loadPostwall(); // Nachträglich Posts laden
+            },
+            () => {
+                setUserConsent(false); // Ablehnung speichern
+                console.log('Consent abgelehnt');
+            }
+        );
+    });
+}
+
+// Zeitberechnung für Posts
 function getTimeAgo(date) {
     const now = new Date();
     const secondsAgo = Math.floor((now - date) / 1000);
 
     if (secondsAgo < 60) {
-        // Weniger als 60 Sekunden
         return `${secondsAgo} Sek.`;
     } else if (secondsAgo < 3600) {
-        // Weniger als 60 Minuten
         const minutes = Math.floor(secondsAgo / 60);
         return `${minutes} Min.`;
     } else if (secondsAgo < 86400) {
-        // Weniger als 24 Stunden
         const hours = Math.floor(secondsAgo / 3600);
         return `${hours} Std.`;
     } else {
-        // Mehr als 24 Stunden (Tage zählen)
         const days = Math.floor(secondsAgo / 86400);
         return `${days} T.`;
     }
 }
 
-// Funktion zum Erstellen des "Lese weiter"-Buttons
+// "Lese weiter"-Button hinzufügen
 function addReadMoreButton() {
     const container = document.getElementById('postswall-container');
-    
-    // Button erstellen
     const readMoreButton = document.createElement('a');
-    readMoreButton.href = 'https://libori.social/tags/fedikirche'; // Link zur Mastodon-Instanz mit Hashtag
+    readMoreButton.href = 'https://libori.social/tags/fedikirche';
-    readMoreButton.target = '_blank'; // Öffnet in neuem Tab
+    readMoreButton.target = '_blank';
     readMoreButton.rel = 'noopener noreferrer';
-    readMoreButton.classList.add('read-more-button'); // Klasse für CSS-Styling
+    readMoreButton.classList.add('read-more-button');
     readMoreButton.innerText = 'weiterlesen';
-
-    // Button zum Container hinzufügen
     container.appendChild(readMoreButton);
 }

style/postwall.css

@@ -183,6 +183,47 @@
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+/* Allgemeine Skeleton-Styling */
+.skeleton {
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-color: #e0e0e0;
+    }
+    50% {
+        background-color: #f0f0f0;
+    }
+    100% {
+        background-color: #e0e0e0;
+    }
+}
+
+/* Avatar-Skeleton */
+.avatar-skeleton {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+/* Skeleton für Autor und Username */
+.skeleton-text {
+    height: 12px;
+    margin-bottom: 6px;
+}
+
+.skeleton-text-name {
+    width: 120px;
+}
+
+.skeleton-text-username {
+    width: 80px;
+}
+
 
 /* Responsives Verhalten */
 @media (max-width: 800px) {