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

mehr Infos im Popup (WIP --> CSS fehlt noch)

Browse source
This commit is contained in:
Alexander Müller 2024-12-19 22:38:21 +01:00
parent 75bebc50a7
commit 2f7c6865cd
4 changed files with 87 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/main.js
View file

@ -2,7 +2,6 @@ import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-
import { seededShuffleChildren } from './utils/shuffle-utils.js';
import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js';
let userConsent = null;
export { userConsent };
@ -10,14 +9,13 @@ async function loadTemplates() {
const response = await fetch('src/template/template.html');
const templateHTML = await response.text();
// Füge die Templates in das DOM ein
const templateContainer = document.createElement('div');
templateContainer.innerHTML = templateHTML;
document.body.appendChild(templateContainer);
}
document.addEventListener('DOMContentLoaded', async function () {
await loadTemplates(); // Templates laden
await loadTemplates();
initializeCreateStarterKitPopup();
@ -25,31 +23,26 @@ document.addEventListener('DOMContentLoaded', async function () {
const shuffleContainers = document.querySelectorAll('.shuffle-container');
const seed = Date.now();
// Lade die Haupt-Konfigurationsdatei
fetch('config.json')
.then(response => response.json())
.then(config => {
const starterkitFiles = config.starterkits;
// Lade alle StarterKit-Dateien
return Promise.all(
starterkitFiles.map(file => fetch(file).then(res => res.json()))
);
})
.then(starterkits => {
// Verarbeite die geladenen StarterKits
starterkits.forEach(kit => {
const kitElement = createStarterKitElement(kit);
container.appendChild(kitElement);
});
// Shuffle-Logik anwenden
shuffleContainers.forEach(container => {
seededShuffleChildren(container, seed);
});
// Zusätzliche Funktionalität für StarterKits hinzufügen
enhanceStarterKits();
})
.catch(error => console.error('Fehler beim Laden der StarterKits:', error));
});
});

13
src/template/template.html
View file

@ -24,6 +24,19 @@
<button class="close-popup">×</button>
<div class="recommendation-popup-header">
<h3></h3>
<p></p>
<div class="starterkit-info">
<div class="profile-count">
<span class="profile-line1">Accounts</span><br>
<span class="profile-line2"></span>
</div>
<div class="autor">
<span class="created-by">created by</span>
<div class="authors-container">
<a class="account" target="_blank"></a>
</div>
</div>
</div>
</div>
<div id="account-list" class="recommendation-popup-body"></div>
<div class="loading-spinner" id="loading-spinner"></div>

66
src/utils/popup-utils.js
View file

@ -1,11 +1,28 @@
import { fetchProfile } from './profile-utils.js';
import { extractHostname, getServerClass } from './instances.js';
export function createRecommendationPopup(accounts, title) {
export function createRecommendationPopup(accounts, title, authors, description) {
const template = document.getElementById('popup-template').content.cloneNode(true);
const popup = template.querySelector('.recommendation-popup');
popup.querySelector('h3').textContent = title;
// Beschreibung hinzufügen
const descriptionElement = popup.querySelector('.recommendation-popup-header p');
if (descriptionElement) {
descriptionElement.textContent = description;
} else {
console.warn('Kein Element für die Beschreibung im Popup-Template gefunden.');
}
// Zeige die Anzahl der Accounts
const profileCount = popup.querySelector('.profile-line2');
profileCount.textContent = `${accounts.length}`;
// Autoren hinzufügen mit der ausgelagerten Funktion
const authorsContainer = popup.querySelector('.authors-container');
populateAuthorsContainer(authorsContainer, authors);
const closeButton = popup.querySelector('.close-popup');
closeButton.addEventListener('click', () => popup.remove());
@ -58,3 +75,50 @@ export function createRecommendationPopup(accounts, title) {
return popup;
}
export function populateAuthorsContainer(authorsContainer, authors) {
if (!authorsContainer) {
console.error('Fehlendes Element: .authors-container. Bitte prüfen!');
return;
}
authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist
if (authors && authors.length > 0) {
const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren
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
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);
}
}
});
authorsContainer.appendChild(authorLink);
});
// Hinweis auf zusätzliche Autoren
if (additionalAuthorsCount > 0) {
const additionalAuthorsText = document.createElement('span');
additionalAuthorsText.classList.add('additional-authors');
additionalAuthorsText.textContent = `+ ${additionalAuthorsCount}`;
authorsContainer.appendChild(additionalAuthorsText);
}
}
}

48
src/utils/starterkit-utils.js
View file

@ -1,5 +1,5 @@
import { fetchProfile } from './profile-utils.js';
import { createRecommendationPopup } from './popup-utils.js';
import { createRecommendationPopup, populateAuthorsContainer } from './popup-utils.js';
import { getServerClass, extractHostname } from './instances.js';
import { showConsentPopup, getUserConsent, setUserConsent } from './consent-utils.js';
@ -15,51 +15,14 @@ export function createStarterKitElement(kit) {
const profileCount = kitElement.querySelector('.profile-count');
profileCount.querySelector('.profile-line2').textContent = `${kit.accounts.length}`;
// Hinzufügen der Autoren mit 'created by'
// Hinzufügen der Autoren mit 'created by' über die neue Funktion
const authorsContainer = kitElement.querySelector('.authors-container');
if (!authorsContainer) {
console.error('Fehlendes Element: .authors-container im Template. Bitte prüfen!');
return kitElement; // Gibt das unvollständige Element zurück
}
authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist
if (kit.authors && kit.authors.length > 0) {
const authorsToShow = kit.authors.slice(0, 2); // Maximal zwei Autoren
const additionalAuthorsCount = kit.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 wie im Template ein neues Fenster öffnen
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);
}
}
});
authorsContainer.appendChild(authorLink);
});
// Hinweis auf zusätzliche Autoren
if (additionalAuthorsCount > 0) {
const additionalAuthorsText = document.createElement('span');
additionalAuthorsText.classList.add('additional-authors');
additionalAuthorsText.textContent = `+ ${additionalAuthorsCount}`;
authorsContainer.appendChild(additionalAuthorsText);
}
}
populateAuthorsContainer(authorsContainer, kit.authors); // Nutzt die ausgelagerte Funktion
kitElement.dataset.accounts = JSON.stringify(kit.accounts);
@ -112,7 +75,10 @@ export function enhanceStarterKits() {
// Funktion zum Laden der StarterKit-Profile
function loadStarterKitProfiles(kit) {
const title = kit.querySelector('h3').textContent;
const description = kit.querySelector('p').textContent; // Beschreibung auslesen
const accounts = JSON.parse(kit.dataset.accounts || '[]');
const popup = createRecommendationPopup(accounts, title);
const authors = Array.from(kit.querySelectorAll('.authors-container .account')).map(author => author.href);
const popup = createRecommendationPopup(accounts, title, authors, description);
document.body.appendChild(popup);
}