mirror/kirche-im-netz.Startodon-Hub
1
0
Fork 1
mirror of https://codeberg.org/kirche-im-netz/Startodon-Hub.git synced 2025-08-19 00:58:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Laden der Avatare im StarterKit nur bei Consent

Browse source
This commit is contained in:
Alexander Müller 2024-12-29 13:20:41 +01:00
parent a6201d1618
commit d294dba96b
3 changed files with 66 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/utils/recommendations-utils.js
View file

@ -1,5 +1,6 @@
import { fetchProfile } from './profile-utils.js'; import { fetchProfile } from './profile-utils.js';
import { extractHostname, getServerClass } from './instances.js'; import { extractHostname, getServerClass } from './instances.js';
import { checkConsent } from '../components/consentManager.js';
export function createRecommendationPopup(accounts, title, authors, description) { export function createRecommendationPopup(accounts, title, authors, description) {
const template = document.getElementById('popup-template').content.cloneNode(true); const template = document.getElementById('popup-template').content.cloneNode(true);
@ -107,32 +108,41 @@ export function populateAuthorsContainer(authorsContainer, authors) {
return; return;
} }
authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist authorsContainer.innerHTML = ''; // Container leeren
if (authors && authors.length > 0) { 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; const additionalAuthorsCount = authors.length - authorsToShow.length;
authorsToShow.forEach(author => { authorsToShow.forEach(author => {
const authorLink = document.createElement('a'); const authorLink = document.createElement('a');
authorLink.href = author; authorLink.href = author;
authorLink.classList.add('account'); 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(() => { // Consent prüfen
const avatarImage = authorLink.querySelector('.account-avatar'); if (checkConsent()) {
if (avatarImage) { // Consent erteilt - Profilbild laden
authorLink.textContent = ''; fetchProfile(author, { updateElement: authorLink }).then(() => {
authorLink.appendChild(avatarImage); const avatarImage = authorLink.querySelector('.account-avatar');
if (avatarImage) {
authorLink.textContent = '';
authorLink.appendChild(avatarImage);
// Hinzufügen der server-class für den Avatar-Rahmen // Server-Klasse für Avatar hinzufügen
const hostname = extractHostname(author); const hostname = extractHostname(author);
const serverClass = getServerClass(hostname); const serverClass = getServerClass(hostname);
if (serverClass) { if (serverClass) {
avatarImage.classList.add(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); authorsContainer.appendChild(authorLink);
}); });

41
style/elements.css
View file

@ -20,3 +20,44 @@ button.close-popup:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: none; 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;
}

42
style/postwall.css
View file

@ -183,48 +183,6 @@
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 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 */ /* Responsives Verhalten */
@media (max-width: 800px) { @media (max-width: 800px) {
.post { .post {