mirror of
https://codeberg.org/kirche-im-netz/Startodon-Hub.git
synced 2025-08-29 06:18:44 +02:00
Zwischenstand Entwicklung Starterkit-Grid
This commit is contained in:
Alexander Müller
parent
e4d5a11cb0
commit
f769da84a5
3 changed files with 404 additions and 161 deletions
335
code.js
335
code.js
|
|
@ -1,24 +1,112 @@
|
|||
const instanceColor = getComputedStyle(document.documentElement).getPropertyValue('--instance-color').trim() || '#ff6347';
|
||||
const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim() || '#ff6347';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const accountsContainer = document.querySelector('#account-list');
|
||||
let accounts = Array.from(document.querySelectorAll('.account'));
|
||||
|
||||
// Separate Favoriten und gemischte Accounts
|
||||
const favoriteAccounts = accounts.filter(account => account.dataset.favorite === "true");
|
||||
const otherAccounts = accounts.filter(account => !account.dataset.favorite);
|
||||
|
||||
// Mische übrige Accounts
|
||||
const shuffleContainers = document.querySelectorAll('.shuffle-container');
|
||||
const seed = Date.now();
|
||||
const shuffledOtherAccounts = seededShuffle(otherAccounts, seed);
|
||||
|
||||
const sortedAccounts = [...favoriteAccounts, ...shuffledOtherAccounts];
|
||||
shuffleContainers.forEach(container => {
|
||||
seededShuffleChildren(container, seed);
|
||||
});
|
||||
|
||||
accountsContainer.innerHTML = '';
|
||||
sortedAccounts.forEach(account => accountsContainer.appendChild(account));
|
||||
const starterkits = document.querySelectorAll('.starterkit');
|
||||
|
||||
sortedAccounts.forEach(function(account) {
|
||||
starterkits.forEach(kit => {
|
||||
const authorAccount = kit.querySelector('.autor .account');
|
||||
if (authorAccount) {
|
||||
try {
|
||||
const url = new URL(authorAccount.getAttribute('href'));
|
||||
const pathParts = url.pathname.split('/');
|
||||
|
||||
if (pathParts.length > 1 && pathParts[1].startsWith('@')) {
|
||||
const handle = pathParts[1].substring(1);
|
||||
const instance = url.hostname;
|
||||
const lookupUrl = `https://${config.homeInstance}/api/v1/accounts/lookup?acct=${handle}@${instance}`;
|
||||
|
||||
fetch(lookupUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
authorAccount.prepend(avatarImage);
|
||||
|
||||
// Ergänze die Klasse basierend auf der Instanz
|
||||
const serverClass = getServerClass(instance);
|
||||
if (serverClass) {
|
||||
authorAccount.classList.add(serverClass);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Abrufen des Autoren-Profils:', error);
|
||||
});
|
||||
} else {
|
||||
console.error('Ungültiger Benutzer-Handle in URL:', url.href);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler bei der Verarbeitung der URL:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const accounts = kit.querySelectorAll('.account');
|
||||
accounts.forEach(account => {
|
||||
const parent = account.closest('.autor');
|
||||
if (!parent) {
|
||||
account.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Zeige die Anzahl der Accounts auf der StarterKit-Kachel
|
||||
const accountCount = kit.querySelectorAll('.account:not(.autor .account)').length;
|
||||
const accountCountElement = document.createElement('div');
|
||||
accountCountElement.classList.add('account-count');
|
||||
accountCountElement.textContent = `${accountCount} Profile`;
|
||||
kit.appendChild(accountCountElement);
|
||||
|
||||
// Füge Event-Listener für StarterKit-Kacheln hinzu
|
||||
kit.addEventListener('click', function() {
|
||||
const title = kit.querySelector('h3').textContent;
|
||||
const accountsForPopup = Array.from(kit.querySelectorAll('.account')).filter(account => !account.closest('.autor'));
|
||||
const popup = createRecommendationPopup(accountsForPopup, title);
|
||||
document.body.appendChild(popup);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Funktion zum Erstellen eines Pop-ups.
|
||||
* @param {NodeList} accounts - Die Liste der Accounts für das Pop-up.
|
||||
* @param {string} title - Der Titel des StarterKits.
|
||||
* @returns {HTMLElement} - Das erzeugte Pop-up-Element.
|
||||
*/
|
||||
function createRecommendationPopup(accounts, title) {
|
||||
// Overlay erstellen
|
||||
const overlay = document.createElement('div');
|
||||
overlay.classList.add('recommendation-popup');
|
||||
|
||||
// Pop-up-Inhalt
|
||||
const content = document.createElement('div');
|
||||
content.classList.add('recommendation-popup-content');
|
||||
|
||||
// Header des Pop-ups
|
||||
const header = document.createElement('div');
|
||||
header.classList.add('recommendation-popup-header');
|
||||
|
||||
const titleElement = document.createElement('h3');
|
||||
titleElement.textContent = title;
|
||||
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.classList.add('close-popup');
|
||||
closeButton.textContent = '×';
|
||||
closeButton.addEventListener('click', () => overlay.remove()); // Schließen-Funktion
|
||||
|
||||
header.appendChild(titleElement);
|
||||
header.appendChild(closeButton);
|
||||
|
||||
// Body des Pop-ups
|
||||
const body = document.createElement('div');
|
||||
body.classList.add('recommendation-popup-body');
|
||||
|
||||
accounts.forEach(account => {
|
||||
try {
|
||||
const url = new URL(account.getAttribute('href'));
|
||||
const pathParts = url.pathname.split('/');
|
||||
|
|
@ -31,61 +119,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
fetch(lookupUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const link = document.createElement('a');
|
||||
link.classList.add('account-card-link');
|
||||
link.href = account.href;
|
||||
link.target = '_blank';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('account-card');
|
||||
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.classList.add('account-info');
|
||||
|
||||
const displayNameElement = document.createElement('p');
|
||||
displayNameElement.classList.add('display-name');
|
||||
displayNameElement.textContent = data.display_name || handle;
|
||||
|
||||
const handleElement = document.createElement('p');
|
||||
handleElement.classList.add('handle');
|
||||
|
||||
const serverHandleElement = document.createElement('span');
|
||||
serverHandleElement.classList.add('server-handle');
|
||||
serverHandleElement.textContent = `@${instance}`;
|
||||
|
||||
if (instance === config.homeInstance) {
|
||||
serverHandleElement.style.backgroundColor = instanceColor;
|
||||
}
|
||||
|
||||
handleElement.innerHTML = `@${data.username}`;
|
||||
handleElement.appendChild(serverHandleElement);
|
||||
|
||||
// QR-Code Button
|
||||
const qrButton = document.createElement('button');
|
||||
qrButton.classList.add('qr-code-button');
|
||||
qrButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="${backgroundColor}">
|
||||
<path d="M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/>
|
||||
</svg>
|
||||
`;
|
||||
qrButton.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
showQrPopup(link.href);
|
||||
});
|
||||
|
||||
infoContainer.appendChild(displayNameElement);
|
||||
infoContainer.appendChild(handleElement);
|
||||
card.appendChild(avatarImage);
|
||||
card.appendChild(infoContainer);
|
||||
card.appendChild(qrButton);
|
||||
link.appendChild(card);
|
||||
|
||||
account.replaceWith(link);
|
||||
const card = createAccountCard(data, account.href, instance);
|
||||
body.appendChild(card);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Abrufen des Profils:', error);
|
||||
|
|
@ -97,96 +132,122 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
console.error('Fehler bei der Verarbeitung der URL:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// QR-Code anzeigen
|
||||
function showQrPopup(profileUrl) {
|
||||
// QR-Overlay für Abdunkelung
|
||||
const overlay = document.createElement('div');
|
||||
overlay.classList.add('qr-overlay');
|
||||
// Pop-up zusammenfügen
|
||||
content.appendChild(header);
|
||||
content.appendChild(body);
|
||||
overlay.appendChild(content);
|
||||
|
||||
// Popup-Container
|
||||
const popup = document.createElement('div');
|
||||
popup.classList.add('qr-popup');
|
||||
|
||||
// Schließen-Button
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.classList.add('close-popup');
|
||||
closeButton.textContent = 'x';
|
||||
closeButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="13" height="13" fill="${backgroundColor}"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>
|
||||
`;
|
||||
closeButton.addEventListener('click', function () {
|
||||
overlay.remove();
|
||||
});
|
||||
|
||||
// Event-Listener für das Overlay (schließt Popup bei Klick auf Hintergrund)
|
||||
overlay.addEventListener('click', function (event) {
|
||||
if (event.target === overlay) { // Nur schließen, wenn außerhalb des Popups geklickt wurde
|
||||
// Event-Listener für Overlay (schließt Pop-up bei Klick auf Hintergrund)
|
||||
overlay.addEventListener('click', function(event) {
|
||||
if (event.target === overlay) {
|
||||
overlay.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// QR-Code-Container
|
||||
const qrContainer = document.createElement('div');
|
||||
qrContainer.classList.add('qr-code-container');
|
||||
return overlay;
|
||||
}
|
||||
|
||||
// QR-Code mit kjua generieren
|
||||
const qrCode = kjua({
|
||||
render: 'canvas',
|
||||
text: profileUrl,
|
||||
size: 200,
|
||||
quiet: 2,
|
||||
ecLevel: 'H',
|
||||
});
|
||||
/**
|
||||
* Funktion zum Erstellen einer Account-Kachel.
|
||||
* @param {Object} data - Die Account-Daten von der API.
|
||||
* @param {string} href - Die URL des Accounts.
|
||||
* @param {string} instance - Der Instanz-Name.
|
||||
* @returns {HTMLElement} - Die erzeugte Account-Kachel.
|
||||
*/
|
||||
function createAccountCard(data, href, instance) {
|
||||
const link = document.createElement('a');
|
||||
link.classList.add('account-card-link');
|
||||
link.href = href;
|
||||
link.target = '_blank';
|
||||
|
||||
qrContainer.appendChild(qrCode);
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('account-card');
|
||||
|
||||
// Extrahiere User-Handle und Server-Handle
|
||||
const url = new URL(profileUrl);
|
||||
const pathParts = url.pathname.split('/');
|
||||
const userHandle = pathParts[1] || '@unbekannt';
|
||||
const serverHandle = url.hostname || 'unbekannt';
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
// Handle unter dem QR-Code
|
||||
const handleContainer = document.createElement('p');
|
||||
handleContainer.classList.add('qr-handle');
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.classList.add('account-info');
|
||||
|
||||
const userHandleText = document.createTextNode(userHandle);
|
||||
const displayNameElement = document.createElement('p');
|
||||
displayNameElement.classList.add('display-name');
|
||||
displayNameElement.textContent = data.display_name || data.username;
|
||||
|
||||
const serverHandleSpan = document.createElement('span');
|
||||
serverHandleSpan.classList.add('qr-server-handle');
|
||||
serverHandleSpan.textContent = `@${serverHandle}`;
|
||||
const handleElement = document.createElement('p');
|
||||
handleElement.classList.add('handle');
|
||||
|
||||
// Dynamisch die Hintergrundfarbe für Variable "config.homeInstance" setzen
|
||||
if (serverHandle === config.homeInstance) {
|
||||
serverHandleSpan.style.backgroundColor = instanceColor;
|
||||
qrCode.style.borderColor = instanceColor;
|
||||
const serverHandleElement = document.createElement('span');
|
||||
serverHandleElement.classList.add('server-handle');
|
||||
serverHandleElement.textContent = `@${instance}`;
|
||||
|
||||
// Ergänze die Klasse basierend auf der Instanz
|
||||
const serverClass = getServerClass(instance);
|
||||
if (serverClass) {
|
||||
serverHandleElement.classList.add(serverClass);
|
||||
}
|
||||
|
||||
handleContainer.appendChild(userHandleText);
|
||||
handleContainer.appendChild(serverHandleSpan);
|
||||
handleElement.textContent = `@${data.username}`;
|
||||
handleElement.appendChild(serverHandleElement);
|
||||
|
||||
// Popup zusammenfügen
|
||||
popup.appendChild(closeButton);
|
||||
popup.appendChild(qrContainer);
|
||||
popup.appendChild(handleContainer);
|
||||
infoContainer.appendChild(displayNameElement);
|
||||
infoContainer.appendChild(handleElement);
|
||||
|
||||
// Overlay zusammenfügen
|
||||
overlay.appendChild(popup);
|
||||
document.body.appendChild(overlay);
|
||||
card.appendChild(avatarImage);
|
||||
card.appendChild(infoContainer);
|
||||
link.appendChild(card);
|
||||
|
||||
return link;
|
||||
}
|
||||
|
||||
function seededRandom(seed) {
|
||||
let x = Math.sin(seed++) * 10000;
|
||||
return x - Math.floor(x);
|
||||
/**
|
||||
* Funktion, um die Kinder eines Containers deterministisch neu anzuordnen.
|
||||
* @param {HTMLElement} container - Der Container, dessen Kinder durchmischt werden sollen.
|
||||
* @param {number} seed - Der Seed für das deterministische Shuffle.
|
||||
*/
|
||||
function seededShuffleChildren(container, seed) {
|
||||
const children = Array.from(container.children);
|
||||
const shuffled = seededShuffle(children, seed);
|
||||
shuffled.forEach(child => container.appendChild(child));
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion für einen deterministischen Shuffle-Algorithmus.
|
||||
* @param {Array} array - Das Array, das gemischt werden soll.
|
||||
* @param {number} seed - Der Seed für das deterministische Shuffle.
|
||||
* @returns {Array} - Das gemischte Array.
|
||||
*/
|
||||
function seededShuffle(array, seed) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(seededRandom(seed) * (i + 1));
|
||||
const j = Math.floor(seededRandom(seed++) * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
seed++;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion für einen deterministischen Zufallswert.
|
||||
* @param {number} seed - Der Seed für den Zufallswert.
|
||||
* @returns {number} - Der generierte Zufallswert.
|
||||
*/
|
||||
function seededRandom(seed) {
|
||||
const x = Math.sin(seed++) * 10000;
|
||||
return x - Math.floor(x);
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion zur Zuordnung von Instanzen zu CSS-Klassen.
|
||||
* @param {string} instance - Der Name der Instanz.
|
||||
* @returns {string|null} - Die zugehörige CSS-Klasse oder null, wenn keine Übereinstimmung vorliegt.
|
||||
*/
|
||||
function getServerClass(instance) {
|
||||
const serverClasses = {
|
||||
'libori.social': 'liboriSocial',
|
||||
'reliverse.social': 'reliverseSocial',
|
||||
'kirche.social': 'kircheSocial',
|
||||
'katholisch.social': 'katholischSocial'
|
||||
};
|
||||
return serverClasses[instance] || null;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue