diff --git a/src/utils/recommendations-utils.js b/src/utils/recommendations-utils.js index 5c33403..31c6efb 100644 --- a/src/utils/recommendations-utils.js +++ b/src/utils/recommendations-utils.js @@ -1,5 +1,6 @@ import { fetchProfile } from './profile-utils.js'; import { extractHostname, getServerClass } from './instances.js'; +import { checkConsent } from '../components/consentManager.js'; export function createRecommendationPopup(accounts, title, authors, description) { const template = document.getElementById('popup-template').content.cloneNode(true); @@ -107,32 +108,41 @@ export function populateAuthorsContainer(authorsContainer, authors) { return; } - authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist + authorsContainer.innerHTML = ''; // Container leeren if (authors && authors.length > 0) { - const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren + const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren anzeigen const additionalAuthorsCount = authors.length - authorsToShow.length; authorsToShow.forEach(author => { const authorLink = document.createElement('a'); authorLink.href = author; authorLink.classList.add('account'); - authorLink.target = '_blank'; // Damit die Links ein neues Fenster öffnen + authorLink.target = '_blank'; // Link öffnet neues Fenster - fetchProfile(author, { updateElement: authorLink }).then(() => { - const avatarImage = authorLink.querySelector('.account-avatar'); - if (avatarImage) { - authorLink.textContent = ''; - authorLink.appendChild(avatarImage); + // Consent prüfen + if (checkConsent()) { + // Consent erteilt - Profilbild laden + fetchProfile(author, { updateElement: authorLink }).then(() => { + const avatarImage = authorLink.querySelector('.account-avatar'); + if (avatarImage) { + authorLink.textContent = ''; + authorLink.appendChild(avatarImage); - // Hinzufügen der server-class für den Avatar-Rahmen - const hostname = extractHostname(author); - const serverClass = getServerClass(hostname); - if (serverClass) { - avatarImage.classList.add(serverClass); + // Server-Klasse für Avatar hinzufügen + const hostname = extractHostname(author); + const serverClass = getServerClass(hostname); + if (serverClass) { + avatarImage.classList.add(serverClass); + } } - } - }); + }); + } else { + // Kein Consent – Skeleton-Loader anzeigen + const skeletonAvatar = document.createElement('div'); + skeletonAvatar.classList.add('skeleton', 'avatar-skeleton', 'account-avatar'); + authorLink.appendChild(skeletonAvatar); + } authorsContainer.appendChild(authorLink); }); diff --git a/style/elements.css b/style/elements.css index 0dabf96..83b9027 100644 --- a/style/elements.css +++ b/style/elements.css @@ -19,4 +19,45 @@ button.close-popup:hover { background-color: rgb(255, 99, 71); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transform: none; +} + +/* 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; } \ No newline at end of file diff --git a/style/postwall.css b/style/postwall.css index 3b5bdb7..3ff9c2e 100644 --- a/style/postwall.css +++ b/style/postwall.css @@ -183,48 +183,6 @@ 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) { .post {