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.rel = 'noopener noreferrer'; // Sicherheit für externe Links
-            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon'); // Accessibility
+            postElement.target = '_blank';
+            postElement.rel = 'noopener noreferrer';
+            postElement.setAttribute('aria-label', 'Zum Originalpost auf Mastodon');
         
             // Zeitstempel berechnen
-            const postDate = new Date(post.created_at); // Datum des Posts
-            const timeAgo = getTimeAgo(postDate); // Funktion zur Berechnung der Zeitspanne
+            const postDate = new Date(post.created_at);
+            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 avatar = post.account.avatar || 'src/assets/default-avatar.png'; // Fallback-Bild
+            const username = `@${post.account.acct}`;
+            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.style.pointerEvents = 'none'; // Deaktiviert Klickbarkeit
-                link.style.color = 'blue'; // Behält Linkfarbe bei
-                link.style.textDecoration = 'underline'; // Behält Unterstreichung bei
+                link.removeAttribute('href');
+                link.style.pointerEvents = 'none';
+                link.style.color = 'blue';
+                link.style.textDecoration = 'underline';
             });
     
             // Bilder bearbeiten
             const images = tempContainer.querySelectorAll('img');
             images.forEach(img => {
-                img.style.maxHeight = '200px'; // Maximale Höhe festlegen
-                img.style.width = 'auto'; // Automatische Breite für Proportionen
-                img.style.display = 'block'; // Sicherstellen, dass Bilder Blöcke sind
-                img.style.margin = '10px 0'; // Abstand zu Text einfügen
+                img.style.maxHeight = '200px';
+                img.style.width = 'auto';
+                img.style.display = 'block';
+                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.target = '_blank'; // Öffnet in neuem Tab
+    readMoreButton.href = 'https://libori.social/tags/fedikirche';
+    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);
 }